/*
 * likuid-theme.css — Design inspiré de lPanel + identité likuid.com
 * Style: fond gris très clair, cartes blanches, boutons bleus, DM Sans
 */

/* ============================================================
   FONT — DM Sans
   ============================================================ */
@import url('https://fonts.googleapis.com/css2?family=DM+Sans:wght@400;500;600;700;800&display=swap');

body, .box-container, .box-container * {
    font-family: 'DM Sans', sans-serif !important;
}

/* ── Exception critique : ne jamais écraser les fontes d'icônes ──────────
   likuid-theme.css charge EN DERNIER → même spécificité + !important = ce
   fichier gagne. On doit donc re-déclarer les familles d'icônes ici.      */
[class^="ico-"], [class*=" ico-"] {
    font-family: 'evafeat' !important;
}
[class^="icon-"], [class*=" icon-"] {
    font-family: 'Cloudicon' !important;
}
.fa, .fas, .far, .fal, .fab, .fad,
[class^="fa-"], [class*=" fa-"] {
    font-family: 'Font Awesome 5 Free' !important;
}
.fab {
    font-family: 'Font Awesome 5 Brands' !important;
}

/* ============================================================
   VARIABLES
   ============================================================ */
:root {
    --lk-blue:       #1a8cc9;
    --lk-blue-dark:  #1270a8;
    --lk-blue-light: #eaf5fc;
    --lk-yellow:     #f5c200;
    --lk-dark:       #1B254B;
    --lk-gray:       #A3AED0;
    --lk-bg:         #F4F7FE;
    --lk-card:       #ffffff;
    --lk-border:     #E0E5F2;
    --lk-shadow:     0 2px 12px rgba(112,144,176,0.10);
    --lk-radius:     14px;
}

/* ============================================================
   FOND GÉNÉRAL — Gris très clair comme lPanel
   ============================================================ */
body,
.box-container .bg-colorstyle,
[data-background="origin"] .box-container .bg-colorstyle,
[data-background="light"] .box-container .bg-colorstyle {
    background-color: var(--lk-bg) !important;
}

/* ============================================================
   CARTES / PANNEAUX
   ============================================================ */
.box-container .bg-seccolorstyle,
[data-background="origin"] .box-container .bg-seccolorstyle,
[data-background="light"] .box-container .bg-seccolorstyle,
.service-section,
.services .service-wrap .service-section,
.rockbox .service-section {
    background-color: var(--lk-card) !important;
    box-shadow: var(--lk-shadow) !important;
    border-radius: var(--lk-radius) !important;
    border: none !important;
}

/* Retirer toutes les bordures colorées des cartes */
.service-section,
.box-container .service-section {
    border-left: none !important;
    border-right: none !important;
    border-top: none !important;
    border-bottom: none !important;
}

/* ============================================================
   SECTION APERÇU DU COMPTE
   ============================================================ */
.bg-custom {
    background-color: var(--lk-bg) !important;
    border-radius: 16px !important;
    border: 1px solid var(--lk-border) !important;
}

/* ============================================================
   TEXTE
   ============================================================ */
.mergecolor,
.box-container .mergecolor,
h1, h2, h3, h4, h5, h6,
.section-heading {
    color: var(--lk-dark) !important;
}

.section-subheading,
.subtitle,
.seccolor {
    color: var(--lk-gray) !important;
}

/* ============================================================
   NAVIGATION
   ============================================================ */
.navbar, .nav-area, nav.navbar {
    background-color: var(--lk-card) !important;
    box-shadow: 0 1px 0 var(--lk-border) !important;
    border-bottom: 1px solid var(--lk-border) !important;
}

.navbar .nav-link, .navbar a, nav .nav-link {
    color: var(--lk-dark) !important;
    font-weight: 500 !important;
}

.navbar .nav-link:hover, nav .nav-link:hover {
    color: var(--lk-blue) !important;
}

/* ============================================================
   HEADER CLIENT — Carte blanche avec nom proéminent
   ============================================================ */
.clientarea-new-header {
    background: var(--lk-card) !important;
    border-radius: var(--lk-radius) !important;
    padding: 24px 28px !important;
    margin-bottom: 20px !important;
    box-shadow: var(--lk-shadow) !important;
    border: 1px solid var(--lk-border) !important;
}

.clientarea-new-header .username {
    display: block !important;
    font-size: 1.7rem !important;
    font-weight: 800 !important;
    letter-spacing: -0.5px !important;
    color: var(--lk-dark) !important;
    margin-bottom: 2px !important;
}

.clientarea-new-header .adress {
    display: block !important;
    font-size: 12px !important;
    font-weight: 400 !important;
    color: var(--lk-gray) !important;
    margin-bottom: 12px !important;
}

.clientarea-new-header p {
    font-size: 13px !important;
    color: var(--lk-gray) !important;
    border-top: 1px solid var(--lk-border) !important;
    padding-top: 10px !important;
    margin: 0 !important;
}

/* ============================================================
   PASTILLES RACCOURCIS HOMEPAGE
   ============================================================ */
.home-shortcut-pill {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 7px !important;
    background: var(--lk-blue-light) !important;
    color: var(--lk-blue) !important;
    border: 1.5px solid #b8d8ef !important;
    border-radius: 10px !important;
    padding: 10px 18px !important;
    font-size: 13px !important;
    font-weight: 600 !important;
    text-decoration: none !important;
    transition: all 0.2s ease !important;
    box-shadow: inset 0 1px 0 rgba(255,255,255,0.8), 0 2px 6px rgba(26,140,201,0.08) !important;
}

.home-shortcut-pill:hover {
    background: var(--lk-blue) !important;
    color: #ffffff !important;
    border-color: var(--lk-blue) !important;
    text-decoration: none !important;
    box-shadow: 0 4px 14px rgba(26,140,201,0.25) !important;
    transform: translateY(-1px) !important;
}

/* ============================================================
   PASTILLES D'ACTION — Pages produit/services (pageheader.tpl)
   ============================================================ */
.page-action-pill {
    background: var(--lk-card) !important;
    color: var(--lk-dark) !important;
    border: 1.5px solid var(--lk-border) !important;
    border-radius: 10px !important;
    padding: 8px 16px !important;
    font-size: 13px !important;
    font-weight: 600 !important;
    display: inline-flex !important;
    align-items: center !important;
    gap: 6px !important;
    text-decoration: none !important;
    transition: all 0.2s ease !important;
    white-space: nowrap !important;
    box-shadow: inset 0 1px 0 rgba(255,255,255,0.9), 0 2px 6px rgba(112,144,176,0.10) !important;
}

.page-action-pill:hover {
    background: var(--lk-blue) !important;
    color: #ffffff !important;
    border-color: var(--lk-blue) !important;
    box-shadow: 0 4px 12px rgba(26,140,201,0.25) !important;
    text-decoration: none !important;
}

.page-action-pill.active,
.page-action-pill:focus {
    background: var(--lk-blue) !important;
    color: #ffffff !important;
    border-color: var(--lk-blue) !important;
}

/* ============================================================
   BOUTONS — Style lPanel (rectangulaire arrondi)
   ============================================================ */
.btn-default-yellow-fill {
    background-color: var(--lk-yellow) !important;
    color: var(--lk-dark) !important;
    border: none !important;
    border-radius: 10px !important;
    font-weight: 700 !important;
    transition: all 0.2s ease !important;
    box-shadow: 0 2px 8px rgba(245,194,0,0.25) !important;
}

.btn-default-yellow-fill:hover {
    background-color: #e0b000 !important;
    color: var(--lk-dark) !important;
    box-shadow: 0 4px 14px rgba(245,194,0,0.4) !important;
    transform: translateY(-1px) !important;
}

/* ============================================================
   STAT CARDS (Services / Domaines / Demandes / Factures)
   ============================================================ */
.overview-services .service-section {
    border: none !important;
    border-radius: var(--lk-radius) !important;
    background: var(--lk-card) !important;
    box-shadow: var(--lk-shadow) !important;
    transition: transform 0.2s ease, box-shadow 0.2s ease !important;
    padding: 20px !important;
}

.overview-services .service-section:hover {
    transform: translateY(-3px) !important;
    box-shadow: 0 8px 24px rgba(112,144,176,0.18) !important;
}

/* Icônes des stat cards — zone colorée comme lPanel */
.overview-services .service-section img.svg,
.overview-services .service-section .svg {
    background: var(--lk-blue-light) !important;
    border-radius: 10px !important;
    padding: 10px !important;
    width: 48px !important;
    height: 48px !important;
}

/* Nombre dans les stat cards */
.overview-services .service-section .title {
    font-size: 1.6rem !important;
    font-weight: 800 !important;
    color: var(--lk-dark) !important;
    margin-top: 8px !important;
}

/* ============================================================
   LIENS
   ============================================================ */
a:not(.btn):not(.page-action-pill):not(.home-shortcut-pill):not(.nav-link) {
    color: var(--lk-blue) !important;
}

/* ============================================================
   TITRE DE PAGE (Bienvenue)
   ============================================================ */
.clientarea-new-header h2,
h2.section-heading {
    font-size: 1.5rem !important;
    font-weight: 700 !important;
    color: var(--lk-dark) !important;
}

/* ============================================================
   SECTION HEADER — "Aperçu du compte" — titre léger, pas une carte
   ============================================================ */
.lk-section-header {
    background: transparent !important;
    border: none !important;
    box-shadow: none !important;
    border-radius: 0 !important;
    padding: 4px 4px 10px !important;
    display: flex !important;
    align-items: center !important;
    gap: 10px !important;
}

.lk-section-header::before {
    content: '' !important;
    display: block !important;
    width: 4px !important;
    height: 28px !important;
    background: var(--lk-blue) !important;
    border-radius: 4px !important;
    flex-shrink: 0 !important;
}

.lk-section-title {
    font-size: 1rem !important;
    font-weight: 700 !important;
    color: var(--lk-dark) !important;
    margin: 0 0 1px 0 !important;
}

.lk-section-sub {
    font-size: 12px !important;
    color: var(--lk-gray) !important;
    margin: 0 !important;
}

/* Panneaux internes — cartes blanches */
.rockbox .service-section {
    border-radius: var(--lk-radius) !important;
    border: 1px solid var(--lk-border) !important;
    box-shadow: var(--lk-shadow) !important;
    background: var(--lk-card) !important;
}

/* Espacement réduit sous le header */
.container-clientarea {
    margin-bottom: 0 !important;
    padding-bottom: 0 !important;
}

/* ============================================================
   PANNEAUX DASHBOARD — "Aperçu du compte"
   ============================================================ */

/* Carte panneau */
.rockbox .service-section {
    border-radius: var(--lk-radius) !important;
    border: 1px solid var(--lk-border) !important;
    box-shadow: var(--lk-shadow) !important;
    background: var(--lk-card) !important;
    padding: 0 !important;
    margin-bottom: 20px !important;
    overflow: hidden !important;
}

/* Titre du panneau */
.rockbox .service-section > .title {
    font-size: 0.85rem !important;
    font-weight: 700 !important;
    text-transform: uppercase !important;
    letter-spacing: 0.5px !important;
    color: var(--lk-gray) !important;
    padding: 14px 18px 12px !important;
    margin: 0 !important;
    border-bottom: 1px solid var(--lk-border) !important;
    background: var(--lk-bg) !important;
    display: flex !important;
    align-items: center !important;
    gap: 8px !important;
}

/* Badge dans le titre */
.rockbox .service-section > .title .badge {
    background: var(--lk-blue) !important;
    color: #fff !important;
    border-radius: 20px !important;
    padding: 2px 8px !important;
    font-size: 11px !important;
    font-weight: 600 !important;
}

/* Liste d'items */
.rockbox .service-section .list-group {
    margin: 0 !important;
    border-radius: 0 !important;
    border: none !important;
}

/* Chaque item de la liste */
.rockbox .service-section .list-group-item {
    border: none !important;
    border-bottom: 1px solid var(--lk-border) !important;
    border-radius: 0 !important;
    padding: 12px 18px !important;
    background: transparent !important;
    color: var(--lk-dark) !important;
    font-size: 13px !important;
    font-weight: 500 !important;
    transition: background 0.15s ease !important;
    display: flex !important;
    align-items: center !important;
    gap: 8px !important;
}

.rockbox .service-section .list-group-item:last-child {
    border-bottom: none !important;
}

a.list-group-item:hover,
.rockbox .service-section a.list-group-item:hover {
    background: var(--lk-blue-light) !important;
    color: var(--lk-blue) !important;
    text-decoration: none !important;
}

.rockbox .service-section .list-group-item.active {
    background: var(--lk-blue-light) !important;
    color: var(--lk-blue) !important;
    border-left: 3px solid var(--lk-blue) !important;
}

/* Icône dans les items */
.rockbox .service-section .list-group-item i {
    color: var(--lk-gray) !important;
    width: 16px !important;
    text-align: center !important;
    flex-shrink: 0 !important;
}

/* ============================================================
   ITEMS PRODUITS/SERVICES ACTIFS
   ============================================================ */

.div-service-item {
    padding: 14px 18px !important;
    border-bottom: 1px solid var(--lk-border) !important;
    cursor: pointer !important;
    transition: background 0.15s ease !important;
    display: flex !important;
    flex-direction: column !important;
    gap: 6px !important;
}

.div-service-item:last-child {
    border-bottom: none !important;
}

.div-service-item:hover {
    background: var(--lk-bg) !important;
}

/* Ligne statut */
.div-service-status {
    display: flex !important;
    align-items: center !important;
    gap: 6px !important;
}

/* Masquer le label placeholder (doublon) */
.div-service-status .label-placeholder {
    display: none !important;
}

/* Badges de statut */
.label {
    display: inline-block !important;
    padding: 3px 10px !important;
    border-radius: 20px !important;
    font-size: 11px !important;
    font-weight: 600 !important;
    line-height: 1.4 !important;
}

.label-success {
    background: #e6f9f0 !important;
    color: #1a9e5c !important;
}

.label-warning {
    background: #fff8e0 !important;
    color: #b38600 !important;
}

.label-danger {
    background: #fdecea !important;
    color: #c0392b !important;
}

.label-info {
    background: var(--lk-blue-light) !important;
    color: var(--lk-blue) !important;
}

.label-default {
    background: #f0f0f5 !important;
    color: var(--lk-gray) !important;
}

/* Nom du produit */
.div-service-name {
    display: flex !important;
    flex-direction: column !important;
    gap: 2px !important;
}

.div-service-name .font-weight-bold {
    font-size: 13px !important;
    font-weight: 600 !important;
    color: var(--lk-dark) !important;
}

.div-service-name .text-domain {
    font-size: 12px !important;
    color: var(--lk-gray) !important;
}

/* Boutons d'action du service */
.div-service-buttons {
    display: flex !important;
    gap: 8px !important;
    flex-wrap: wrap !important;
    align-items: center !important;
    margin-top: 8px !important;
}

.div-service-buttons .btn {
    font-size: 12px !important;
    padding: 5px 14px !important;
    border-radius: 8px !important;
}

/* Bouton "Voir les détails" — style discret */
.btn-view-details {
    background: transparent !important;
    color: var(--lk-blue) !important;
    border: 1.5px solid var(--lk-blue-light) !important;
    box-shadow: none !important;
}

.btn-view-details:hover {
    background: var(--lk-blue-light) !important;
    color: var(--lk-blue) !important;
    border-color: var(--lk-blue) !important;
}

/* Message "Aucun item" */
.rockbox .service-section .list-group-item:only-child {
    color: var(--lk-gray) !important;
    text-align: center !important;
    font-style: italic !important;
}

/* ============================================================
   MENU RAPIDE — Tuiles de navigation homepage
   ============================================================ */
.lk-nav-card {
    background: var(--lk-card);
    border: 1px solid var(--lk-border);
    border-radius: var(--lk-radius);
    box-shadow: var(--lk-shadow);
    overflow: hidden;
    height: 100%;
}

/* En-tête de la carte */
.lk-nav-card-header {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 14px 18px;
    background: var(--lk-bg);
    border-bottom: 1px solid var(--lk-border);
}

.lk-nav-card-icon {
    color: var(--lk-blue);
    font-size: 16px;
    width: 20px;
    text-align: center;
    flex-shrink: 0;
}

.lk-nav-card-title {
    font-size: 0.85rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    color: var(--lk-dark);
    flex: 1;
}

.lk-nav-card-title a {
    color: var(--lk-dark) !important;
    text-decoration: none !important;
}

.lk-nav-card-title a:hover {
    color: var(--lk-blue) !important;
}

/* Badge dans le header */
.lk-nav-badge {
    background: var(--lk-blue);
    color: #fff;
    border-radius: 20px;
    padding: 2px 8px;
    font-size: 11px;
    font-weight: 600;
    flex-shrink: 0;
}

/* Liste de liens */
.lk-nav-card-links {
    display: flex;
    flex-direction: column;
}

/* Chaque lien */
.lk-nav-card-link {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 11px 18px;
    border-bottom: 1px solid var(--lk-border);
    color: var(--lk-dark) !important;
    font-size: 13px;
    font-weight: 500;
    text-decoration: none !important;
    transition: background 0.15s ease;
}

.lk-nav-card-link:last-child {
    border-bottom: none;
}

.lk-nav-card-link:hover {
    background: var(--lk-blue-light);
    color: var(--lk-blue) !important;
}

.lk-nav-card-link i:not(.lk-nav-arrow) {
    color: var(--lk-gray);
    width: 16px;
    text-align: center;
    flex-shrink: 0;
}

.lk-nav-card-link:hover i {
    color: var(--lk-blue);
}

.lk-nav-card-link span {
    flex: 1;
}

.lk-nav-arrow {
    color: var(--lk-gray);
    font-size: 12px;
    flex-shrink: 0;
    margin-left: auto;
}

/* ============================================================
   LIENS RAPIDES DANS LE HEADER UNIFIÉ
   ============================================================ */
.lk-header-link {
    display: block !important;
    width: 100% !important;
    font-size: 13px !important;
    font-weight: 500 !important;
    color: var(--lk-dark) !important;
    text-decoration: none !important;
    padding: 4px 0 !important;
    line-height: 1.4 !important;
    transition: color 0.15s ease !important;
}

.lk-header-link:hover {
    color: var(--lk-blue) !important;
    text-decoration: none !important;
}

/* ============================================================
   SIDEBAR — Navigation client area (style cPanel / lPanel)
   ============================================================ */

/* Layout global quand sidebar active
   IMPORTANT : lk-has-sidebar est sur le même élément que .wrapper.sec-normal
   → sélecteur compound (pas descendant) */
.wrapper.sec-normal.lk-has-sidebar {
    margin-left: 240px !important;
    padding-top: 0 !important;
    transition: margin 0.28s ease !important;
}

/* Colle le container Bootstrap au bord gauche du wrapper
   (sinon Bootstrap re-centre et crée un gap entre sidebar et contenu) */
.wrapper.sec-normal.lk-has-sidebar .container,
.wrapper.sec-normal.lk-has-sidebar .main-content {
    margin-left: 0 !important;
    max-width: 100% !important;
}

@media (max-width: 991px) {
    .wrapper.sec-normal.lk-has-sidebar { margin-left: 0 !important; padding-top: 60px !important; }
    .wrapper.sec-normal.lk-has-sidebar .container,
    .wrapper.sec-normal.lk-has-sidebar .main-content { max-width: 100% !important; margin-left: auto !important; }
    #lkSidebarToggle { display: inline-flex; align-items: center; justify-content: center; }
}

/* Sidebar container */
.lk-sidebar {
    position: fixed !important;
    left: 0 !important;
    top: 0 !important;
    padding-top: 12px !important;
    width: 240px !important;
    height: 100vh !important;
    overflow-y: auto !important;
    overflow-x: hidden !important;
    z-index: 9999 !important;
    background: #ffffff !important;
    border-right: 1px solid #E0E5F2 !important;
    box-shadow: 2px 0 12px rgba(112,144,176,0.10) !important;
    display: flex !important;
    flex-direction: column !important;
    transition: transform 0.28s cubic-bezier(.4,0,.2,1) !important;
}

/* Scrollbar fine dans la sidebar */
.lk-sidebar::-webkit-scrollbar { width: 4px; }
.lk-sidebar::-webkit-scrollbar-track { background: transparent; }
.lk-sidebar::-webkit-scrollbar-thumb { background: #D0D7E8; border-radius: 4px; }

/* Lien CTA Commander */
.lk-sidebar-link--cta {
    color: var(--lk-blue) !important;
    font-weight: 600 !important;
    border-top: 1px solid var(--lk-border) !important;
    margin-top: 4px !important;
}
.lk-sidebar-link--cta i { color: var(--lk-blue) !important; }

/* Bloc identité utilisateur */
.lk-sidebar-user {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 14px 16px;
    border-bottom: 1px solid #E0E5F2;
    flex-shrink: 0;
}

.lk-sidebar-avatar {
    width: 34px;
    height: 34px;
    border-radius: 50%;
    background: var(--lk-blue-light, #EBF4FB);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.lk-sidebar-avatar i { color: var(--lk-blue); font-size: 15px; }

.lk-sidebar-name {
    font-size: 12px;
    font-weight: 700;
    color: var(--lk-dark, #1a202c);
    line-height: 1.2;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.lk-sidebar-email {
    font-size: 10px;
    color: var(--lk-gray, #718096);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 160px;
}

/* Lien Dashboard (accueil) */
.lk-sidebar-home {
    display: flex !important;
    align-items: center !important;
    gap: 10px !important;
    padding: 13px 18px !important;
    font-size: 13px !important;
    font-weight: 700 !important;
    color: var(--lk-dark, #1a202c) !important;
    text-decoration: none !important;
    border-bottom: 1px solid #E0E5F2 !important;
    transition: background 0.15s !important;
    flex-shrink: 0 !important;
}

.lk-sidebar-home:hover,
.lk-sidebar-home.active {
    background: #FFF5D6 !important;
    color: #1a202c !important;
    text-decoration: none !important;
}

.lk-sidebar-home i { font-size: 15px !important; color: #c98b00 !important; }

/* Zone de navigation */
.lk-sidebar-nav {
    flex: 0 0 auto;
    overflow: visible;
    padding: 8px 0 2px;
}

/* Section (groupe de liens) */
.lk-sidebar-section { margin-bottom: 4px; }

/* Label de section */
.lk-sidebar-label {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 10px 16px 4px;
    font-size: 10px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.8px;
    color: var(--lk-gray, #718096);
}

.lk-sidebar-label .lk-sidebar-badge--alert { margin-left: auto; }

/* Lien de navigation */
.lk-sidebar-link {
    display: flex !important;
    align-items: center !important;
    gap: 10px !important;
    padding: 10px 18px !important;
    font-size: 13px !important;
    font-weight: 500 !important;
    color: var(--lk-dark, #2d3748) !important;
    text-decoration: none !important;
    transition: background 0.15s, color 0.15s !important;
    position: relative !important;
    border-radius: 0 !important;
}

.lk-sidebar-link:hover {
    background: var(--lk-blue-light, #EBF4FB) !important;
    color: var(--lk-blue) !important;
    text-decoration: none !important;
}

.lk-sidebar-link.active {
    background: #FFF5D6 !important;
    color: #1a202c !important;
    font-weight: 700 !important;
    border-radius: 12px !important;
    margin: 0 10px !important;
}

.lk-sidebar-link.active::before { display: none; }

.lk-sidebar-link i {
    font-size: 14px !important;
    width: 16px !important;
    text-align: center !important;
    flex-shrink: 0 !important;
    color: var(--lk-gray, #718096) !important;
}

.lk-sidebar-link:hover i { color: var(--lk-blue) !important; }
.lk-sidebar-link.active i { color: var(--lk-blue) !important; }

/* Badges dans la sidebar */
.lk-sidebar-badge {
    margin-left: auto;
    background: var(--lk-blue);
    color: #fff;
    border-radius: 10px;
    padding: 1px 7px;
    font-size: 10px;
    font-weight: 700;
    flex-shrink: 0;
}

.lk-sidebar-badge--alert { background: #e53e3e !important; }

/* Pied de sidebar — déconnexion */
.lk-sidebar-footer {
    padding: 12px 16px;
    border-top: 1px solid #E0E5F2;
    flex-shrink: 0;
    margin-top: auto;
}

.lk-sidebar-logout {
    display: flex !important;
    align-items: center !important;
    gap: 8px !important;
    padding: 8px 10px !important;
    font-size: 13px !important;
    color: var(--lk-gray, #718096) !important;
    text-decoration: none !important;
    border-radius: 8px !important;
    transition: background 0.15s, color 0.15s !important;
}

.lk-sidebar-logout:hover {
    background: #FFF5F5 !important;
    color: #e53e3e !important;
    text-decoration: none !important;
}

.lk-sidebar-logout i { font-size: 14px !important; }

/* Bouton toggle mobile */
.lk-sidebar-toggle {
    display: none;
    position: fixed;
    bottom: 20px;
    left: 20px;
    z-index: 10000;
    width: 44px;
    height: 44px;
    border-radius: 50%;
    background: var(--lk-blue);
    color: #fff;
    border: none;
    cursor: pointer;
    align-items: center;
    justify-content: center;
    box-shadow: 0 4px 14px rgba(26,140,201,0.35);
    font-size: 16px;
}

/* Mobile */
@media (max-width: 991px) {
    .lk-sidebar {
        transform: translateX(-100%) !important;
        z-index: 9999 !important;
    }
    .lk-sidebar.open {
        transform: translateX(0) !important;
        box-shadow: 4px 0 24px rgba(0,0,0,0.15) !important;
    }
    .lk-has-sidebar .wrapper.sec-normal {
        margin-left: 0 !important;
    }
    .lk-sidebar-toggle {
        display: flex;
    }
}

/* ============================================================
   WELCOME BANNER — Dashboard (remplace le header 4 colonnes)
   ============================================================ */
.lk-welcome-banner {
    background: var(--lk-card);
    border: 1px solid var(--lk-border);
    border-radius: var(--lk-radius);
    box-shadow: var(--lk-shadow);
    padding: 20px 24px;
    margin-bottom: 20px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 20px;
    flex-wrap: wrap;
}

.lk-welcome-identity {
    display: flex;
    align-items: center;
    gap: 14px;
}

.lk-welcome-avatar {
    width: 48px;
    height: 48px;
    border-radius: 50%;
    background: var(--lk-blue-light);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.lk-welcome-avatar i { color: var(--lk-blue); font-size: 22px; }

.lk-welcome-name {
    font-size: 1.15rem !important;
    font-weight: 700 !important;
    margin: 0 0 2px 0 !important;
    color: var(--lk-dark) !important;
}

.lk-welcome-addr {
    font-size: 12px;
    color: var(--lk-gray);
    margin: 0 0 2px 0;
}

.lk-welcome-sub {
    font-size: 12px;
    color: var(--lk-gray);
    margin: 0;
}

.lk-welcome-actions {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
}

.lk-welcome-actions .btn {
    font-size: 13px !important;
    padding: 8px 16px !important;
    display: inline-flex !important;
    align-items: center !important;
    gap: 6px !important;
}

/* ============================================================
   PAGE HEADER — Titre + actions (toutes les pages client)
   ============================================================ */
.lk-page-header {
    background: var(--lk-card);
    border: 1px solid var(--lk-border);
    border-radius: var(--lk-radius);
    box-shadow: var(--lk-shadow);
    margin-bottom: 20px;
}

.lk-page-header-inner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 16px 20px;
    gap: 16px;
    flex-wrap: wrap;
}

.lk-page-title {
    font-size: 1.1rem !important;
    font-weight: 700 !important;
    margin: 0 !important;
    color: var(--lk-dark) !important;
}

.lk-page-subtitle {
    font-size: 12px !important;
    color: var(--lk-gray) !important;
    margin: 3px 0 0 0 !important;
}

.lk-page-actions {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
    align-items: center;
}

/* ============================================================
   LIST VIEW — Services, Domaines, Factures, etc.
   ============================================================ */
.lk-list {
    background: var(--lk-card);
    border: 1px solid var(--lk-border);
    border-radius: var(--lk-radius);
    box-shadow: var(--lk-shadow);
    overflow: hidden;
}

.lk-list-item {
    display: flex;
    align-items: center;
    gap: 16px;
    padding: 14px 20px;
    border-bottom: 1px solid var(--lk-border);
    transition: background 0.15s ease;
}

.lk-list-item:last-child { border-bottom: none; }

.lk-list-item:hover { background: var(--lk-bg); }

/* Icône */
.lk-list-icon {
    width: 38px;
    height: 38px;
    border-radius: 10px;
    background: var(--lk-blue-light);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.lk-list-icon i { color: var(--lk-blue); font-size: 16px; }

/* Nom + domaine */
.lk-list-main { flex: 1; min-width: 0; }

.lk-list-name {
    font-size: 13px;
    font-weight: 700;
    color: var(--lk-dark);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.lk-list-sub {
    font-size: 12px;
    color: var(--lk-gray);
    margin-top: 2px;
}

.lk-list-sub a {
    color: #55627f !important;
    -webkit-text-fill-color: #55627f !important;
    text-decoration: none !important;
}

/* Prix */
.lk-list-meta { text-align: right; flex-shrink: 0; }

.lk-list-price {
    font-size: 13px;
    font-weight: 700;
    color: var(--lk-dark);
}

.lk-list-cycle {
    font-size: 11px;
    color: var(--lk-gray);
}

/* Date d'échéance */
.lk-list-due { text-align: center; flex-shrink: 0; min-width: 110px; }

.lk-list-due-label {
    font-size: 10px;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    color: var(--lk-gray);
}

.lk-list-due-date {
    font-size: 13px;
    font-weight: 600;
    color: var(--lk-dark);
    margin-top: 2px;
}

/* Statut */
.lk-list-status { flex-shrink: 0; }

/* Bouton */
.lk-list-action { flex-shrink: 0; }

.lk-list-action .btn { font-size: 12px !important; padding: 6px 14px !important; }

/* État vide */
.lk-empty-state {
    padding: 50px 20px;
    text-align: center;
}

.lk-empty-icon {
    font-size: 40px;
    color: var(--lk-gray);
    display: block;
    margin-bottom: 12px;
}

.lk-empty-text {
    color: var(--lk-gray);
    font-size: 14px;
    margin-bottom: 16px;
}

/* Mobile responsive */
@media (max-width: 768px) {
    .lk-list-item {
        flex-wrap: wrap;
        gap: 10px;
    }
    .lk-list-meta,
    .lk-list-due { min-width: auto; }
    .lk-list-action { width: 100%; }
    .lk-list-action .btn { width: 100% !important; text-align: center; }
}

/* ============================================================
   DASHBOARD HOME — Redesign complet
   ============================================================ */

/* ---- Bienvenue ---- */
.lk-dash-welcome {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    flex-wrap: wrap;
    margin-bottom: 18px;
}

.lk-dash-welcome-label {
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.6px;
    color: var(--lk-gray);
    margin-bottom: 2px;
    text-transform: uppercase;
}

.lk-dash-welcome-title {
    font-size: 1.5rem !important;
    font-weight: 800 !important;
    color: var(--lk-dark) !important;
    margin: 0 0 2px 0 !important;
    line-height: 1.2 !important;
}

.lk-dash-welcome-sub {
    font-size: 12px;
    color: var(--lk-gray);
    margin: 0;
}

.lk-dash-welcome-actions {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-shrink: 0;
    flex-wrap: wrap;
}

/* ---- Boutons dashboard ---- */
.lk-dash-btn {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 11px 18px;
    border-radius: 12px;
    font-size: 13px;
    font-weight: 600;
    text-decoration: none !important;
    border: none;
    cursor: pointer;
    transition: all 0.18s ease;
    white-space: nowrap;
}

.lk-dash-btn--yellow {
    background: var(--lk-yellow, #f5c000);
    color: #1a202c !important;
}
.lk-dash-btn--yellow:hover { background: #e0ac00; color: #1a202c !important; }

.lk-dash-btn--outline {
    background: #fff;
    color: var(--lk-dark) !important;
    border: 1.5px solid #D0D7E8;
}
.lk-dash-btn--outline:hover { border-color: var(--lk-blue); color: var(--lk-blue) !important; }

/* ---- Grille stats (4 colonnes) ---- */
.lk-stat-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 10px;
    margin-bottom: 12px;
}

.lk-stat-card {
    background: #fff;
    border: 1px solid #E2E8F0;
    border-radius: 16px;
    padding: 14px 14px;
    display: flex;
    align-items: flex-start;
    gap: 12px;
    text-decoration: none !important;
    transition: box-shadow 0.18s, transform 0.18s;
    box-shadow: 0 1px 3px rgba(0,0,0,0.04);
}
.lk-stat-card:hover {
    box-shadow: 0 4px 14px rgba(0,0,0,0.09);
    transform: translateY(-1px);
    text-decoration: none !important;
}

.lk-stat-icon {
    width: 42px;
    height: 42px;
    border-radius: 11px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    font-size: 18px;
}

.lk-stat-body { flex: 1; min-width: 0; }

.lk-stat-label {
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 0.6px;
    color: #94A3B8;
    margin-bottom: 4px;
    text-transform: uppercase;
}

.lk-stat-value {
    font-size: 1.55rem;
    font-weight: 800;
    color: var(--lk-dark);
    line-height: 1;
    margin-bottom: 6px;
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.lk-stat-amount {
    font-size: 12px;
    font-weight: 700;
}

.lk-stat-link {
    font-size: 11.5px;
    font-weight: 600;
    color: var(--lk-blue);
    display: flex;
    align-items: center;
    gap: 4px;
}

.lk-stat-link--alert { color: #DD6B20; }

/* Variantes couleur */
.lk-stat-card--blue .lk-stat-icon  { background: #DBEAFE; color: #2563EB; }
.lk-stat-card--green .lk-stat-icon { background: #DCFCE7; color: #16A34A; }
.lk-stat-card--orange .lk-stat-icon { background: #FFEDD5; color: #EA580C; }
.lk-stat-card--purple .lk-stat-icon { background: #EDE9FE; color: #7C3AED; }

.lk-stat-card--orange .lk-stat-amount { color: #EA580C; }
.lk-stat-card--alert { border-color: #FED7AA; background: #FFFBF5; }

/* ---- Layout 2 colonnes ---- */
.lk-dash-row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 10px;
    margin-bottom: 10px;
}

/* ---- Widgets ---- */
.lk-dash-widget {
    background: #fff;
    border: 1px solid var(--lk-border);
    border-radius: 16px;
    overflow: hidden;
    box-shadow: 0 1px 4px rgba(0,0,0,0.05);
    display: flex;
    flex-direction: column;
}

.lk-dash-widget--invoice { }

.lk-widget-header {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 14px 20px;
    border-bottom: 1px solid var(--lk-border);
}

.lk-widget-title {
    font-size: 13px;
    font-weight: 700;
    color: var(--lk-dark);
    display: flex;
    align-items: center;
    gap: 7px;
}

.lk-widget-title-icon { color: var(--lk-blue); font-size: 14px; }
.lk-widget-title-icon--yellow { color: #f5c000 !important; }

.lk-widget-viewall {
    margin-left: auto;
    font-size: 12px;
    font-weight: 600;
    color: var(--lk-blue) !important;
    text-decoration: none !important;
    display: flex;
    align-items: center;
    gap: 4px;
}
.lk-widget-viewall:hover { color: #1270a0 !important; }

.lk-widget-body {
    padding: 12px 20px;
    flex: 1;
}

.lk-widget-body--flush { padding: 0; }

/* État vide dans widget */
.lk-widget-empty {
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 24px 16px;
    text-align: center;
    color: var(--lk-gray);
}
.lk-widget-empty--lg { padding: 36px 16px; }
.lk-widget-empty-icon { font-size: 32px; color: #CBD5E0; margin-bottom: 10px; }
.lk-widget-empty p { font-size: 13px; font-weight: 600; color: var(--lk-dark); margin: 0 0 4px 0; }
.lk-widget-empty small { font-size: 12px; color: var(--lk-gray); }

/* ---- Ligne service dans widget ---- */
.lk-svc-row {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 0;
    border-bottom: 1px solid var(--lk-border);
    transition: background 0.15s;
}
.lk-svc-row:last-child { border-bottom: none; }
.lk-svc-row:hover { background: #f7fafc; margin: 0 -20px; padding: 10px 20px; }

.lk-svc-dot {
    width: 9px;
    height: 9px;
    border-radius: 50%;
    flex-shrink: 0;
}
.lk-svc-dot--active    { background: #38a169; }
.lk-svc-dot--suspended { background: #ed8936; }
.lk-svc-dot--terminated, .lk-svc-dot--cancelled { background: #e53e3e; }
.lk-svc-dot--pending   { background: #805ad5; }

.lk-svc-info { flex: 1; min-width: 0; }
.lk-svc-name { font-size: 13px; font-weight: 600; color: var(--lk-dark); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.lk-svc-domain { font-size: 11px; color: var(--lk-gray); }

.lk-svc-badge {
    font-size: 11px;
    font-weight: 600;
    padding: 2px 9px;
    border-radius: 20px;
    flex-shrink: 0;
}
.lk-svc-badge--active    { background: #E8F8F0; color: #276749; }
.lk-svc-badge--suspended { background: #FFF3E0; color: #c05621; }
.lk-svc-badge--terminated, .lk-svc-badge--cancelled { background: #FFF5F5; color: #c53030; }
.lk-svc-badge--pending   { background: #F3F0FD; color: #553c9a; }

.lk-svc-btn {
    font-size: 12px;
    font-weight: 700;
    padding: 8px 16px;
    border-radius: 12px;
    border: 1.5px solid #D0D7E8;
    color: var(--lk-dark) !important;
    text-decoration: none !important;
    flex-shrink: 0;
    transition: all 0.15s;
}
.lk-svc-btn:hover { border-color: var(--lk-blue); color: var(--lk-blue) !important; }

/* ---- Widget facture ---- */
.lk-badge-apayer {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    font-size: 11px;
    font-weight: 700;
    padding: 3px 10px;
    border-radius: 20px;
    background: #FFF3E0;
    color: #c05621;
}

.lk-inv-title {
    font-size: 1.1rem;
    font-weight: 700;
    color: var(--lk-dark);
    margin-bottom: 12px;
}

.lk-inv-meta {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 8px;
}

.lk-inv-num { font-size: 12px; font-weight: 600; color: var(--lk-gray); }
.lk-inv-date { font-size: 12px; color: var(--lk-gray); }

.lk-inv-amount {
    font-size: 1.5rem;
    font-weight: 800;
    color: var(--lk-dark);
    margin-bottom: 16px;
}

.lk-inv-pay-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    width: 100%;
    padding: 12px;
    background: var(--lk-yellow, #f5c000);
    color: #1a202c !important;
    font-size: 14px;
    font-weight: 700;
    border-radius: 10px;
    text-decoration: none !important;
    transition: background 0.18s;
}
.lk-inv-pay-btn:hover { background: #e0ac00; }

.lk-inv-paid {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 14px;
    font-weight: 600;
    color: #38a169;
    padding: 10px 0;
}

/* ---- Widget tickets ---- */
.lk-ticket-row {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 11px 0;
    border-bottom: 1px solid var(--lk-border);
}
.lk-ticket-row:last-child { border-bottom: none; }
.lk-ticket-row:hover { background: #f7fafc; margin: 0 -18px; padding: 11px 18px; }

.lk-ticket-dot {
    width: 9px; height: 9px;
    border-radius: 50%;
    background: #ed8936;
    flex-shrink: 0;
}

.lk-ticket-info { flex: 1; min-width: 0; }
.lk-ticket-subj { font-size: 13px; font-weight: 600; color: var(--lk-dark); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.lk-ticket-dept { font-size: 11px; color: var(--lk-gray); }

.lk-ticket-status {
    font-size: 11px;
    font-weight: 600;
    padding: 2px 9px;
    border-radius: 20px;
    background: #FFF3E0;
    color: #c05621;
    flex-shrink: 0;
}

/* ---- Actions rapides ---- */
.lk-quick-action {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 12px 18px;
    border-bottom: 1px solid var(--lk-border);
    text-decoration: none !important;
    transition: background 0.15s;
}
.lk-quick-action:last-child { border-bottom: none; }
.lk-quick-action:hover { background: #f7fafc; }

.lk-qa-icon {
    width: 40px;
    height: 40px;
    border-radius: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 16px;
    flex-shrink: 0;
}

.lk-qa-icon--blue   { background: #EBF4FB; color: #1a8cc9; }
.lk-qa-icon--teal   { background: #E0F7F4; color: #319795; }
.lk-qa-icon--orange { background: #FFF3E0; color: #ed8936; }
.lk-qa-icon--purple { background: #F3F0FD; color: #805ad5; }

.lk-qa-text { flex: 1; min-width: 0; }
.lk-qa-title { font-size: 13px; font-weight: 600; color: var(--lk-dark); }
.lk-qa-sub   { font-size: 11px; color: var(--lk-gray); }

.lk-qa-arrow { color: #CBD5E0; font-size: 12px; flex-shrink: 0; }
.lk-quick-action:hover .lk-qa-arrow { color: var(--lk-blue); }

/* ---- Barre d'état ---- */
.lk-status-bar {
    background: #F0FDF4;
    border: 1px solid #CDEFD9;
    border-radius: 16px;
    padding: 18px 22px;
    display: flex;
    align-items: center;
    gap: 20px;
    margin-bottom: 24px;
    box-shadow: 0 1px 4px rgba(0,0,0,0.05);
    flex-wrap: wrap;
}

.lk-status-shield {
    width: 52px;
    height: 52px;
    border-radius: 50%;
    background: #E8F8F0;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 22px;
    color: #38a169;
    flex-shrink: 0;
}

.lk-status-text { flex: 1; min-width: 120px; }
.lk-status-title { font-size: 14px; font-weight: 700; color: var(--lk-dark); }
.lk-status-sub   { font-size: 12px; color: #38a169; margin-top: 2px; }

.lk-status-items {
    display: flex;
    gap: 24px;
    flex-wrap: wrap;
}

.lk-status-item {
    display: flex;
    align-items: center;
    gap: 8px;
}

.lk-status-dot {
    width: 10px;
    height: 10px;
    border-radius: 50%;
    flex-shrink: 0;
}
.lk-status-dot--green { background: #38a169; }
.lk-status-dot--blue  { background: #1a8cc9; }

.lk-status-label { font-size: 11px; color: var(--lk-gray); }
.lk-status-val   { font-size: 12px; font-weight: 600; color: var(--lk-dark); }

/* ---- Logo dans la sidebar ---- */
.lk-sidebar-brand {
    padding: 18px 18px 16px;
    border-bottom: 1px solid #E0E5F2;
    flex-shrink: 0;
}
.lk-sidebar-logo-img {
    height: 34px;
    width: auto;
    max-width: 188px;
    display: block;
}
.lk-sidebar-logo-text {
    font-size: 14px;
    font-weight: 800;
    color: var(--lk-dark);
    letter-spacing: -0.3px;
}

/* ── Bloc utilisateur dans la sidebar ─────────────────────── */
.lk-sidebar-user {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 12px 14px;
    border-bottom: 1px solid #E0E5F2;
    flex-shrink: 0;
}

.lk-sidebar-user-profile {
    flex: 1 1 0;
    min-width: 0;
    display: flex;
    align-items: center;
    gap: 10px;
    text-decoration: none;
    border-radius: 10px;
    padding: 4px 6px;
    transition: background .15s;
}

.lk-sidebar-user-profile:hover {
    background: #f0eeff;
    text-decoration: none;
}

.lk-sidebar-user-avatar {
    flex: 0 0 34px;
    width: 34px;
    height: 34px;
    border-radius: 10px;
    background: linear-gradient(135deg, #7b6dff 0%, #6656ff 100%);
    color: #fff;
    font-size: 12px;
    font-weight: 700;
    display: flex;
    align-items: center;
    justify-content: center;
    letter-spacing: .5px;
}

.lk-sidebar-user-info {
    min-width: 0;
    line-height: 1.25;
}

.lk-sidebar-user-name {
    font-size: 13px;
    font-weight: 600;
    color: #1b254b;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.lk-sidebar-user-id {
    font-size: 11px;
    color: #8a96b3;
    font-weight: 500;
}

.lk-sidebar-user-bell {
    flex: 0 0 34px;
    width: 34px;
    height: 34px;
    border-radius: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #8a96b3;
    font-size: 16px;
    position: relative;
    text-decoration: none;
    transition: background .15s, color .15s;
}

.lk-sidebar-user-bell:hover {
    background: #f0eeff;
    color: #6656ff;
}

.lk-sidebar-user-badge {
    position: absolute;
    top: 3px;
    right: 3px;
    background: #ef4444;
    color: #fff;
    font-size: 9px;
    font-weight: 700;
    border-radius: 50%;
    width: 14px;
    height: 14px;
    display: flex;
    align-items: center;
    justify-content: center;
    line-height: 1;
}

/* Cache la barre nav WHMCS + headeroutput en espace client */
body.lk-client-area #header { display: none !important; }
body.lk-client-area #lk-headeroutput { display: none !important; }

/* Cache le footer marketing dans l'espace client */
body.lk-client-area #footer { display: none !important; }

body.lk-client-area {
    background: var(--lk-bg) !important;
}

#lkTopbar {
    position: fixed !important;
    top: 0 !important;
    left: 240px !important;
    right: 0 !important;
    height: 64px !important;
    padding: 12px 22px !important;
    background: rgba(255,255,255,0.94) !important;
    backdrop-filter: blur(10px);
    border-bottom: 1px solid #E2E8F0 !important;
    display: flex !important;
    align-items: center !important;
    gap: 16px !important;
    z-index: 9997 !important;
}

#lkSidebarOverlay {
    display: none;
    position: fixed;
    inset: 0;
    background: rgba(15, 23, 42, 0.35);
    z-index: 9996;
}

#lkSidebarOverlay.active {
    display: block;
}

#lkSidebarToggle {
    display: none;
    position: fixed;
    top: 18px;
    left: 16px;
    width: 42px;
    height: 42px;
    border: none;
    border-radius: 12px;
    background: #fff;
    color: var(--lk-dark);
    box-shadow: 0 8px 24px rgba(15, 23, 42, 0.12);
    z-index: 9998;
}
@media (max-width: 991px) {
    #lkSidebarToggle { display: inline-flex; align-items: center; justify-content: center; }
}

/* ============================================================
   TOPBAR — Barre horizontale (recherche + cloche + compte)
   ============================================================ */
.lk-topbar-search {
    flex: 1;
    display: flex;
    align-items: center;
    gap: 10px;
    background: #fff;
    border: 1px solid #D8E0EE;
    border-radius: 14px;
    padding: 0 16px;
    height: 42px;
    max-width: 470px;
    transition: border-color 0.15s, box-shadow 0.15s;
}
.lk-topbar-search:focus-within {
    border-color: var(--lk-blue);
    box-shadow: 0 0 0 3px rgba(26,140,201,0.12);
    background: #fff;
}

.lk-topbar-search-icon { color: #94A3B8; font-size: 13px; flex-shrink: 0; }

.lk-topbar-search-input {
    flex: 1;
    border: none !important;
    background: transparent !important;
    outline: none !important;
    font-size: 13px;
    color: var(--lk-dark);
    padding: 0 !important;
    box-shadow: none !important;
}
.lk-topbar-search-input::placeholder { color: #94A3B8; }

.lk-topbar-kbd {
    font-size: 11px;
    color: #94A3B8;
    white-space: nowrap;
    flex-shrink: 0;
    font-family: monospace;
}

/* Partie droite */
.lk-topbar-right {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-left: auto;
    flex-shrink: 0;
}

/* Cloche */
.lk-topbar-bell {
    position: relative;
    width: 36px;
    height: 36px;
    border-radius: 50%;
    background: #F8FAFC;
    border: 1px solid #E2E8F0;
    display: flex !important;
    align-items: center;
    justify-content: center;
    color: var(--lk-gray) !important;
    text-decoration: none !important;
    transition: background 0.15s, color 0.15s;
    font-size: 15px;
}
.lk-topbar-bell:hover { background: #EBF4FB; color: var(--lk-blue) !important; }

.lk-topbar-badge {
    position: absolute;
    top: -4px;
    right: -4px;
    min-width: 16px;
    height: 16px;
    background: #E53E3E;
    color: #fff;
    font-size: 9px;
    font-weight: 700;
    border-radius: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0 4px;
    border: 1.5px solid #fff;
}

/* Séparateur */
.lk-topbar-sep {
    width: 1px;
    height: 28px;
    background: #E2E8F0;
    flex-shrink: 0;
}

/* Compte utilisateur */
.lk-topbar-user {
    display: flex !important;
    align-items: center;
    gap: 9px;
    padding: 4px 12px 4px 4px;
    border-radius: 14px;
    border: 1px solid #E2E8F0;
    background: #fff;
    cursor: pointer;
    text-decoration: none !important;
    transition: border-color 0.15s, box-shadow 0.15s;
}
.lk-topbar-user:hover {
    border-color: var(--lk-blue);
    box-shadow: 0 0 0 3px rgba(26,140,201,0.08);
}

.lk-topbar-avatar {
    width: 30px;
    height: 30px;
    border-radius: 50%;
    background: #F5C000;
    color: #1a202c;
    font-size: 11px;
    font-weight: 800;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    letter-spacing: -0.5px;
    text-transform: uppercase;
    line-height: 1;
}

.lk-topbar-info { line-height: 1.2; }

.lk-topbar-name {
    font-size: 12px;
    font-weight: 700;
    color: var(--lk-dark);
    white-space: nowrap;
}

.lk-topbar-id {
    font-size: 10px;
    color: var(--lk-gray);
}

.lk-topbar-caret {
    font-size: 10px;
    color: #94A3B8;
    margin-left: 2px;
}

/* ---- Carte "Besoin d'aide?" dans sidebar ---- */
.lk-sidebar-support {
    margin: 12px 12px 0;
    background: linear-gradient(135deg, #FFF8E7 0%, #FFF3D0 100%);
    border: 1px solid #FCDFA0;
    border-radius: 12px;
    padding: 14px;
    text-align: center;
}

.lk-sidebar-support-icon {
    width: 38px;
    height: 38px;
    border-radius: 50%;
    background: #F5C000;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto 8px;
    font-size: 16px;
    color: #1a202c;
}

.lk-sidebar-support-title {
    font-size: 13px;
    font-weight: 700;
    color: var(--lk-dark);
    margin-bottom: 3px;
}

.lk-sidebar-support-sub {
    font-size: 11px;
    color: var(--lk-gray);
    margin-bottom: 10px;
}

.lk-sidebar-support-btn {
    display: block !important;
    background: #F5C000 !important;
    color: #1a202c !important;
    font-size: 12px !important;
    font-weight: 700 !important;
    padding: 8px 12px !important;
    border-radius: 20px !important;
    text-decoration: none !important;
    margin-bottom: 10px !important;
    transition: background 0.15s !important;
}
.lk-sidebar-support-btn:hover { background: #e0ac00 !important; }

.lk-sidebar-support-phone,
.lk-sidebar-support-email {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 5px !important;
    font-size: 11px !important;
    color: var(--lk-gray) !important;
    text-decoration: none !important;
    padding: 2px 0 !important;
    transition: color 0.15s !important;
}
.lk-sidebar-support-phone:hover,
.lk-sidebar-support-email:hover { color: var(--lk-blue) !important; }

/* ---- Responsive dashboard ---- */
@media (max-width: 1100px) {
    .lk-stat-grid { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 768px) {
    .lk-stat-grid { grid-template-columns: repeat(2, 1fr); gap: 10px; }
    .lk-dash-row { grid-template-columns: 1fr; }
    .lk-dash-welcome { flex-direction: column; align-items: flex-start; }
    .lk-dash-welcome-title { font-size: 1.3rem !important; }
    .lk-status-bar { flex-direction: column; align-items: flex-start; }
    .lk-status-items { gap: 16px; }
}

@media (max-width: 480px) {
    .lk-stat-grid { grid-template-columns: 1fr; }
}


.lk-page-header { margin-bottom: 14px; }
.lk-page-header-inner { padding: 12px 16px; }
.lk-page-title { font-size: 1rem !important; }
body.lk-client-area .page-wrapper { padding-top: 0 !important; }
body.lk-client-area .main-content { padding-top: 0 !important; }
body.lk-client-area #main-body > .container,
body.lk-client-area #main-body .container:first-child { padding-top: 0 !important; }
.lk-stat-card--blue { background: #EEF4FF; }
.lk-stat-card--green { background: #ECFBF3; }
.lk-stat-card--orange { background: #FFF5E9; }
.lk-stat-card--purple { background: #F5F0FF; }
.lk-widget-title i,
.lk-stat-icon i,
.lk-qa-icon i,
.lk-status-shield i,
.lk-inv-pay-btn i,
.lk-dash-btn i { line-height: 1; }
.lk-topbar-avatar { border-radius: 10px; }
.lk-topbar-bell { border-radius: 12px; }
.lk-sidebar-section + .lk-sidebar-section { margin-top: 6px; }
.lk-sidebar-nav { padding: 8px 0 2px; }
.lk-sidebar-support { margin: 6px 14px 0; border-radius: 18px; }
.lk-quick-action, .lk-svc-row, .lk-ticket-row { min-height: 58px; }


.lk-widget-body--billing {
    padding: 18px 20px 16px;
}

.lk-billing-hero {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 16px;
    margin-bottom: 16px;
    flex-wrap: wrap;
}

.lk-billing-label {
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.6px;
    text-transform: uppercase;
    color: #94A3B8;
    margin-bottom: 4px;
}

.lk-billing-amount {
    font-size: 1.6rem;
    font-weight: 800;
    color: var(--lk-dark);
    line-height: 1;
    margin-bottom: 6px;
}

.lk-billing-sub {
    font-size: 12px;
    color: var(--lk-gray);
}

.lk-billing-actions {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
    justify-content: flex-end;
}

.lk-billing-links {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 10px;
}

.lk-billing-link {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 12px 14px;
    border: 1px solid var(--lk-border);
    border-radius: 14px;
    background: #F8FAFC;
    color: var(--lk-dark) !important;
    text-decoration: none !important;
    font-size: 12px;
    font-weight: 600;
}

.lk-billing-link i {
    color: var(--lk-blue);
    font-size: 15px;
}

.lk-billing-link:hover {
    border-color: #C7D6EA;
    background: #fff;
}

@media (max-width: 768px) {
    .lk-billing-links {
        grid-template-columns: 1fr;
    }
    .lk-billing-actions {
        width: 100%;
        justify-content: stretch;
    }
    .lk-billing-actions .lk-dash-btn {
        width: 100%;
        justify-content: center;
    }
}


/* ==== LIKUID HOME DIRECTION ==== */
.lk-home-shell {
    display: flex;
    flex-direction: column;
    gap: 18px;
    padding-bottom: 24px;
}

.lk-home-section {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.lk-home-section-title {
    font-size: 16px;
    font-weight: 800;
    color: #162033;
    letter-spacing: -0.01em;
}

.lk-home-hero {
    display: grid;
    grid-template-columns: minmax(0, 1.8fr) minmax(280px, 0.8fr);
    gap: 14px;
    padding: 22px 24px;
    border-radius: 24px;
    background: linear-gradient(135deg, #182057 0%, #26307b 55%, #3c4bbb 100%);
    color: #fff;
    box-shadow: 0 16px 34px rgba(35, 43, 112, 0.16);
}

.lk-home-hero-copy {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    justify-content: center;
    gap: 12px;
    min-width: 0;
}

.lk-home-hero-badge {
    display: inline-flex;
    align-items: center;
    padding: 6px 12px;
    border-radius: 999px;
    background: #59e6ab;
    color: #0f2d1d;
    font-size: 11px;
    font-weight: 800;
    letter-spacing: 0.08em;
}

.lk-home-hero-title {
    margin: 0;
    max-width: 720px;
    font-size: 2.15rem;
    line-height: 1.1;
    font-weight: 800;
    color: #ffffff;
    letter-spacing: -0.02em;
    text-shadow: 0 1px 0 rgba(10, 14, 40, 0.18);
}

.lk-home-hero-sub {
    margin: 0;
    max-width: 620px;
    font-size: 15px;
    line-height: 1.6;
    color: #edf2ff;
}

.lk-home-hero-actions {
    display: flex;
    gap: 10px;
    flex-wrap: wrap;
}

.lk-home-hero-panel {
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 12px;
    padding: 16px;
    border-radius: 22px;
    background: linear-gradient(180deg, rgba(255,255,255,0.14) 0%, rgba(255,255,255,0.08) 100%);
    border: 1px solid rgba(196, 205, 255, 0.3);
    box-shadow: inset 0 1px 0 rgba(255,255,255,0.08);
}

.lk-home-hero-panel-title {
    font-size: 12px;
    font-weight: 700;
    color: #eef2ff;
    text-transform: uppercase;
    letter-spacing: 0.08em;
}

.lk-home-hero-panel-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 8px;
}

.lk-home-mini-stat {
    padding: 12px;
    border-radius: 16px;
    background: rgba(16, 21, 62, 0.32);
    border: 1px solid rgba(176, 187, 255, 0.12);
}

.lk-home-mini-stat-label {
    display: block;
    margin-bottom: 6px;
    font-size: 10px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: #cfd7ff;
}

.lk-home-mini-stat strong {
    font-size: 1.25rem;
    font-weight: 800;
    color: #fff;
}

.lk-home-hero-note {
    font-size: 12px;
    line-height: 1.5;
    color: #eef2ff;
}

.lk-home-alert {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 18px 20px;
    border-radius: 18px;
    border: 1px solid #f0d4bf;
    background: #fffdfa;
    text-decoration: none !important;
    box-shadow: 0 6px 18px rgba(15, 23, 42, 0.04);
}

.lk-home-alert--info {
    background: #f8fbff;
    border-color: #d7e6fb;
}

.lk-home-alert--success {
    background: #f2fcf5;
    border-color: #caebd4;
}

.lk-home-alert-icon {
    width: 44px;
    height: 44px;
    border-radius: 14px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    background: #fff0e6;
    color: #e56f19;
    font-size: 18px;
}

.lk-home-alert--info .lk-home-alert-icon {
    background: #eaf3ff;
    color: #2368d4;
}

.lk-home-alert--success .lk-home-alert-icon {
    background: #daf4e4;
    color: #169c61;
}

.lk-home-alert-copy {
    flex: 1;
    min-width: 0;
}

.lk-home-alert-title {
    font-size: 15px;
    font-weight: 800;
    color: #162033;
    margin-bottom: 4px;
}

.lk-home-alert-sub {
    font-size: 13px;
    line-height: 1.6;
    color: #627089;
}

.lk-home-alert-cta {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 10px 14px;
    border-radius: 14px;
    background: #eff4ff;
    color: #315fe1;
    font-size: 12px;
    font-weight: 700;
    white-space: nowrap;
}

.lk-stat-grid--feature {
    gap: 14px;
}

.lk-stat-card--feature {
    min-height: 158px;
    padding: 22px;
    border-radius: 22px;
    box-shadow: 0 8px 20px rgba(15, 23, 42, 0.04);
}

.lk-stat-card--feature .lk-stat-icon {
    width: 52px;
    height: 52px;
    border-radius: 16px;
    font-size: 18px;
}

.lk-stat-card--feature .lk-stat-label {
    font-size: 12px;
    letter-spacing: 0.1em;
}

.lk-stat-card--feature .lk-stat-value {
    font-size: 1.9rem;
    line-height: 1.15;
}

.lk-stat-card--feature .lk-stat-link {
    margin-top: auto;
    font-size: 13px;
    font-weight: 700;
}

.lk-dash-row--wide-left {
    grid-template-columns: minmax(0, 1.45fr) minmax(320px, 0.95fr);
    gap: 16px;
}

.lk-dash-row--balanced {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    gap: 16px;
}

.lk-dash-widget {
    border-radius: 22px;
    box-shadow: 0 10px 24px rgba(15, 23, 42, 0.05);
}

.lk-widget-header {
    padding: 18px 22px;
}

.lk-widget-title {
    font-size: 15px;
    gap: 8px;
}

.lk-widget-title-icon {
    font-size: 16px;
}

.lk-widget-viewall {
    font-size: 12px;
}

.lk-widget-body--services,
.lk-widget-body--support {
    padding-top: 8px;
    padding-bottom: 14px;
}

.lk-svc-row--feature,
.lk-ticket-row--feature {
    min-height: 78px;
    padding: 16px 0;
}

.lk-svc-row--feature:hover {
    margin: 0 -22px;
    padding: 16px 22px;
}

.lk-ticket-row--feature:hover {
    margin: 0 -22px;
    padding: 16px 22px;
}

.lk-svc-name,
.lk-ticket-subj,
.lk-qa-title {
    font-size: 14px;
    font-weight: 700;
}

.lk-svc-domain,
.lk-ticket-dept,
.lk-qa-sub,
.lk-widget-empty small,
.lk-billing-sub,
.lk-status-sub,
.lk-home-alert-sub {
    font-size: 12.5px;
}

.lk-widget-empty--feature {
    padding: 36px 18px;
}

.lk-widget-body--billing-feature {
    padding: 22px;
}

.lk-billing-hero--feature {
    margin-bottom: 18px;
}

.lk-billing-actions--stack {
    align-items: stretch;
}

.lk-billing-actions--stack .lk-dash-btn {
    justify-content: center;
}

.lk-billing-links--feature {
    grid-template-columns: 1fr;
}

.lk-billing-link {
    min-height: 52px;
    border-radius: 16px;
}

.lk-quick-action--feature {
    min-height: 82px;
    padding: 16px 18px;
}

.lk-qa-icon--green {
    background: #ecfbf3;
    color: #159a63;
}

.lk-status-bar--feature {
    margin-bottom: 6px;
    border-radius: 24px;
    padding: 20px 24px;
}

@media (max-width: 1200px) {
    .lk-home-hero {
        grid-template-columns: 1fr;
    }

    .lk-dash-row--wide-left,
    .lk-dash-row--balanced {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 768px) {
    .lk-home-shell {
        gap: 14px;
    }

    .lk-home-hero {
        padding: 20px;
        border-radius: 24px;
    }

    .lk-home-hero-title {
        font-size: 1.7rem;
    }

    .lk-home-hero-actions,
    .lk-home-alert {
        flex-direction: column;
        align-items: flex-start;
    }

    .lk-home-alert-cta {
        width: 100%;
        justify-content: center;
    }

    .lk-home-hero-panel-grid,
    .lk-stat-grid--feature {
        grid-template-columns: 1fr;
    }
}


.lk-stat-meta {
    font-size: 12px;
    color: var(--lk-gray);
    margin-top: 2px;
    margin-bottom: 8px;
    font-weight: 600;
}

.lk-widget-body--services-summary {
    padding: 20px 22px 22px;
}

.lk-services-summary {
    display: flex;
    flex-direction: column;
    gap: 18px;
}

.lk-services-summary-head {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 16px;
    flex-wrap: wrap;
}

.lk-services-summary-label {
    font-size: 11px;
    font-weight: 800;
    letter-spacing: 0.08em;
    color: #94A3B8;
    margin-bottom: 6px;
}

.lk-services-summary-value {
    font-size: 2rem;
    line-height: 1;
    font-weight: 800;
    color: var(--lk-dark);
    margin-bottom: 8px;
}

.lk-services-summary-sub {
    max-width: 520px;
    font-size: 13px;
    line-height: 1.6;
    color: var(--lk-gray);
}

.lk-services-summary-links {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 10px;
}

.lk-dash-row--balanced {
    grid-template-columns: minmax(0, 1.2fr) minmax(320px, 0.8fr);
}

.lk-widget-body--quick-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 12px;
    padding: 18px;
}

.lk-quick-action--card {
    min-height: 110px;
    border: 1px solid var(--lk-border);
    border-radius: 18px;
    padding: 16px;
    background: #F8FAFC;
}

.lk-quick-action--card:hover {
    background: #fff;
    border-color: #C7D6EA;
}

.lk-quick-action--card:last-child {
    border-bottom: 1px solid var(--lk-border);
}

@media (max-width: 1200px) {
    .lk-services-summary-links,
    .lk-widget-body--quick-grid,
    .lk-dash-row--balanced {
        grid-template-columns: 1fr;
    }
}


.lk-widget-body--services-native {
    padding-top: 8px;
}

.lk-native-service-list {
    display: flex;
    flex-direction: column;
}

.lk-native-service-item {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 16px 0;
    border-bottom: 1px solid var(--lk-border);
    text-decoration: none !important;
    color: inherit !important;
}

.lk-native-service-dot {
    width: 10px;
    height: 10px;
    border-radius: 50%;
    background: #17b26a;
    flex-shrink: 0;
}

.lk-native-service-item:last-child {
    border-bottom: none;
}

.lk-native-service-item:hover {
    background: #f8fbff;
    margin: 0 -22px;
    padding: 16px 22px;
}

.lk-native-service-main {
    flex: 1;
    min-width: 0;
}

.lk-native-service-side {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-left: auto;
    flex-shrink: 0;
}


.lk-native-service-badge {
    flex-shrink: 0;
    padding: 5px 10px;
    border-radius: 999px;
    background: #dff7e8;
    color: #138a55;
    font-size: 11px;
    font-weight: 700;
    white-space: nowrap;
    align-self: flex-start;
}

.lk-native-service-arrow {
    color: #94A3B8;
    font-size: 13px;
    flex-shrink: 0;
}

.lk-native-service-item:hover .lk-native-service-arrow {
    color: var(--lk-blue);
}

@media (max-width: 768px) {
    .lk-native-service-item {
        align-items: flex-start;
    }

    .lk-native-service-side {
        flex-direction: column;
        align-items: flex-end;
    }
}

.lk-native-service-bodyhtml {
    padding: 8px 0;
}


.lk-native-service-label {
    min-width: 0;
    color: var(--lk-dark);
}

.lk-native-service-label--rich {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.lk-native-service-label--rich > * {
    min-width: 0;
}

.lk-native-service-label--rich > strong,
.lk-native-service-label--rich > b,
.lk-native-service-label--rich > span:first-child,
.lk-native-service-label--rich > div:first-child {
    font-size: 14px;
    line-height: 1.35;
    font-weight: 700;
    color: var(--lk-dark);
}

.lk-native-service-label--rich .text-domain {
    display: block;
    font-size: 13px;
    line-height: 1.5;
    color: var(--lk-blue);
    font-weight: 700;
}

.lk-native-service-label--rich small,
.lk-native-service-label--rich .small,
.lk-native-service-label--rich > span:not(:first-child):not(.text-domain),
.lk-native-service-label--rich > div:not(:first-child):not(.text-domain) {
    font-size: 12px;
    line-height: 1.55;
    color: var(--lk-gray);
    font-weight: 500;
}

.lk-native-service-label--rich br {
    display: block;
    content: "";
    margin-top: 2px;
}


.lk-native-service-card {
    border-bottom: 1px solid var(--lk-border) !important;
}

.lk-native-service-card .label-success {
    background: #e6f9f0 !important;
    color: #1a9e5c !important;
}

.lk-native-service-card .text-domain {
    font-size: 13px !important;
    color: var(--lk-blue) !important;
    font-weight: 700 !important;
}

.lk-native-service-extra {
    font-size: 12px;
    color: var(--lk-gray);
    line-height: 1.55;
}


.lk-native-service-toprow {
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.lk-native-service-name {
    margin-top: 2px;
}

.lk-native-service-name .font-weight-bold {
    display: block;
}

.lk-native-service-name .text-domain {
    display: block;
    margin-top: 4px;
}

.lk-native-service-extra {
    display: block;
    margin-top: 4px;
    font-size: 12px;
    color: var(--lk-gray);
    line-height: 1.55;
}


.lk-native-service-row {
    display: flex;
    align-items: center;
    gap: 16px;
    width: 100%;
}

.lk-native-service-icon {
    width: 44px;
    height: 44px;
    border-radius: 14px;
    background: #eef4ff;
    color: var(--lk-blue);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    font-size: 16px;
}

.lk-native-service-maincol {
    flex: 1;
    min-width: 0;
}

.lk-native-service-headline {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
}

.lk-native-service-plan {
    font-size: 15px;
    font-weight: 700;
    color: var(--lk-dark);
    line-height: 1.35;
}

.lk-native-service-status {
    display: inline-flex;
    align-items: center;
    padding: 5px 10px;
    border-radius: 999px;
    background: #dff7e8;
    color: #138a55;
    font-size: 11px;
    font-weight: 700;
}

.lk-native-service-domainline {
    margin-top: 4px;
    font-size: 13px;
    color: var(--lk-blue);
    font-weight: 700;
    line-height: 1.45;
}

.lk-native-service-metaline {
    margin-top: 3px;
    font-size: 12px;
    color: var(--lk-gray);
    line-height: 1.5;
}

.lk-native-service-actionsline {
    margin-top: 5px;
    font-size: 12px;
    color: var(--lk-blue);
    line-height: 1.5;
    font-weight: 600;
}

.lk-native-service-cta {
    flex-shrink: 0;
}

.lk-native-service-card .div-service-buttons {
    margin-top: 0 !important;
}

@media (max-width: 900px) {
    .lk-native-service-row {
        align-items: flex-start;
        flex-wrap: wrap;
    }

    .lk-native-service-cta {
        width: 100%;
    }
}


.lk-native-service-card {
    padding: 10px 14px !important;
    gap: 4px !important;
}

.lk-native-service-row {
    gap: 12px;
}

.lk-native-service-icon {
    width: 38px;
    height: 38px;
    border-radius: 12px;
    font-size: 14px;
}

.lk-native-service-plan {
    font-size: 14px;
}

.lk-native-service-status {
    padding: 4px 10px;
    font-size: 11px;
}

.lk-native-service-domainline {
    margin-top: 2px;
    font-size: 12px;
}

.lk-native-service-metaline {
    margin-top: 2px;
    font-size: 11px;
}

.lk-native-service-actionsline {
    margin-top: 3px;
    font-size: 11px;
}

.lk-native-service-manage {
    padding: 8px 16px !important;
    border-radius: 999px !important;
    font-size: 12px !important;
    font-weight: 700 !important;
    box-shadow: none !important;
    white-space: nowrap;
}

.lk-native-service-card .div-service-buttons .btn-view-details,
.lk-native-service-card .btn-view-details {
    background: #ffc61a !important;
    color: #1a202c !important;
    border: none !important;
}

.lk-native-service-card .btn-view-details:hover,
.lk-native-service-manage:hover {
    background: #e8b100 !important;
    color: #1a202c !important;
}


.lk-widget-body--services-native {
    padding: 6px 0 0;
}

.lk-native-service-card {
    padding: 12px 18px !important;
    border-bottom: 1px solid #e7edf6 !important;
    background: #fff !important;
}

.lk-native-service-card:hover {
    background: #fbfdff !important;
}

.lk-native-service-row {
    display: grid;
    grid-template-columns: 40px minmax(0, 1fr) auto;
    align-items: center;
    gap: 14px;
}

.lk-native-service-icon {
    width: 36px;
    height: 36px;
    border-radius: 12px;
    background: #eef4ff;
    color: var(--lk-blue);
    font-size: 14px;
}

.lk-native-service-headline {
    gap: 8px;
}

.lk-native-service-plan {
    font-size: 15px;
    font-weight: 700;
    color: #122033;
}

.lk-native-service-domainline {
    margin-top: 3px;
    font-size: 13px;
    color: var(--lk-blue);
    font-weight: 500;
}

.lk-native-service-metaline {
    margin-top: 2px;
    font-size: 12px;
    color: #8a98ad;
    line-height: 1.45;
}

.lk-native-service-status {
    order: 2;
    padding: 4px 11px;
    border-radius: 999px;
    background: #dff5d7;
    color: #4a9d2f;
    font-size: 11px;
    font-weight: 700;
}

.lk-native-service-cta {
    display: flex;
    align-items: center;
    gap: 10px;
}

.lk-native-service-manage {
    min-width: 150px;
    padding: 9px 18px !important;
    border-radius: 999px !important;
    background: #ffc61a !important;
    color: #151515 !important;
    border: none !important;
    font-size: 12px !important;
    font-weight: 700 !important;
}

.lk-native-service-manage:hover {
    background: #e6b315 !important;
    color: #151515 !important;
}

.lk-native-service-card .btn-view-details {
    border: none !important;
}

@media (max-width: 980px) {
    .lk-native-service-row {
        grid-template-columns: 40px minmax(0, 1fr);
    }

    .lk-native-service-cta {
        grid-column: 2;
        margin-top: 10px;
    }
}


/* ============================================================
   DASHBOARD HOME ? Rationalisation client area
   ============================================================ */
.lk-home-shell {
    display: flex;
    flex-direction: column;
    gap: 14px;
}

.lk-home-section-title {
    font-size: 28px;
    line-height: 1.1;
    font-weight: 800;
    color: var(--lk-dark);
    margin: 0 0 4px;
    letter-spacing: -0.03em;
}

.lk-stat-grid--feature {
    gap: 12px;
}

.lk-stat-card--feature {
    min-height: 136px;
    padding: 18px;
    border-radius: 20px;
}

.lk-stat-card--feature .lk-stat-icon {
    width: 48px;
    height: 48px;
    border-radius: 14px;
}

.lk-stat-card--feature .lk-stat-label {
    font-size: 11px;
}

.lk-stat-card--feature .lk-stat-value {
    font-size: 1.75rem;
    margin-bottom: 4px;
}

.lk-stat-meta {
    margin-bottom: 6px;
}

.lk-dash-row--wide-left {
    grid-template-columns: minmax(0, 1.5fr) minmax(320px, 0.9fr);
    gap: 14px;
}

.lk-dash-row--balanced {
    grid-template-columns: minmax(0, 1fr) minmax(320px, 0.92fr);
    gap: 14px;
}

.lk-dash-widget {
    border-radius: 20px;
    box-shadow: 0 8px 20px rgba(15, 23, 42, 0.05);
}

.lk-widget-header {
    padding: 16px 20px;
}

.lk-widget-title {
    font-size: 14px;
}

.lk-widget-body--services,
.lk-widget-body--support {
    padding-top: 4px;
    padding-bottom: 10px;
}

.lk-widget-body--billing-feature {
    padding: 20px;
}

.lk-billing-hero {
    gap: 16px;
}

.lk-billing-amount {
    font-size: 1.8rem;
}

.lk-billing-actions--stack .lk-dash-btn {
    min-height: 42px;
}

.lk-billing-links--feature {
    gap: 10px;
}

.lk-billing-link {
    min-height: 48px;
    padding: 0 16px;
}

.lk-widget-body--quick-grid {
    padding: 16px;
    gap: 10px;
}

.lk-quick-action--card {
    min-height: 96px;
    border-radius: 16px;
    padding: 14px;
}

.lk-qa-title {
    font-size: 13px;
}

.lk-qa-sub {
    font-size: 12px;
    line-height: 1.45;
}

.lk-ticket-row--feature {
    min-height: 68px;
    padding: 14px 0;
}

.lk-widget-empty--feature {
    padding: 28px 18px;
}

.lk-status-bar--feature {
    border-radius: 20px;
    padding: 18px 22px;
    margin-bottom: 0;
}

@media (max-width: 1200px) {
    .lk-dash-row--wide-left,
    .lk-dash-row--balanced {
        grid-template-columns: 1fr;
    }
}


/* ============================================================
   CLIENT AREA HOME ? Prototype lPanel compare
   ============================================================ */
.lk-lpanel-home {
    display: flex;
    flex-direction: column;
    gap: 18px;
    padding-bottom: 24px;
}

.lk-lpanel-top,
.lk-lpanel-actions,
.lk-lpanel-library {
    background: #fff;
    border: 1px solid #e4ebf5;
    border-radius: 24px;
    box-shadow: 0 10px 24px rgba(15, 23, 42, 0.05);
}

.lk-lpanel-top {
    padding: 20px;
}

.lk-lpanel-heading h1,
.lk-lpanel-library-head h2 {
    margin: 0;
    font-size: 34px;
    line-height: 1.05;
    font-weight: 800;
    color: #1b254b;
    letter-spacing: -0.04em;
}

.lk-lpanel-heading p,
.lk-lpanel-library-head p {
    margin: 6px 0 0;
    color: #7f8aa8;
    font-size: 14px;
}

.lk-lpanel-stats {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 14px;
    margin-top: 18px;
}

.lk-lpanel-stat {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 68px;
    align-items: stretch;
    min-height: 108px;
    border-radius: 22px;
    overflow: hidden;
    text-decoration: none !important;
    border: 1px solid #edf1f7;
}

.lk-lpanel-stat-copy {
    padding: 18px 20px;
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.lk-lpanel-stat-label {
    font-size: 11px;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: #919cb5;
}

.lk-lpanel-stat strong {
    font-size: 2.15rem;
    font-weight: 800;
    line-height: 1;
    color: #1b254b;
}

.lk-lpanel-stat-sub {
    font-size: 13px;
    color: #7b86a3;
}

.lk-lpanel-stat-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 22px;
}

.lk-lpanel-stat--violet {
    background: linear-gradient(90deg, #ffffff 0%, #ffffff 76%, #efe8ff 76%, #e6ddff 100%);
}
.lk-lpanel-stat--violet .lk-lpanel-stat-icon { color: #6656ff; }
.lk-lpanel-stat--mint {
    background: linear-gradient(90deg, #ffffff 0%, #ffffff 76%, #e7fbf1 76%, #def8ec 100%);
}
.lk-lpanel-stat--mint .lk-lpanel-stat-icon { color: #1c9b6f; }
.lk-lpanel-stat--blue {
    background: linear-gradient(90deg, #ffffff 0%, #ffffff 76%, #e7f0ff 76%, #dbe8ff 100%);
}
.lk-lpanel-stat--blue .lk-lpanel-stat-icon { color: #2c6cf6; }

.lk-lpanel-actions {
    padding: 16px;
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 12px;
}

.lk-lpanel-action-card {
    border: 1px solid #e7edf7;
    border-radius: 18px;
    padding: 18px;
    text-decoration: none !important;
    color: inherit !important;
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.lk-lpanel-action-card:hover {
    background: #fbfcff;
    border-color: #d7e2f3;
}

.lk-lpanel-action-title {
    font-size: 18px;
    font-weight: 700;
    color: #1b254b;
}

.lk-lpanel-action-sub {
    font-size: 13px;
    line-height: 1.55;
    color: #7f8aa8;
    min-height: 42px;
}

.lk-lpanel-action-btn {
    margin-top: auto;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 42px;
    padding: 0 18px;
    border-radius: 14px;
    border: 1px solid #d8e0ee;
    color: #55627f;
    font-weight: 700;
    background: #fff;
}

.lk-lpanel-action-btn--solid {
    background: #5e54ff;
    border-color: #5e54ff;
    color: #fff;
}

.lk-lpanel-library {
    padding: 18px;
}

.lk-lpanel-library-head {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 16px;
    margin-bottom: 18px;
}

.lk-lpanel-tabs {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 6px;
    border-radius: 16px;
    background: #f5f7fc;
    border: 1px solid #e4eaf4;
}

.lk-lpanel-tab {
    border: 0;
    background: transparent;
    color: #7d88a6;
    font-size: 13px;
    font-weight: 700;
    border-radius: 12px;
    padding: 10px 14px;
}

.lk-lpanel-tab.is-active {
    background: #fff;
    color: #1b254b;
    box-shadow: 0 4px 10px rgba(15, 23, 42, 0.06);
}

.lk-lpanel-tab:not(.is-active):hover {
    background: rgba(255,255,255,0.65);
    color: #1b254b;
    cursor: pointer;
    transition: background .15s, color .15s;
}

.lk-lpanel-library-panel {
    display: none;
}

.lk-lpanel-library-panel.is-active {
    display: block;
}

.lk-lpanel-table-head,
.lk-lpanel-table-row {
    display: grid;
    align-items: center;
    gap: 14px;
}

.lk-lpanel-table-head--services,
.lk-lpanel-table-row--services {
    grid-template-columns: minmax(0, 1.4fr) minmax(160px, 1fr) 120px 110px;
}

.lk-lpanel-table-head--domains,
.lk-lpanel-table-row--domains {
    grid-template-columns: minmax(0, 1.5fr) minmax(160px, 1fr) 120px 110px;
}

.lk-lpanel-table-head {
    padding: 0 16px 12px;
    border-bottom: 1px solid #edf1f7;
    font-size: 11px;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: #94a0bd;
}

.lk-lpanel-table-body {
    display: flex;
    flex-direction: column;
}

.lk-lpanel-table-row {
    min-height: 76px;
    padding: 0 16px;
    border-bottom: 1px solid #edf1f7;
    transition: background .15s;
}

.lk-lpanel-table-row:hover {
    background: #faf9ff;
    cursor: pointer;
}

.lk-lpanel-table-row:last-child {
    border-bottom: 0;
}

.lk-lpanel-product-cell {
    display: flex;
    align-items: center;
    gap: 12px;
    min-width: 0;
}

.lk-lpanel-row-icon {
    width: 42px;
    height: 42px;
    border-radius: 14px;
    background: #eff4ff;
    color: #4f61ff;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.lk-lpanel-primary {
    font-size: 14px;
    font-weight: 700;
    color: #1b254b;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.lk-lpanel-secondary {
    font-size: 12px;
    color: #8792ac;
    margin-top: 3px;
}

.lk-lpanel-preview-tag {
    display: inline-block;
    vertical-align: middle;
    margin-left: 8px;
    padding: 2px 10px;
    border-radius: 999px;
    font-size: 11px;
    font-weight: 700;
    background: #f0f4ff;
    color: #6272a8;
    letter-spacing: 0.04em;
    text-transform: uppercase;
}

.lk-lpanel-view-all {
    padding: 12px 20px;
    border-top: 1px solid #eef2f8;
    text-align: right;
}

.lk-lpanel-view-all-link {
    font-size: 13px;
    font-weight: 600;
    color: #6656ff;
    text-decoration: none !important;
    display: inline-flex;
    align-items: center;
    gap: 5px;
}

.lk-lpanel-view-all-link:hover { opacity: 0.75; }
.lk-lpanel-view-all-link i { font-size: 13px; }

.lk-svc-type-badge {
    display: inline-block;
    margin-top: 4px;
    padding: 2px 8px;
    border-radius: 999px;
    font-size: 11px;
    font-weight: 700;
    background: #eef2ff;
    color: #4f5fa8;
    letter-spacing: 0.02em;
}

.lk-lpanel-domain-cell {
    font-size: 13px;
    color: #52607d;
}

.lk-lpanel-status {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 30px;
    padding: 0 12px;
    border-radius: 999px;
    font-size: 12px;
    font-weight: 700;
}

.lk-lpanel-status.is-success {
    background: #e8f9ef;
    color: #15935d;
}

.lk-lpanel-status.is-warning {
    background: #fff3de;
    color: #c57a16;
}

.lk-lpanel-status.is-danger {
    background: #fdecea;
    color: #c0392b;
}

.lk-lpanel-status.is-muted {
    background: #eef2f8;
    color: #7b86a3;
}

.lk-lpanel-row-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 38px;
    padding: 0 16px;
    border-radius: 12px;
    background: #f0eeff;
    color: #6656ff !important;
    -webkit-text-fill-color: #6656ff;
    text-decoration: none !important;
    font-size: 12px;
    font-weight: 700;
    border: 1px solid #d8d2ff;
}

.lk-lpanel-row-btn:hover {
    background: #6656ff;
    border-color: #6656ff;
}

.lk-lpanel-empty {
    padding: 22px 16px 10px;
    color: #7f8aa8;
    display: flex;
    flex-direction: column;
    gap: 12px;
    align-items: flex-start;
}

.lk-lpanel-server-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 12px;
}

.lk-lpanel-server-card {
    min-height: 180px;
    border: 1px solid #e7edf7;
    border-radius: 18px;
    padding: 18px;
    text-decoration: none !important;
    color: inherit !important;
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.lk-lpanel-server-card:hover {
    background: #fbfcff;
}

.lk-lpanel-server-title {
    font-size: 18px;
    font-weight: 700;
    color: #1b254b;
}

.lk-lpanel-server-sub {
    font-size: 13px;
    line-height: 1.55;
    color: #7f8aa8;
}

.lk-lpanel-server-card .lk-lpanel-row-btn {
    margin-top: auto;
    width: fit-content;
}

@media (max-width: 1180px) {
    .lk-lpanel-stats,
    .lk-lpanel-actions,
    .lk-lpanel-server-grid {
        grid-template-columns: 1fr;
    }

    .lk-lpanel-library-head {
        flex-direction: column;
        align-items: flex-start;
    }
}

@media (max-width: 920px) {
    .lk-lpanel-table-head {
        display: none;
    }

    .lk-lpanel-table-row--services,
    .lk-lpanel-table-row--domains {
        grid-template-columns: 1fr;
        gap: 8px;
        padding: 16px;
    }

    .lk-lpanel-action-cell {
        padding-top: 4px;
    }
}


/* ============================================================
   CLIENT AREA CHROME ? lPanel-like navigation alignment
   ============================================================ */
.lk-sidebar {
    background: #fbfcff !important;
    border-right: 1px solid #e6ebf4 !important;
    box-shadow: 8px 0 30px rgba(31, 41, 55, 0.04) !important;
}

.lk-sidebar-brand {
    padding: 22px 20px 18px;
    border-bottom: 1px solid #edf1f7;
}

.lk-sidebar-logo-img {
    height: 32px;
    max-width: 156px;
}

.lk-sidebar-home {
    margin: 12px 12px 2px !important;
    padding: 12px 14px !important;
    border: 0 !important;
    border-radius: 14px !important;
    color: #8a94ad !important;
    font-weight: 600 !important;
}

.lk-sidebar-home i {
    color: #9aa5c2 !important;
}

.lk-sidebar-home:hover,
.lk-sidebar-home.active {
    background: #f1edff !important;
    color: #5146f0 !important;
}

.lk-sidebar-home:hover i,
.lk-sidebar-home.active i {
    color: #5146f0 !important;
}

.lk-sidebar-nav {
    padding: 10px 0 4px;
}

.lk-sidebar-section {
    margin-bottom: 8px;
}

.lk-sidebar-label {
    padding: 12px 22px 6px;
    font-size: 10px;
    letter-spacing: 0.12em;
    color: #a0abc3;
}

.lk-sidebar-link {
    margin: 0 12px 2px !important;
    padding: 11px 14px !important;
    border-radius: 14px !important;
    color: #7d88a6 !important;
    font-weight: 600 !important;
}

.lk-sidebar-link i {
    color: #a1abc4 !important;
}

.lk-sidebar-link:hover {
    background: #f5f7fd !important;
    color: #3e4b68 !important;
}

.lk-sidebar-link:hover i {
    color: #667392 !important;
}

.lk-sidebar-link.active {
    margin: 0 12px 2px !important;
    background: #f1edff !important;
    color: #5146f0 !important;
    font-weight: 700 !important;
    box-shadow: inset 3px 0 0 #5e54ff;
}

.lk-sidebar-link.active i {
    color: #5146f0 !important;
}

.lk-sidebar-badge {
    background: #5e54ff;
    border-radius: 999px;
    min-width: 18px;
    height: 18px;
    padding: 0 6px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

.lk-sidebar-support {
    margin: 10px 12px 0;
    background: linear-gradient(180deg, #ffffff 0%, #fafbff 100%);
    border: 1px solid #e7ecf6;
    border-radius: 18px;
    padding: 16px;
    text-align: left;
}

.lk-sidebar-support-icon {
    width: 42px;
    height: 42px;
    margin: 0 0 10px;
    border-radius: 14px;
    background: #efeaff;
    color: #5e54ff;
}

.lk-sidebar-support-title {
    font-size: 14px;
}

.lk-sidebar-support-sub {
    font-size: 12px;
    line-height: 1.5;
    margin-bottom: 12px;
}

.lk-sidebar-support-btn {
    border-radius: 14px !important;
    background: #5e54ff !important;
    color: #fff !important;
    text-align: center;
}

.lk-sidebar-support-btn:hover {
    background: #4e43f0 !important;
}

.lk-sidebar-support-phone,
.lk-sidebar-support-email {
    justify-content: flex-start !important;
    font-size: 11px !important;
}

.lk-sidebar-footer {
    padding: 12px;
    border-top: 1px solid #edf1f7;
}

.lk-sidebar-logout {
    border-radius: 14px !important;
    color: #8a94ad !important;
}

.lk-sidebar-logout:hover {
    background: #f5f7fd !important;
    color: #5146f0 !important;
}

#lkTopbar {
    background: rgba(251,252,255,0.95) !important;
    border-bottom: 1px solid #e8edf6 !important;
}

.lk-topbar-search {
    background: #fff;
    border-color: #e1e8f3;
    border-radius: 16px;
    box-shadow: 0 2px 8px rgba(15, 23, 42, 0.02);
}

.lk-topbar-search:focus-within {
    border-color: #5e54ff;
    box-shadow: 0 0 0 3px rgba(94,84,255,0.08);
}

.lk-topbar-bell {
    background: #fff;
    border-color: #e1e8f3;
    color: #8d98b1 !important;
}

.lk-topbar-bell:hover {
    background: #f1edff;
    color: #5146f0 !important;
}

.lk-topbar-badge {
    background: #ff5a7a;
}

.lk-topbar-user {
    border-color: #e1e8f3;
    border-radius: 16px;
}

.lk-topbar-user:hover {
    border-color: #d2daf0;
    box-shadow: 0 0 0 3px rgba(94,84,255,0.05);
}

.lk-topbar-avatar {
    background: #5e54ff;
    color: #fff;
}




/* ============================================================
   CLIENT AREA CHROME ? Menu typography and contrast tuning
   ============================================================ */
#lkSidebar .lk-sidebar-home,
#lkSidebar .lk-sidebar-link,
#lkSidebar .lk-sidebar-label,
#lkTopbar .lk-topbar-search-input,
#lkTopbar .lk-topbar-name,
#lkTopbar .lk-topbar-id,
#lkSidebar .lk-sidebar-support-title,
#lkSidebar .lk-sidebar-support-sub,
#lkSidebar .lk-sidebar-support-btn,
#lkSidebar .lk-sidebar-support-phone,
#lkSidebar .lk-sidebar-support-email {
    font-family: 'DM Sans', sans-serif !important;
}

#lkSidebar .lk-sidebar-home,
#lkSidebar .lk-sidebar-link {
    color: #68748f !important;
    font-size: 13px !important;
    font-weight: 600 !important;
}

#lkSidebar .lk-sidebar-home i,
#lkSidebar .lk-sidebar-link i {
    color: #9ca7bf !important;
}

#lkSidebar .lk-sidebar-home:hover,
#lkSidebar .lk-sidebar-link:hover {
    background: #f4f6fb !important;
    color: #37425f !important;
}

#lkSidebar .lk-sidebar-home:hover i,
#lkSidebar .lk-sidebar-link:hover i {
    color: #66728f !important;
}

#lkSidebar .lk-sidebar-home.active,
#lkSidebar .lk-sidebar-link.active,
#lkSidebar a.lk-sidebar-home.active,
#lkSidebar a.lk-sidebar-link.active {
    background: linear-gradient(90deg, #5d53ff 0%, #6d64ff 100%) !important;
    color: #ffffff !important;
    font-weight: 700 !important;
    box-shadow: 0 10px 22px rgba(93, 83, 255, 0.22) !important;
    border-radius: 14px !important;
}

#lkSidebar .lk-sidebar-home.active i,
#lkSidebar .lk-sidebar-link.active i,
#lkSidebar a.lk-sidebar-home.active i,
#lkSidebar a.lk-sidebar-link.active i {
    color: #ffffff !important;
}

#lkSidebar .lk-sidebar-home.active .lk-sidebar-badge,
#lkSidebar .lk-sidebar-link.active .lk-sidebar-badge {
    background: rgba(255,255,255,0.18) !important;
    color: #ffffff !important;
    border: 1px solid rgba(255,255,255,0.18) !important;
}

#lkSidebar .lk-sidebar-label {
    color: #9da8c2 !important;
    font-weight: 800 !important;
    letter-spacing: 0.12em !important;
}

#lkSidebar .lk-sidebar-support {
    background: #ffffff !important;
    border: 1px solid #e8edf7 !important;
}

#lkSidebar .lk-sidebar-support-icon {
    background: #f0ecff !important;
    color: #5d53ff !important;
}

#lkSidebar .lk-sidebar-support-title {
    color: #22304d !important;
}

#lkSidebar .lk-sidebar-support-sub,
#lkSidebar .lk-sidebar-support-phone,
#lkSidebar .lk-sidebar-support-email {
    color: #7c88a7 !important;
}

#lkSidebar .lk-sidebar-support-btn {
    background: linear-gradient(90deg, #5d53ff 0%, #6d64ff 100%) !important;
    color: #ffffff !important;
    border-radius: 14px !important;
}

#lkSidebar .lk-sidebar-support-btn:hover {
    background: linear-gradient(90deg, #5147f0 0%, #6258f5 100%) !important;
}

#lkTopbar .lk-topbar-name {
    color: #22304d !important;
}

#lkTopbar .lk-topbar-id {
    color: #7d89a7 !important;
}

.lk-lpanel-table-row--services .lk-lpanel-domain-cell {
    color: #51607d !important;
    font-weight: 500 !important;
}

.lk-lpanel-primary {
    color: #22304d !important;
}

.lk-lpanel-secondary {
    color: #8a96b3 !important;
}


/* ============================================================
   CLIENT AREA HOME ? Library manage button — style mauve pale unifié
   ============================================================ */
.lk-lpanel-row-btn {
    background: #f0eeff !important;
    background-image: none !important;
    color: #6656ff !important;
    -webkit-text-fill-color: #6656ff !important;
    border: 1px solid #d8d2ff !important;
    box-shadow: none !important;
}

.lk-lpanel-row-btn:hover {
    background: #6656ff !important;
    background-image: none !important;
    border-color: #6656ff !important;
    color: #ffffff !important;
    -webkit-text-fill-color: #ffffff !important;
}


/* ============================================================
   CLIENT AREA HOME ? Tabs alignment tuning
   ============================================================ */
.lk-lpanel-library-head {
    align-items: flex-start;
    padding-right: 42px;
}

.lk-lpanel-tabs {
    margin-right: 0;
    align-self: flex-end;
}

@media (max-width: 1180px) {
    .lk-lpanel-library-head {
        padding-right: 0;
    }

    .lk-lpanel-tabs {
        margin-right: 0;
        align-self: flex-start;
    }
}


/* ============================================================
   CLIENT AREA UNIFIED ? Shared lPanel-style layer
   ============================================================ */
body.lk-client-area .main-content > .row > [class*="col-"] {
    padding-bottom: 12px;
}

body.lk-client-area .lk-page-header {
    background: #ffffff;
    border: 1px solid #e6ebf5;
    border-radius: 24px;
    box-shadow: 0 10px 24px rgba(15, 23, 42, 0.05);
    padding: 18px 22px;
    margin-bottom: 18px;
}

body.lk-client-area .lk-page-header-inner {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 16px;
    flex-wrap: wrap;
}

body.lk-client-area .lk-page-title {
    margin: 0;
    font-size: 32px;
    line-height: 1.05;
    font-weight: 800;
    letter-spacing: -0.04em;
    color: #1b254b !important;
}

body.lk-client-area .lk-page-subtitle {
    margin: 8px 0 0;
    font-size: 14px;
    color: #7f8aa8 !important;
}

body.lk-client-area .lk-page-actions {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
    justify-content: flex-end;
}

body.lk-client-area .table-container,
body.lk-client-area .lk-list,
body.lk-client-area .overview-box.products-details,
body.lk-client-area .product-overbox,
body.lk-client-area .ticket-reply,
body.lk-client-area .domain-section,
body.lk-client-area .panel,
body.lk-client-area .card,
body.lk-client-area .well {
    background: #ffffff;
    border: 1px solid #e6ebf5;
    border-radius: 22px;
    box-shadow: 0 10px 24px rgba(15, 23, 42, 0.05);
}

body.lk-client-area .table-container {
    padding: 14px 18px 6px;
}

body.lk-client-area .table.table-list {
    margin-bottom: 0;
    border-collapse: separate;
    border-spacing: 0;
}

body.lk-client-area .table.table-list thead th {
    border: 0 !important;
    border-bottom: 1px solid #edf1f7 !important;
    background: transparent !important;
    color: #94a0bd !important;
    font-size: 11px !important;
    font-weight: 800 !important;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    padding: 14px 16px;
}

body.lk-client-area .table.table-list tbody tr {
    transition: background 0.16s ease;
}

body.lk-client-area .table.table-list tbody tr:hover {
    background: #fbfcff !important;
}

body.lk-client-area .table.table-list tbody td {
    border-top: 0 !important;
    border-bottom: 1px solid #edf1f7 !important;
    padding: 16px;
    vertical-align: middle !important;
    color: #22304d;
    font-size: 14px;
}

body.lk-client-area .table.table-list tbody tr:last-child td {
    border-bottom: 0 !important;
}

body.lk-client-area .table.table-list tbody a:not(.btn) {
    color: #22304d !important;
    font-weight: 600;
}

body.lk-client-area .table.table-list .status,
body.lk-client-area .label.status {
    display: inline-flex !important;
    align-items: center;
    justify-content: center;
    min-height: 30px;
    padding: 0 12px !important;
    border-radius: 999px !important;
    border: 0 !important;
    font-size: 12px !important;
    font-weight: 700 !important;
    box-shadow: none !important;
}

body.lk-client-area .status-active,
body.lk-client-area .status-paid,
body.lk-client-area .status-completed,
body.lk-client-area .status-success {
    background: #e8f9ef !important;
    color: #15935d !important;
}

body.lk-client-area .status-unpaid,
body.lk-client-area .status-overdue,
body.lk-client-area .status-suspended,
body.lk-client-area .status-pending,
body.lk-client-area .status-cancelled,
body.lk-client-area .status-terminated,
body.lk-client-area .status-fraud {
    background: #fff3de !important;
    color: #c57a16 !important;
}

body.lk-client-area .status-expired,
body.lk-client-area .status-Expired {
    background: #fff0f0 !important;
    color: #c53030 !important;
}

body.lk-client-area .btn,
body.lk-client-area button.btn {
    border-radius: 14px !important;
    font-weight: 700 !important;
    box-shadow: none !important;
}

body.lk-client-area .btn-default,
body.lk-client-area .btn-info,
body.lk-client-area .btn-primary,
body.lk-client-area .btn-success,
body.lk-client-area .btn-danger {
    background: linear-gradient(90deg, #5d53ff 0%, #6d64ff 100%) !important;
    border: 1px solid #5d53ff !important;
    color: #ffffff !important;
}

body.lk-client-area .btn-default:hover,
body.lk-client-area .btn-info:hover,
body.lk-client-area .btn-primary:hover,
body.lk-client-area .btn-success:hover,
body.lk-client-area .btn-danger:hover {
    background: linear-gradient(90deg, #5147f0 0%, #6258f5 100%) !important;
    border-color: #5147f0 !important;
    color: #ffffff !important;
}

body.lk-client-area .btn-default-yellow-fill {
    background: linear-gradient(90deg, #5d53ff 0%, #6d64ff 100%) !important;
    border: 1px solid #5d53ff !important;
    color: #ffffff !important;
}

body.lk-client-area .btn-default-yellow-fill:hover {
    background: linear-gradient(90deg, #5147f0 0%, #6258f5 100%) !important;
    border-color: #5147f0 !important;
    color: #ffffff !important;
}

body.lk-client-area .btn-group-sm > .btn,
body.lk-client-area .btn-sm {
    border-radius: 12px !important;
}

body.lk-client-area .dropdown-menu {
    border: 1px solid #e6ebf5;
    border-radius: 18px;
    box-shadow: 0 16px 32px rgba(15, 23, 42, 0.08);
    padding: 8px;
}

body.lk-client-area .dropdown-menu > li > a {
    border-radius: 10px;
    padding: 10px 12px;
    color: #5f6d8a !important;
    font-weight: 600;
}

body.lk-client-area .dropdown-menu > li > a:hover {
    background: #f5f7fd !important;
    color: #22304d !important;
}

body.lk-client-area .form-control,
body.lk-client-area .form-control:focus,
body.lk-client-area select,
body.lk-client-area textarea {
    border: 1px solid #dce4f0 !important;
    border-radius: 14px !important;
    box-shadow: none !important;
    min-height: 44px;
}

body.lk-client-area .form-control:focus,
body.lk-client-area select:focus,
body.lk-client-area textarea:focus {
    border-color: #5d53ff !important;
    box-shadow: 0 0 0 3px rgba(93, 83, 255, 0.08) !important;
}

body.lk-client-area .nav-tabs,
body.lk-client-area .nav-tabs-overflow {
    border-bottom: 1px solid #e8edf6 !important;
    margin-bottom: 18px;
}

body.lk-client-area .nav-tabs > li > a,
body.lk-client-area .nav-tabs-overflow > li > a {
    border: 0 !important;
    border-radius: 14px 14px 0 0 !important;
    color: #7c88a7 !important;
    font-weight: 700 !important;
    padding: 12px 16px !important;
    background: transparent !important;
}

body.lk-client-area .nav-tabs > li.active > a,
body.lk-client-area .nav-tabs > li.active > a:focus,
body.lk-client-area .nav-tabs > li.active > a:hover,
body.lk-client-area .nav-tabs-overflow > li.active > a,
body.lk-client-area .nav-tabs-overflow > li.active > a:focus,
body.lk-client-area .nav-tabs-overflow > li.active > a:hover {
    color: #1b254b !important;
    background: #f7f9fd !important;
    border-bottom: 2px solid #5d53ff !important;
}

body.lk-client-area .alert {
    border: 0 !important;
    border-radius: 18px !important;
    box-shadow: 0 8px 18px rgba(15, 23, 42, 0.04);
}

body.lk-client-area .alert-warning {
    background: #fff8e8 !important;
    color: #7b5a12 !important;
}
body.lk-client-area .alert-danger {
    background: #fff0f0 !important;
    color: #c53030 !important;
}

body.lk-client-area .alert-success {
    background: #edf9f0 !important;
    color: #166c46 !important;
}

body.lk-client-area .product-details {
    padding: 0;
}

body.lk-client-area .product-overbox {
    min-height: 220px;
    padding: 24px;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    background: linear-gradient(135deg, #ffffff 0%, #f7f9ff 100%);
}

body.lk-client-area .product-overbox h3,
body.lk-client-area .product-overbox h4,
body.lk-client-area .overview-box.products-details strong,
body.lk-client-area .overview-box.products-details span {
    color: #22304d !important;
}

body.lk-client-area .product-status-text {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 34px;
    padding: 0 14px;
    width: fit-content;
    border-radius: 999px;
    background: #e8f9ef;
    color: #15935d;
    font-weight: 700;
}

body.lk-client-area .overview-box.products-details {
    padding: 22px;
    text-align: left !important;
}

body.lk-client-area .overview-box.products-details span {
    display: flex;
    justify-content: space-between;
    gap: 10px;
    padding: 10px 0;
    border-bottom: 1px solid #edf1f7;
    font-size: 14px;
}

body.lk-client-area .overview-box.products-details span:last-child {
    border-bottom: 0;
}

body.lk-client-area .lk-list {
    padding: 8px 0;
}

body.lk-client-area .lk-list-item {
    padding: 16px 18px;
    border-bottom: 1px solid #edf1f7;
}

body.lk-client-area .lk-list-item:hover {
    background: #fbfcff;
}

body.lk-client-area .lk-list-icon {
    background: #eff4ff;
    border-radius: 14px;
}

body.lk-client-area .lk-list-name {
    color: #22304d;
    font-weight: 700;
}

body.lk-client-area .lk-list-sub,
body.lk-client-area .lk-list-cycle,
body.lk-client-area .lk-list-due-label {
    color: #8a96b3;
}

body.lk-client-area .lk-list-price,
body.lk-client-area .lk-list-due-date {
    color: #22304d;
    font-weight: 700;
}

@media (max-width: 900px) {
    body.lk-client-area .lk-page-header-inner {
        flex-direction: column;
    }

    body.lk-client-area .lk-page-actions {
        width: 100%;
        justify-content: flex-start;
    }

    body.lk-client-area .table-container {
        padding: 12px;
    }
}


/* ============================================================
   CLIENT AREA UNIFIED ? Button shape normalization
   ============================================================ */
body.lk-client-area .btn,
body.lk-client-area button.btn,
body.lk-client-area input.btn,
body.lk-client-area .page-action-pill,
body.lk-client-area .lk-dash-btn,
body.lk-client-area .lk-lpanel-row-btn,
body.lk-client-area .lk-lpanel-action-btn,
body.lk-client-area .lk-sidebar-support-btn,
body.lk-client-area .lk-native-service-manage,
body.lk-client-area .btn-view-details,
body.lk-client-area .lk-svc-btn,
body.lk-client-area .lk-inv-pay-btn {
    border-radius: 14px !important;
}

body.lk-client-area .btn-sm,
body.lk-client-area .btn-group-sm > .btn,
body.lk-client-area .btn-xs {
    border-radius: 12px !important;
}

body.lk-client-area .page-action-pill,
body.lk-client-area .lk-dash-btn,
body.lk-client-area .lk-lpanel-row-btn,
body.lk-client-area .lk-lpanel-action-btn,
body.lk-client-area .lk-sidebar-support-btn,
body.lk-client-area .lk-native-service-manage,
body.lk-client-area .btn-view-details,
body.lk-client-area .lk-svc-btn,
body.lk-client-area .lk-inv-pay-btn,
body.lk-client-area .btn,
body.lk-client-area button.btn,
body.lk-client-area input.btn {
    min-height: 42px;
    padding-top: 0 !important;
    padding-bottom: 0 !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    line-height: 1.1 !important;
}

body.lk-client-area .btn-block,
body.lk-client-area .lk-sidebar-support-btn,
body.lk-client-area .lk-inv-pay-btn {
    display: flex !important;
    width: 100%;
}

body.lk-client-area .lk-native-service-manage,
body.lk-client-area .btn-view-details,
body.lk-client-area .lk-lpanel-row-btn,
body.lk-client-area .lk-svc-btn {
    min-height: 38px;
}


/* ============================================================
   CLIENT AREA SUPPORT ? Submit ticket cards like homepage
   ============================================================ */
body.lk-client-area .lk-ticket-departments .row {
    display: flex;
    flex-wrap: wrap;
}

body.lk-client-area .lk-ticket-departments [class*="col-"] {
    display: flex;
}

body.lk-client-area .lk-ticket-department-card {
    width: 100%;
    border: 1px solid #e6ebf5 !important;
    border-radius: 22px !important;
    box-shadow: 0 10px 24px rgba(15, 23, 42, 0.05) !important;
    padding: 20px !important;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 12px;
}

body.lk-client-area .lk-ticket-department-pill {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 28px;
    padding: 0 12px;
    border-radius: 999px;
    background: #f1edff;
    color: #5d53ff;
    font-size: 11px;
    font-weight: 800;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

body.lk-client-area .lk-ticket-department-card .title {
    font-size: 22px !important;
    line-height: 1.1;
    font-weight: 800 !important;
    color: #1b254b !important;
    margin-top: 0 !important;
}

body.lk-client-area .lk-ticket-department-card .subtitle {
    font-size: 13px !important;
    line-height: 1.55;
    color: #7f8aa8 !important;
    min-height: 42px;
    margin-bottom: 0 !important;
}

body.lk-client-area .lk-ticket-department-card .btn {
    margin-top: auto;
    width: 100%;
}

body.lk-client-area .open-ticket {
    max-width: 100%;
}

body.lk-client-area .open-ticket form > .row,
body.lk-client-area .open-ticket .form-group,
body.lk-client-area .open-ticket p.text-center {
    margin-bottom: 8px;
}

body.lk-client-area .ticket-attachments-message {
    color: #7f8aa8 !important;
    font-size: 12px;
}


/* ============================================================
   CLIENT AREA DOMAINS ? Integrated toolbar and actions
   ============================================================ */
body.lk-client-area .lk-domains-page {
    margin-top: 8px;
}

body.lk-client-area .lk-domains-toolbar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 14px;
    flex-wrap: wrap;
    margin-bottom: 14px;
}

body.lk-client-area .lk-domains-bulk-btn {
    min-height: 42px;
    padding: 0 16px;
    border: 1px solid #dce4f0;
    border-radius: 14px;
    background: #fff;
    color: #22304d;
    display: inline-flex;
    align-items: center;
    gap: 10px;
    font-weight: 700;
}

body.lk-client-area .lk-domains-bulk-btn i {
    color: #6d64ff;
}

body.lk-client-area .lk-domains-status-pills {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 6px;
    border-radius: 16px;
    background: #f5f7fc;
    border: 1px solid #e4eaf4;
}

body.lk-client-area .lk-domains-status-pill {
    min-height: 38px;
    padding: 0 14px;
    border: 0;
    border-radius: 12px;
    background: transparent;
    color: #7d88a6;
    font-size: 13px;
    font-weight: 700;
}

body.lk-client-area .lk-domains-status-pill.is-active,
body.lk-client-area .lk-domains-status-pill:hover {
    background: #fff;
    color: #1b254b;
    box-shadow: 0 4px 10px rgba(15, 23, 42, 0.06);
}

body.lk-client-area .lk-domain-actions {
    width: auto !important;
    display: inline-flex;
    align-items: stretch;
    gap: 8px;
}

body.lk-client-area .lk-domain-manage-btn,
body.lk-client-area .lk-domain-more-btn {
    min-height: 38px;
    border-radius: 12px !important;
}

body.lk-client-area .lk-domain-manage-btn {
    padding: 0 14px !important;
    display: inline-flex !important;
    align-items: center !important;
    gap: 8px;
}

body.lk-client-area .lk-domain-manage-btn i,
body.lk-client-area .lk-domain-more-btn i {
    font-size: 13px;
}

body.lk-client-area .lk-domain-more-btn {
    width: 38px;
    padding: 0 !important;
}

@media (max-width: 900px) {
    body.lk-client-area .lk-domains-toolbar {
        align-items: flex-start;
    }

    body.lk-client-area .lk-domains-status-pills {
        width: 100%;
        justify-content: flex-start;
        overflow-x: auto;
    }
}


/* ============================================================
   CLIENT AREA UNIFIED ? Kill remaining legacy blue/round buttons
   ============================================================ */
body.lk-client-area a.btn,
body.lk-client-area button.btn,
body.lk-client-area input.btn,
body.lk-client-area .btn,
body.lk-client-area .btn-default,
body.lk-client-area .btn-primary,
body.lk-client-area .btn-info,
body.lk-client-area .btn-success,
body.lk-client-area .btn-danger,
body.lk-client-area .btn-default-yellow-fill,
body.lk-client-area .btn-default-fill,
body.lk-client-area .page-action-pill,
body.lk-client-area .lk-dash-btn,
body.lk-client-area .lk-lpanel-row-btn,
body.lk-client-area .lk-lpanel-action-btn,
body.lk-client-area .lk-sidebar-support-btn,
body.lk-client-area .lk-native-service-manage,
body.lk-client-area .btn-view-details,
body.lk-client-area .lk-svc-btn,
body.lk-client-area .lk-inv-pay-btn,
body.lk-client-area .btn-group > .btn,
body.lk-client-area .btn-group-sm > .btn,
body.lk-client-area .btn-group-xs > .btn {
    border-radius: 14px !important;
    background-image: none !important;
}

body.lk-client-area .btn-sm,
body.lk-client-area .btn-xs,
body.lk-client-area .btn-group-sm > .btn,
body.lk-client-area .btn-group-xs > .btn {
    border-radius: 12px !important;
}

body.lk-client-area .btn-default,
body.lk-client-area .btn-info,
body.lk-client-area .btn-primary,
body.lk-client-area .btn-success,
body.lk-client-area .btn-danger,
body.lk-client-area .btn-default-yellow-fill,
body.lk-client-area .btn-default-fill,
body.lk-client-area .lk-sidebar-support-btn,
body.lk-client-area .lk-native-service-manage,
body.lk-client-area .btn-view-details,
body.lk-client-area .lk-inv-pay-btn {
    background: linear-gradient(90deg, #5d53ff 0%, #6d64ff 100%) !important;
    border-color: #5d53ff !important;
    color: #ffffff !important;
    -webkit-text-fill-color: #ffffff !important;
}

body.lk-client-area .btn-default:hover,
body.lk-client-area .btn-info:hover,
body.lk-client-area .btn-primary:hover,
body.lk-client-area .btn-success:hover,
body.lk-client-area .btn-danger:hover,
body.lk-client-area .btn-default-yellow-fill:hover,
body.lk-client-area .btn-default-fill:hover,
body.lk-client-area .lk-sidebar-support-btn:hover,
body.lk-client-area .lk-native-service-manage:hover,
body.lk-client-area .btn-view-details:hover,
body.lk-client-area .lk-inv-pay-btn:hover {
    background: linear-gradient(90deg, #5147f0 0%, #6258f5 100%) !important;
    border-color: #5147f0 !important;
    color: #ffffff !important;
    -webkit-text-fill-color: #ffffff !important;
}

body.lk-client-area .btn-default.btn-block,
body.lk-client-area .btn-primary.btn-block,
body.lk-client-area .btn-info.btn-block,
body.lk-client-area .btn-success.btn-block,
body.lk-client-area .btn-danger.btn-block {
    display: flex !important;
    width: 100%;
}

/* Domains actions dropdown under the button */
body.lk-client-area .lk-domains-toolbar-left,
body.lk-client-area .btn-domain-set {
    position: relative;
}

body.lk-client-area .lk-domains-toolbar-left .dropdown-menu,
body.lk-client-area .btn-domain-set .dropdown-menu {
    top: calc(100% + 8px) !important;
    left: 0 !important;
    right: auto !important;
    transform: none !important;
}

body.lk-client-area .lk-domain-actions {
    position: relative;
}

body.lk-client-area .lk-domain-actions .dropdown-menu {
    top: calc(100% + 8px) !important;
    right: 0 !important;
    left: auto !important;
    transform: none !important;
}


/* ============================================================
   CLIENT AREA NAV ? Softer dashboard active state
   ============================================================ */
#lkSidebar .lk-sidebar-home.active,
#lkSidebar .lk-sidebar-link.active,
#lkSidebar a.lk-sidebar-home.active,
#lkSidebar a.lk-sidebar-link.active {
    background: #f1edff !important;
    color: #5146f0 !important;
    box-shadow: none !important;
}

#lkSidebar .lk-sidebar-home.active i,
#lkSidebar .lk-sidebar-link.active i,
#lkSidebar a.lk-sidebar-home.active i,
#lkSidebar a.lk-sidebar-link.active i {
    color: #5146f0 !important;
}

#lkSidebar .lk-sidebar-home.active .lk-sidebar-badge,
#lkSidebar .lk-sidebar-link.active .lk-sidebar-badge {
    background: #5e54ff !important;
    color: #ffffff !important;
    border: 0 !important;
}


/* ============================================================
   CLIENT AREA UNIFIED ? Final button state override
   ============================================================ */
body.lk-client-area a.btn,
body.lk-client-area a.btn:link,
body.lk-client-area a.btn:visited,
body.lk-client-area a.btn:hover,
body.lk-client-area a.btn:focus,
body.lk-client-area a.btn:active,
body.lk-client-area button.btn,
body.lk-client-area button.btn:hover,
body.lk-client-area button.btn:focus,
body.lk-client-area button.btn:active,
body.lk-client-area input.btn,
body.lk-client-area input.btn:hover,
body.lk-client-area input.btn:focus,
body.lk-client-area input.btn:active,
body.lk-client-area .btn-default,
body.lk-client-area .btn-default:link,
body.lk-client-area .btn-default:visited,
body.lk-client-area .btn-default:hover,
body.lk-client-area .btn-default:focus,
body.lk-client-area .btn-default:active,
body.lk-client-area .btn-primary,
body.lk-client-area .btn-primary:link,
body.lk-client-area .btn-primary:visited,
body.lk-client-area .btn-primary:hover,
body.lk-client-area .btn-primary:focus,
body.lk-client-area .btn-primary:active,
body.lk-client-area .btn-info,
body.lk-client-area .btn-info:link,
body.lk-client-area .btn-info:visited,
body.lk-client-area .btn-info:hover,
body.lk-client-area .btn-info:focus,
body.lk-client-area .btn-info:active,
body.lk-client-area .btn-success,
body.lk-client-area .btn-success:link,
body.lk-client-area .btn-success:visited,
body.lk-client-area .btn-success:hover,
body.lk-client-area .btn-success:focus,
body.lk-client-area .btn-success:active,
body.lk-client-area .btn-danger,
body.lk-client-area .btn-danger:link,
body.lk-client-area .btn-danger:visited,
body.lk-client-area .btn-danger:hover,
body.lk-client-area .btn-danger:focus,
body.lk-client-area .btn-danger:active,
body.lk-client-area .btn-default-yellow-fill,
body.lk-client-area .btn-default-yellow-fill:link,
body.lk-client-area .btn-default-yellow-fill:visited,
body.lk-client-area .btn-default-yellow-fill:hover,
body.lk-client-area .btn-default-yellow-fill:focus,
body.lk-client-area .btn-default-yellow-fill:active,
body.lk-client-area .btn-default-fill,
body.lk-client-area .btn-default-fill:link,
body.lk-client-area .btn-default-fill:visited,
body.lk-client-area .btn-default-fill:hover,
body.lk-client-area .btn-default-fill:focus,
body.lk-client-area .btn-default-fill:active,
body.lk-client-area .lk-sidebar-support-btn,
body.lk-client-area .lk-sidebar-support-btn:hover,
body.lk-client-area .lk-native-service-manage,
body.lk-client-area .lk-native-service-manage:hover,
body.lk-client-area .btn-view-details,
body.lk-client-area .btn-view-details:hover,
body.lk-client-area .lk-inv-pay-btn,
body.lk-client-area .lk-inv-pay-btn:hover,
body.lk-client-area .btn-group > .btn,
body.lk-client-area .btn-group > .btn:hover,
body.lk-client-area .btn-group > .btn:focus,
body.lk-client-area .btn-group > .btn:active {
    background: linear-gradient(90deg, #5d53ff 0%, #6d64ff 100%) !important;
    background-color: #5d53ff !important;
    border-color: #5d53ff !important;
    color: #ffffff !important;
    -webkit-text-fill-color: #ffffff !important;
    box-shadow: none !important;
}

body.lk-client-area a.btn:hover,
body.lk-client-area button.btn:hover,
body.lk-client-area input.btn:hover,
body.lk-client-area .btn-default:hover,
body.lk-client-area .btn-primary:hover,
body.lk-client-area .btn-info:hover,
body.lk-client-area .btn-success:hover,
body.lk-client-area .btn-danger:hover,
body.lk-client-area .btn-default-yellow-fill:hover,
body.lk-client-area .btn-default-fill:hover,
body.lk-client-area .lk-sidebar-support-btn:hover,
body.lk-client-area .lk-native-service-manage:hover,
body.lk-client-area .btn-view-details:hover,
body.lk-client-area .lk-inv-pay-btn:hover,
body.lk-client-area .btn-group > .btn:hover {
    background: linear-gradient(90deg, #5147f0 0%, #6258f5 100%) !important;
    background-color: #5147f0 !important;
    border-color: #5147f0 !important;
}

body.lk-client-area .btn i,
body.lk-client-area .btn span,
body.lk-client-area .lk-lpanel-row-btn i,
body.lk-client-area .lk-lpanel-row-btn span,
body.lk-client-area .lk-sidebar-support-btn i,
body.lk-client-area .lk-sidebar-support-btn span,
body.lk-client-area .lk-native-service-manage i,
body.lk-client-area .lk-native-service-manage span,
body.lk-client-area .btn-view-details i,
body.lk-client-area .btn-view-details span {
    color: #ffffff !important;
    -webkit-text-fill-color: #ffffff !important;
}


/* ============================================================
   CLIENT AREA SERVICES ? Remove oval buttons
   ============================================================ */
body.lk-client-area .lk-list-action .btn,
body.lk-client-area .lk-native-service-manage,
body.lk-client-area .lk-native-service-card .btn-view-details,
body.lk-client-area .lk-native-service-card .div-service-buttons .btn-view-details,
body.lk-client-area .div-service-buttons .btn,
body.lk-client-area .btn-view-details {
    border-radius: 14px !important;
    min-height: 38px !important;
    padding-left: 14px !important;
    padding-right: 14px !important;
}


/* ============================================================
   CLIENT AREA SERVICES ? Integrate status pills with service list
   ============================================================ */
body.lk-client-area .view-filter-btns {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 6px;
    border-radius: 16px;
    background: #f5f7fc;
    border: 1px solid #e4eaf4;
    margin: 0 0 14px auto !important;
    float: none !important;
}

body.lk-client-area .view-filter-btns::after {
    display: none !important;
}

body.lk-client-area .view-filter-btns .list-group-item,
body.lk-client-area .view-filter-btns a {
    min-height: 38px;
    padding: 0 14px !important;
    border: 0 !important;
    border-radius: 12px !important;
    background: transparent !important;
    color: #7d88a6 !important;
    font-size: 13px !important;
    font-weight: 700 !important;
    display: inline-flex !important;
    align-items: center !important;
    gap: 8px !important;
    box-shadow: none !important;
}

body.lk-client-area .view-filter-btns .list-group-item i,
body.lk-client-area .view-filter-btns a i {
    color: #a0abc3 !important;
}

body.lk-client-area .view-filter-btns .list-group-item.active,
body.lk-client-area .view-filter-btns .list-group-item:hover,
body.lk-client-area .view-filter-btns a.active,
body.lk-client-area .view-filter-btns a:hover {
    background: #ffffff !important;
    color: #1b254b !important;
    box-shadow: 0 4px 10px rgba(15, 23, 42, 0.06) !important;
}

body.lk-client-area .view-filter-btns .list-group-item.active i,
body.lk-client-area .view-filter-btns .list-group-item:hover i,
body.lk-client-area .view-filter-btns a.active i,
body.lk-client-area .view-filter-btns a:hover i {
    color: #5d53ff !important;
}

body.lk-client-area .lk-list {
    margin-top: 0;
}

@media (max-width: 900px) {
    body.lk-client-area .view-filter-btns {
        width: 100%;
        justify-content: flex-start;
        overflow-x: auto;
        margin-right: 0 !important;
    }
}

/* ============================================================
   CLIENT AREA SERVICES - Attach filter pills to the list block
   ============================================================ */
body.lk-client-area .view-filter-btns {
    border-radius: 18px 18px 0 0 !important;
    background: #ffffff !important;
    border-bottom-color: transparent !important;
    box-shadow: 0 12px 28px rgba(15, 23, 42, 0.05) !important;
    margin: 0 0 -1px auto !important;
    position: relative;
    z-index: 3;
}

body.lk-client-area .view-filter-btns + .lk-list,
body.lk-client-area .view-filter-btns + .listtable,
body.lk-client-area .view-filter-btns + .table-container,
body.lk-client-area .view-filter-btns + .table-responsive {
    position: relative;
    z-index: 1;
}

/* ============================================================
   CLIENT AREA SERVICES - Match domains toolbar grouping
   ============================================================ */
body.lk-client-area .panel-sidebar.view-filter-btns {
    display: inline-flex !important;
    align-items: center !important;
    gap: 8px !important;
    padding: 6px !important;
    background: #f5f7fc !important;
    border: 1px solid #dfe6f4 !important;
    border-radius: 18px !important;
    box-shadow: none !important;
    float: none !important;
    margin: 0 0 12px auto !important;
    width: fit-content !important;
    max-width: 100% !important;
}

body.lk-client-area .panel-sidebar.view-filter-btns .panel-heading,
body.lk-client-area .panel-sidebar.view-filter-btns .panel-body,
body.lk-client-area .panel-sidebar.view-filter-btns .list-group {
    display: contents !important;
    padding: 0 !important;
    margin: 0 !important;
    border: 0 !important;
    background: transparent !important;
}

body.lk-client-area .panel-sidebar.view-filter-btns .list-group-item,
body.lk-client-area .panel-sidebar.view-filter-btns a.list-group-item {
    min-height: 38px !important;
    padding: 0 14px !important;
    border: 0 !important;
    border-radius: 12px !important;
    background: transparent !important;
    color: #7d88a6 !important;
    font-size: 13px !important;
    font-weight: 700 !important;
    display: inline-flex !important;
    align-items: center !important;
    gap: 8px !important;
    width: auto !important;
    box-shadow: none !important;
}

body.lk-client-area .panel-sidebar.view-filter-btns .list-group-item.active,
body.lk-client-area .panel-sidebar.view-filter-btns .list-group-item:hover,
body.lk-client-area .panel-sidebar.view-filter-btns a.list-group-item.active,
body.lk-client-area .panel-sidebar.view-filter-btns a.list-group-item:hover {
    background: #ffffff !important;
    color: #1b254b !important;
    box-shadow: 0 4px 10px rgba(15, 23, 42, 0.06) !important;
}

body.lk-client-area .panel-sidebar.view-filter-btns .list-group-item i,
body.lk-client-area .panel-sidebar.view-filter-btns a.list-group-item i {
    color: #a0abc3 !important;
}

body.lk-client-area .panel-sidebar.view-filter-btns .list-group-item.active i,
body.lk-client-area .panel-sidebar.view-filter-btns .list-group-item:hover i,
body.lk-client-area .panel-sidebar.view-filter-btns a.list-group-item.active i,
body.lk-client-area .panel-sidebar.view-filter-btns a.list-group-item:hover i {
    color: #5d53ff !important;
}

@media (max-width: 900px) {
    body.lk-client-area .panel-sidebar.view-filter-btns {
        width: 100% !important;
        justify-content: flex-start !important;
        overflow-x: auto !important;
        margin-right: 0 !important;
    }
}

/* ============================================================
   CLIENT AREA SERVICES - Native status pills like domains page
   ============================================================ */
body.lk-client-area .lk-services-toolbar {
    display: flex;
    justify-content: flex-end;
    margin: 0 0 12px;
}

body.lk-client-area .lk-services-status-pills {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 6px;
    background: #f5f7fc;
    border: 1px solid #dfe6f4;
    border-radius: 18px;
    max-width: 100%;
}

body.lk-client-area .lk-services-status-pill {
    min-height: 38px;
    padding: 0 14px;
    border: 0;
    border-radius: 12px;
    background: transparent;
    color: #7d88a6;
    font-size: 13px;
    font-weight: 700;
    display: inline-flex;
    align-items: center;
    gap: 8px;
}

body.lk-client-area .lk-services-status-pill span {
    display: inline-flex;
    min-width: 20px;
    height: 20px;
    padding: 0 6px;
    align-items: center;
    justify-content: center;
    border-radius: 999px;
    background: rgba(93, 83, 255, 0.08);
    color: #5d53ff;
    font-size: 11px;
    font-weight: 800;
}

body.lk-client-area .lk-services-status-pill.is-active,
body.lk-client-area .lk-services-status-pill:hover {
    background: #ffffff;
    color: #1b254b;
    box-shadow: 0 4px 10px rgba(15, 23, 42, 0.06);
}

@media (max-width: 900px) {
    body.lk-client-area .lk-services-toolbar {
        justify-content: flex-start;
    }

    body.lk-client-area .lk-services-status-pills {
        width: 100%;
        overflow-x: auto;
    }
}


/* ============================================================
   CLIENT AREA PRODUCT DETAILS - Match homepage system
   ============================================================ */
body.lk-client-area .lk-product-page-nav-wrap {
    display: flex;
    justify-content: flex-end;
    margin: 0 0 18px;
}

body.lk-client-area .lk-product-page-nav {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 6px;
    margin: 0;
    list-style: none;
    background: #f5f7fc;
    border: 1px solid #dfe6f4;
    border-radius: 18px;
}

body.lk-client-area .lk-product-page-nav > li {
    margin: 0;
}

body.lk-client-area .lk-product-page-nav > li > a {
    min-height: 38px;
    padding: 0 14px;
    border: 0 !important;
    border-radius: 12px !important;
    background: transparent !important;
    color: #7d88a6 !important;
    font-size: 13px;
    font-weight: 700;
    display: inline-flex;
    align-items: center;
}

body.lk-client-area .lk-product-page-nav > li.active > a,
body.lk-client-area .lk-product-page-nav > li.active > a:focus,
body.lk-client-area .lk-product-page-nav > li.active > a:hover,
body.lk-client-area .lk-product-page-nav > li > a:hover {
    background: #ffffff !important;
    color: #1b254b !important;
    box-shadow: 0 4px 10px rgba(15, 23, 42, 0.06);
}

body.lk-client-area .lk-product-page-content {
    margin-top: 0 !important;
}

body.lk-client-area .product-overbox {
    min-height: 100%;
    padding: 28px;
}

body.lk-client-area .prod-info-abso {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

body.lk-client-area .prod-info-abso > i {
    width: 52px;
    height: 52px;
    border-radius: 16px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: #eff4ff;
    color: #5d53ff;
    font-size: 20px;
}

body.lk-client-area .product-overbox h3 {
    margin: 0;
    font-size: 30px;
    font-weight: 800;
    color: #142a63 !important;
}

body.lk-client-area .product-overbox h4 {
    margin: 0;
    font-size: 14px;
    font-weight: 600;
    color: #7d88a6 !important;
}

body.lk-client-area .product-actions-wrapper {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    margin-top: 22px;
}

body.lk-client-area .product-actions-wrapper .btn {
    min-height: 42px;
    padding: 0 16px;
    border-radius: 14px !important;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
}

body.lk-client-area .overview-box.products-details {
    min-height: 100%;
    padding: 26px;
}

body.lk-client-area .product-details-tab-container,
body.lk-client-area #tabDownloads .row,
body.lk-client-area #tabAddons .row,
body.lk-client-area #tabChangepw form {
    background: #ffffff;
    border: 1px solid #e6ebf5;
    border-radius: 22px;
    box-shadow: 0 10px 24px rgba(15, 23, 42, 0.05);
}

body.lk-client-area .product-details-tab-container {
    padding: 22px 24px;
}

body.lk-client-area .product-details-tab-container .tab-pane > .row,
body.lk-client-area .product-details-tab-container .tab-pane > .col-sm-10,
body.lk-client-area .product-details-tab-container .tab-pane > .text-center.module-client-area {
    margin-left: 0;
    margin-right: 0;
}

body.lk-client-area .product-details-tab-container .tab-pane#domain .row,
body.lk-client-area .product-details-tab-container .tab-pane#configoptions .row,
body.lk-client-area .product-details-tab-container .tab-pane#additionalinfo .row {
    display: flex;
    align-items: center;
    margin: 0;
    padding: 14px 0;
    border-bottom: 1px solid #edf1f7;
}

body.lk-client-area .product-details-tab-container .tab-pane#domain .row:last-of-type,
body.lk-client-area .product-details-tab-container .tab-pane#configoptions .row:last-of-type,
body.lk-client-area .product-details-tab-container .tab-pane#additionalinfo .row:last-of-type {
    border-bottom: 0;
}

body.lk-client-area .product-details-tab-container .text-right,
body.lk-client-area .product-details-tab-container .text-left {
    text-align: left !important;
}

body.lk-client-area .product-details-tab-container strong {
    color: #7d88a6;
    font-size: 12px;
    font-weight: 800;
    letter-spacing: 0.06em;
    text-transform: uppercase;
}

body.lk-client-area .module-client-area {
    text-align: left !important;
}

body.lk-client-area #tabDownloads .row,
body.lk-client-area #tabAddons .row {
    padding: 22px 24px;
}

body.lk-client-area #tabDownloads h3,
body.lk-client-area #tabAddons h4,
body.lk-client-area #tabChangepw h3 {
    color: #142a63 !important;
    font-weight: 800;
}

body.lk-client-area #tabChangepw form {
    padding: 24px;
}

body.lk-client-area #tabChangepw .form-group:last-child {
    margin-bottom: 0;
}

@media (max-width: 900px) {
    body.lk-client-area .lk-product-page-nav-wrap {
        justify-content: flex-start;
    }

    body.lk-client-area .lk-product-page-nav {
        width: 100%;
        overflow-x: auto;
    }

    body.lk-client-area .product-actions-wrapper {
        flex-direction: column;
    }

    body.lk-client-area .product-actions-wrapper .btn {
        width: 100%;
    }
}


/* ============================================================
   CLIENT AREA PRODUCT DETAILS - Homepage-style refinement
   ============================================================ */
body.lk-client-area .lk-productdetails-page {
    padding-top: 4px;
}

body.lk-client-area .lk-productdetails-page .product-details > .row {
    display: grid;
    grid-template-columns: minmax(0, 1.15fr) minmax(320px, 0.85fr);
    gap: 24px;
    margin: 0;
}

body.lk-client-area .lk-productdetails-page .product-details > .row > [class*='col-'] {
    width: 100%;
    padding: 0;
}

body.lk-client-area .lk-productdetails-page .product-overbox,
body.lk-client-area .lk-productdetails-page .overview-box.products-details,
body.lk-client-area .lk-productdetails-page .product-details-tab-container,
body.lk-client-area .lk-productdetails-page #tabDownloads .row,
body.lk-client-area .lk-productdetails-page #tabAddons .row,
body.lk-client-area .lk-productdetails-page #tabChangepw form {
    border-radius: 24px !important;
}

body.lk-client-area .lk-productdetails-page .product-overbox {
    background: linear-gradient(180deg, #ffffff 0%, #f8fbff 100%) !important;
    border-color: #e3e9f5 !important;
}

body.lk-client-area .lk-productdetails-page .overview-box.products-details {
    background: linear-gradient(180deg, #ffffff 0%, #fbfcff 100%) !important;
}

body.lk-client-area .lk-productdetails-page .product-actions-wrapper {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 12px;
    margin-top: 24px;
}

body.lk-client-area .lk-productdetails-page .product-actions-wrapper .btn,
body.lk-client-area .lk-productdetails-page .btn,
body.lk-client-area .lk-productdetails-page button.btn,
body.lk-client-area .lk-productdetails-page input.btn,
body.lk-client-area .lk-productdetails-page .btn-group > .btn,
body.lk-client-area .lk-productdetails-page .generate-password {
    min-height: 42px !important;
    padding: 0 16px !important;
    border-radius: 14px !important;
    line-height: 1.15 !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 8px !important;
    white-space: nowrap;
}

body.lk-client-area .lk-productdetails-page .btn.btn-block,
body.lk-client-area .lk-productdetails-page a.btn.btn-block {
    display: inline-flex !important;
    width: auto !important;
}

body.lk-client-area .lk-productdetails-page .nav-tabs,
body.lk-client-area .lk-productdetails-page .nav-tabs-overflow {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin: 0 0 18px !important;
    padding: 6px;
    border: 1px solid #dfe6f4 !important;
    border-radius: 18px;
    background: #f5f7fc;
}

body.lk-client-area .lk-productdetails-page .nav-tabs > li,
body.lk-client-area .lk-productdetails-page .nav-tabs-overflow > li {
    float: none !important;
    margin: 0 !important;
}

body.lk-client-area .lk-productdetails-page .nav-tabs > li > a,
body.lk-client-area .lk-productdetails-page .nav-tabs-overflow > li > a {
    min-height: 38px;
    padding: 0 14px !important;
    border-radius: 12px !important;
}

body.lk-client-area .lk-productdetails-page .product-details-tab-container .tab-pane#domain .row,
body.lk-client-area .lk-productdetails-page .product-details-tab-container .tab-pane#configoptions .row,
body.lk-client-area .lk-productdetails-page .product-details-tab-container .tab-pane#additionalinfo .row {
    display: grid;
    grid-template-columns: minmax(180px, 0.45fr) minmax(0, 1fr);
    gap: 18px;
    align-items: start;
}

body.lk-client-area .lk-productdetails-page .product-details-tab-container .col-sm-5,
body.lk-client-area .lk-productdetails-page .product-details-tab-container .col-sm-7 {
    width: 100%;
    padding: 0;
}

body.lk-client-area .lk-productdetails-page .product-details-tab-container p .btn {
    margin-right: 8px;
    margin-bottom: 8px;
}

body.lk-client-area .lk-productdetails-page .bootstrap-switch,
body.lk-client-area .lk-productdetails-page .bootstrap-switch * {
    border-radius: 14px !important;
}

@media (max-width: 991px) {
    body.lk-client-area .lk-productdetails-page .product-details > .row {
        grid-template-columns: 1fr;
    }

    body.lk-client-area .lk-productdetails-page .product-actions-wrapper .btn,
    body.lk-client-area .lk-productdetails-page .btn.btn-block,
    body.lk-client-area .lk-productdetails-page a.btn.btn-block {
        width: 100% !important;
    }
}


/* ============================================================
   CLIENT AREA PRODUCT DETAILS - Kill remaining oval buttons and frame cPanel area
   ============================================================ */
body.lk-client-area .lk-product-unpaid-alert {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
}

body.lk-client-area .lk-product-unpaid-alert .pull-right {
    float: none !important;
    margin-left: auto;
}

body.lk-client-area .lk-product-unpaid-alert .lk-product-pay-invoice-btn,
body.lk-client-area .lk-productdetails-page .lk-product-pay-invoice-btn,
body.lk-client-area .lk-productdetails-page .btn-xs,
body.lk-client-area .lk-productdetails-page a.btn-xs,
body.lk-client-area .lk-productdetails-page .btn-sm,
body.lk-client-area .lk-productdetails-page a.btn-sm,
body.lk-client-area .lk-productdetails-page .btn-default,
body.lk-client-area .lk-productdetails-page .btn-primary,
body.lk-client-area .lk-productdetails-page .btn-success,
body.lk-client-area .lk-productdetails-page .btn-danger,
body.lk-client-area .lk-productdetails-page .btn-default-yellow-fill,
body.lk-client-area .lk-productdetails-page .btn-default-fill,
body.lk-client-area .lk-productdetails-page .btn-group > .btn,
body.lk-client-area .lk-productdetails-page .generate-password,
body.lk-client-area .lk-productdetails-page .module-client-area .btn,
body.lk-client-area .lk-productdetails-page .module-client-area input[type='submit'],
body.lk-client-area .lk-productdetails-page .module-client-area input[type='button'],
body.lk-client-area .lk-productdetails-page .module-client-area button {
    border-radius: 14px !important;
    border-top-left-radius: 14px !important;
    border-top-right-radius: 14px !important;
    border-bottom-left-radius: 14px !important;
    border-bottom-right-radius: 14px !important;
    min-height: 42px !important;
    padding: 0 16px !important;
}

body.lk-client-area .lk-productdetails-page .module-client-area,
body.lk-client-area .lk-productdetails-page .lk-module-client-area {
    background: #f8fbff;
    border: 1px solid #e6ebf5;
    border-radius: 20px;
    padding: 18px;
    margin-top: 18px;
}

body.lk-client-area .lk-productdetails-page .module-client-area > .row,
body.lk-client-area .lk-productdetails-page .module-client-area > div,
body.lk-client-area .lk-productdetails-page .module-client-area > form,
body.lk-client-area .lk-productdetails-page .module-client-area .panel,
body.lk-client-area .lk-productdetails-page .module-client-area .well,
body.lk-client-area .lk-productdetails-page .module-client-area .alert,
body.lk-client-area .lk-productdetails-page .module-client-area .col-sm-12,
body.lk-client-area .lk-productdetails-page .module-client-area .col-md-12 {
    background: #ffffff;
    border: 1px solid #e8edf6;
    border-radius: 18px;
    padding: 16px;
    margin-bottom: 14px;
    box-shadow: none;
}

body.lk-client-area .lk-productdetails-page .module-client-area table {
    width: 100%;
    border-collapse: separate;
    border-spacing: 0;
    overflow: hidden;
    border: 1px solid #e8edf6;
    border-radius: 16px;
    background: #ffffff;
}

body.lk-client-area .lk-productdetails-page .module-client-area table td,
body.lk-client-area .lk-productdetails-page .module-client-area table th {
    padding: 12px 14px;
    border-bottom: 1px solid #edf1f7;
}

body.lk-client-area .lk-productdetails-page .module-client-area table tr:last-child td,
body.lk-client-area .lk-productdetails-page .module-client-area table tr:last-child th {
    border-bottom: 0;
}

body.lk-client-area .lk-productdetails-page .module-client-area a:not(.btn) {
    color: #1f5fbf !important;
    font-weight: 600;
}

body.lk-client-area .lk-productdetails-page .module-client-area .btn + .btn,
body.lk-client-area .lk-productdetails-page .product-details-tab-container p .btn + .btn {
    margin-left: 8px;
}

@media (max-width: 900px) {
    body.lk-client-area .lk-product-unpaid-alert {
        flex-direction: column;
        align-items: flex-start;
    }

    body.lk-client-area .lk-product-unpaid-alert .pull-right {
        margin-left: 0;
    }

    body.lk-client-area .lk-productdetails-page .module-client-area .btn,
    body.lk-client-area .lk-productdetails-page .module-client-area input[type='submit'],
    body.lk-client-area .lk-productdetails-page .module-client-area input[type='button'],
    body.lk-client-area .lk-productdetails-page .module-client-area button {
        width: 100%;
    }
}


/* ============================================================
   CLIENT AREA PRODUCT DETAILS - Homepage-style module cards
   ============================================================ */
body.lk-client-area .lk-productdetails-page .module-client-area .row {
    display: flex;
    flex-wrap: wrap;
    gap: 16px;
    margin-left: 0 !important;
    margin-right: 0 !important;
}

body.lk-client-area .lk-productdetails-page .module-client-area .row > [class*='col-'] {
    padding-left: 0 !important;
    padding-right: 0 !important;
}

body.lk-client-area .lk-productdetails-page .module-client-area .row > [class*='col-'] > .panel,
body.lk-client-area .lk-productdetails-page .module-client-area .row > [class*='col-'] > .well,
body.lk-client-area .lk-productdetails-page .module-client-area .row > [class*='col-'] > .stat,
body.lk-client-area .lk-productdetails-page .module-client-area .row > [class*='col-'] > .stats,
body.lk-client-area .lk-productdetails-page .module-client-area .row > [class*='col-'] > .package,
body.lk-client-area .lk-productdetails-page .module-client-area .row > [class*='col-'] > .item,
body.lk-client-area .lk-productdetails-page .module-client-area .row > [class*='col-'] > div:not(.row):not(.clearfix):not(.table-responsive) {
    min-height: 132px;
    padding: 20px 22px !important;
    border: 1px solid #e6ebf5 !important;
    border-radius: 22px !important;
    box-shadow: none !important;
    background: #f8fbff !important;
}

body.lk-client-area .lk-productdetails-page .module-client-area .row > [class*='col-']:nth-child(4n+1) > .panel,
body.lk-client-area .lk-productdetails-page .module-client-area .row > [class*='col-']:nth-child(4n+1) > .well,
body.lk-client-area .lk-productdetails-page .module-client-area .row > [class*='col-']:nth-child(4n+1) > div:not(.row):not(.clearfix):not(.table-responsive) {
    background: #eef4ff !important;
}

body.lk-client-area .lk-productdetails-page .module-client-area .row > [class*='col-']:nth-child(4n+2) > .panel,
body.lk-client-area .lk-productdetails-page .module-client-area .row > [class*='col-']:nth-child(4n+2) > .well,
body.lk-client-area .lk-productdetails-page .module-client-area .row > [class*='col-']:nth-child(4n+2) > div:not(.row):not(.clearfix):not(.table-responsive) {
    background: #edf9f2 !important;
}

body.lk-client-area .lk-productdetails-page .module-client-area .row > [class*='col-']:nth-child(4n+3) > .panel,
body.lk-client-area .lk-productdetails-page .module-client-area .row > [class*='col-']:nth-child(4n+3) > .well,
body.lk-client-area .lk-productdetails-page .module-client-area .row > [class*='col-']:nth-child(4n+3) > div:not(.row):not(.clearfix):not(.table-responsive) {
    background: #fff6ea !important;
}

body.lk-client-area .lk-productdetails-page .module-client-area .row > [class*='col-']:nth-child(4n+4) > .panel,
body.lk-client-area .lk-productdetails-page .module-client-area .row > [class*='col-']:nth-child(4n+4) > .well,
body.lk-client-area .lk-productdetails-page .module-client-area .row > [class*='col-']:nth-child(4n+4) > div:not(.row):not(.clearfix):not(.table-responsive) {
    background: #f4efff !important;
}

body.lk-client-area .lk-productdetails-page .module-client-area .panel-heading,
body.lk-client-area .lk-productdetails-page .module-client-area .panel-title,
body.lk-client-area .lk-productdetails-page .module-client-area h3,
body.lk-client-area .lk-productdetails-page .module-client-area h4,
body.lk-client-area .lk-productdetails-page .module-client-area .title {
    margin: 0 0 10px !important;
    color: #142a63 !important;
    font-weight: 800 !important;
}

body.lk-client-area .lk-productdetails-page .module-client-area small,
body.lk-client-area .lk-productdetails-page .module-client-area .text-muted,
body.lk-client-area .lk-productdetails-page .module-client-area .sub,
body.lk-client-area .lk-productdetails-page .module-client-area .description {
    color: #7d88a6 !important;
}

body.lk-client-area .lk-productdetails-page .module-client-area .value,
body.lk-client-area .lk-productdetails-page .module-client-area .count,
body.lk-client-area .lk-productdetails-page .module-client-area strong:not(table strong) {
    color: #142a63 !important;
}

@media (max-width: 900px) {
    body.lk-client-area .lk-productdetails-page .module-client-area .row > [class*='col-'] > .panel,
    body.lk-client-area .lk-productdetails-page .module-client-area .row > [class*='col-'] > .well,
    body.lk-client-area .lk-productdetails-page .module-client-area .row > [class*='col-'] > div:not(.row):not(.clearfix):not(.table-responsive) {
        min-height: 0;
    }
}


/* ============================================================
   CLIENT AREA PRODUCT DETAILS - Target visible cPanel blocks
   ============================================================ */
body.lk-client-area #alertUnpaidInvoice .btn,
body.lk-client-area #alertOverdueInvoice .btn,
body.lk-client-area #alertUnpaidInvoice a.btn,
body.lk-client-area #alertOverdueInvoice a.btn,
body.lk-client-area .lk-product-pay-invoice-btn {
    min-height: 42px !important;
    padding: 0 16px !important;
    border-radius: 12px !important;
    border-top-left-radius: 12px !important;
    border-top-right-radius: 12px !important;
    border-bottom-left-radius: 12px !important;
    border-bottom-right-radius: 12px !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
}

body.lk-client-area .lk-productdetails-page .module-client-area .col-md-6,
body.lk-client-area .lk-productdetails-page .module-client-area .col-sm-6,
body.lk-client-area .lk-productdetails-page .module-client-area .col-lg-6,
body.lk-client-area .lk-productdetails-page .module-client-area .col-md-12,
body.lk-client-area .lk-productdetails-page .module-client-area .col-sm-12,
body.lk-client-area .lk-productdetails-page .module-client-area .col-lg-12 {
    margin-bottom: 22px !important;
}

body.lk-client-area .lk-productdetails-page .module-client-area .col-md-6 > div,
body.lk-client-area .lk-productdetails-page .module-client-area .col-sm-6 > div,
body.lk-client-area .lk-productdetails-page .module-client-area .col-lg-6 > div,
body.lk-client-area .lk-productdetails-page .module-client-area .col-md-12 > div,
body.lk-client-area .lk-productdetails-page .module-client-area .col-sm-12 > div,
body.lk-client-area .lk-productdetails-page .module-client-area .col-lg-12 > div {
    border: 1px solid #e4eaf5 !important;
    border-radius: 24px !important;
    overflow: hidden !important;
    background: #ffffff !important;
    box-shadow: 0 10px 24px rgba(15, 23, 42, 0.05) !important;
}

body.lk-client-area .lk-productdetails-page .module-client-area .col-md-6:nth-child(4n+1) > div,
body.lk-client-area .lk-productdetails-page .module-client-area .col-sm-6:nth-child(4n+1) > div,
body.lk-client-area .lk-productdetails-page .module-client-area .col-lg-6:nth-child(4n+1) > div,
body.lk-client-area .lk-productdetails-page .module-client-area .col-md-12:nth-child(4n+1) > div,
body.lk-client-area .lk-productdetails-page .module-client-area .col-sm-12:nth-child(4n+1) > div,
body.lk-client-area .lk-productdetails-page .module-client-area .col-lg-12:nth-child(4n+1) > div {
    background: linear-gradient(180deg, #f4f8ff 0%, #ffffff 100%) !important;
}

body.lk-client-area .lk-productdetails-page .module-client-area .col-md-6:nth-child(4n+2) > div,
body.lk-client-area .lk-productdetails-page .module-client-area .col-sm-6:nth-child(4n+2) > div,
body.lk-client-area .lk-productdetails-page .module-client-area .col-lg-6:nth-child(4n+2) > div,
body.lk-client-area .lk-productdetails-page .module-client-area .col-md-12:nth-child(4n+2) > div,
body.lk-client-area .lk-productdetails-page .module-client-area .col-sm-12:nth-child(4n+2) > div,
body.lk-client-area .lk-productdetails-page .module-client-area .col-lg-12:nth-child(4n+2) > div {
    background: linear-gradient(180deg, #eefaf3 0%, #ffffff 100%) !important;
}

body.lk-client-area .lk-productdetails-page .module-client-area .col-md-6:nth-child(4n+3) > div,
body.lk-client-area .lk-productdetails-page .module-client-area .col-sm-6:nth-child(4n+3) > div,
body.lk-client-area .lk-productdetails-page .module-client-area .col-lg-6:nth-child(4n+3) > div,
body.lk-client-area .lk-productdetails-page .module-client-area .col-md-12:nth-child(4n+3) > div,
body.lk-client-area .lk-productdetails-page .module-client-area .col-sm-12:nth-child(4n+3) > div,
body.lk-client-area .lk-productdetails-page .module-client-area .col-lg-12:nth-child(4n+3) > div {
    background: linear-gradient(180deg, #fff7ee 0%, #ffffff 100%) !important;
}

body.lk-client-area .lk-productdetails-page .module-client-area .col-md-6:nth-child(4n+4) > div,
body.lk-client-area .lk-productdetails-page .module-client-area .col-sm-6:nth-child(4n+4) > div,
body.lk-client-area .lk-productdetails-page .module-client-area .col-lg-6:nth-child(4n+4) > div,
body.lk-client-area .lk-productdetails-page .module-client-area .col-md-12:nth-child(4n+4) > div,
body.lk-client-area .lk-productdetails-page .module-client-area .col-sm-12:nth-child(4n+4) > div,
body.lk-client-area .lk-productdetails-page .module-client-area .col-lg-12:nth-child(4n+4) > div {
    background: linear-gradient(180deg, #f7f1ff 0%, #ffffff 100%) !important;
}

body.lk-client-area .lk-productdetails-page .module-client-area .col-md-6 > div > div:first-child,
body.lk-client-area .lk-productdetails-page .module-client-area .col-sm-6 > div > div:first-child,
body.lk-client-area .lk-productdetails-page .module-client-area .col-lg-6 > div > div:first-child,
body.lk-client-area .lk-productdetails-page .module-client-area .col-md-12 > div > div:first-child,
body.lk-client-area .lk-productdetails-page .module-client-area .col-sm-12 > div > div:first-child,
body.lk-client-area .lk-productdetails-page .module-client-area .col-lg-12 > div > div:first-child {
    padding: 20px 24px 16px !important;
    border-bottom: 1px solid #e8edf6 !important;
    background: transparent !important;
}

body.lk-client-area .lk-productdetails-page .module-client-area .col-md-6 > div > div:first-child h1,
body.lk-client-area .lk-productdetails-page .module-client-area .col-md-6 > div > div:first-child h2,
body.lk-client-area .lk-productdetails-page .module-client-area .col-md-6 > div > div:first-child h3,
body.lk-client-area .lk-productdetails-page .module-client-area .col-md-6 > div > div:first-child h4,
body.lk-client-area .lk-productdetails-page .module-client-area .col-sm-6 > div > div:first-child h1,
body.lk-client-area .lk-productdetails-page .module-client-area .col-sm-6 > div > div:first-child h2,
body.lk-client-area .lk-productdetails-page .module-client-area .col-sm-6 > div > div:first-child h3,
body.lk-client-area .lk-productdetails-page .module-client-area .col-sm-6 > div > div:first-child h4,
body.lk-client-area .lk-productdetails-page .module-client-area .col-lg-6 > div > div:first-child h1,
body.lk-client-area .lk-productdetails-page .module-client-area .col-lg-6 > div > div:first-child h2,
body.lk-client-area .lk-productdetails-page .module-client-area .col-lg-6 > div > div:first-child h3,
body.lk-client-area .lk-productdetails-page .module-client-area .col-lg-6 > div > div:first-child h4,
body.lk-client-area .lk-productdetails-page .module-client-area .col-md-12 > div > div:first-child h1,
body.lk-client-area .lk-productdetails-page .module-client-area .col-md-12 > div > div:first-child h2,
body.lk-client-area .lk-productdetails-page .module-client-area .col-md-12 > div > div:first-child h3,
body.lk-client-area .lk-productdetails-page .module-client-area .col-md-12 > div > div:first-child h4,
body.lk-client-area .lk-productdetails-page .module-client-area .col-sm-12 > div > div:first-child h1,
body.lk-client-area .lk-productdetails-page .module-client-area .col-sm-12 > div > div:first-child h2,
body.lk-client-area .lk-productdetails-page .module-client-area .col-sm-12 > div > div:first-child h3,
body.lk-client-area .lk-productdetails-page .module-client-area .col-sm-12 > div > div:first-child h4,
body.lk-client-area .lk-productdetails-page .module-client-area .col-lg-12 > div > div:first-child h1,
body.lk-client-area .lk-productdetails-page .module-client-area .col-lg-12 > div > div:first-child h2,
body.lk-client-area .lk-productdetails-page .module-client-area .col-lg-12 > div > div:first-child h3,
body.lk-client-area .lk-productdetails-page .module-client-area .col-lg-12 > div > div:first-child h4 {
    margin: 0 !important;
    color: #142a63 !important;
    font-size: 16px !important;
    font-weight: 800 !important;
}

body.lk-client-area .lk-productdetails-page .module-client-area .col-md-6 > div > div:not(:first-child),
body.lk-client-area .lk-productdetails-page .module-client-area .col-sm-6 > div > div:not(:first-child),
body.lk-client-area .lk-productdetails-page .module-client-area .col-lg-6 > div > div:not(:first-child),
body.lk-client-area .lk-productdetails-page .module-client-area .col-md-12 > div > div:not(:first-child),
body.lk-client-area .lk-productdetails-page .module-client-area .col-sm-12 > div > div:not(:first-child),
body.lk-client-area .lk-productdetails-page .module-client-area .col-lg-12 > div > div:not(:first-child) {
    padding: 22px 24px !important;
}

body.lk-client-area .lk-productdetails-page .module-client-area .col-md-6 .btn,
body.lk-client-area .lk-productdetails-page .module-client-area .col-sm-6 .btn,
body.lk-client-area .lk-productdetails-page .module-client-area .col-lg-6 .btn,
body.lk-client-area .lk-productdetails-page .module-client-area .col-md-12 .btn,
body.lk-client-area .lk-productdetails-page .module-client-area .col-sm-12 .btn,
body.lk-client-area .lk-productdetails-page .module-client-area .col-lg-12 .btn {
    border-radius: 12px !important;
}

body.lk-client-area .lk-productdetails-page .module-client-area .col-md-6 img,
body.lk-client-area .lk-productdetails-page .module-client-area .col-sm-6 img,
body.lk-client-area .lk-productdetails-page .module-client-area .col-lg-6 img,
body.lk-client-area .lk-productdetails-page .module-client-area .col-md-12 img,
body.lk-client-area .lk-productdetails-page .module-client-area .col-sm-12 img,
body.lk-client-area .lk-productdetails-page .module-client-area .col-lg-12 img {
    max-width: 100%;
}

body.lk-client-area .lk-productdetails-page .module-client-area .col-md-6 .text-center,
body.lk-client-area .lk-productdetails-page .module-client-area .col-sm-6 .text-center,
body.lk-client-area .lk-productdetails-page .module-client-area .col-lg-6 .text-center,
body.lk-client-area .lk-productdetails-page .module-client-area .col-md-12 .text-center,
body.lk-client-area .lk-productdetails-page .module-client-area .col-sm-12 .text-center,
body.lk-client-area .lk-productdetails-page .module-client-area .col-lg-12 .text-center {
    text-align: center !important;
}


/* ============================================================
   CLIENT AREA PRODUCT DETAILS - Soften module cards to homepage pastels
   ============================================================ */
body.lk-client-area .lk-productdetails-page .module-client-area .col-md-6 > div,
body.lk-client-area .lk-productdetails-page .module-client-area .col-sm-6 > div,
body.lk-client-area .lk-productdetails-page .module-client-area .col-lg-6 > div,
body.lk-client-area .lk-productdetails-page .module-client-area .col-md-12 > div,
body.lk-client-area .lk-productdetails-page .module-client-area .col-sm-12 > div,
body.lk-client-area .lk-productdetails-page .module-client-area .col-lg-12 > div {
    border: 1px solid #e8edf6 !important;
    box-shadow: 0 10px 24px rgba(15, 23, 42, 0.04) !important;
}

body.lk-client-area .lk-productdetails-page .module-client-area .col-md-6:nth-child(4n+1) > div,
body.lk-client-area .lk-productdetails-page .module-client-area .col-sm-6:nth-child(4n+1) > div,
body.lk-client-area .lk-productdetails-page .module-client-area .col-lg-6:nth-child(4n+1) > div,
body.lk-client-area .lk-productdetails-page .module-client-area .col-md-12:nth-child(4n+1) > div,
body.lk-client-area .lk-productdetails-page .module-client-area .col-sm-12:nth-child(4n+1) > div,
body.lk-client-area .lk-productdetails-page .module-client-area .col-lg-12:nth-child(4n+1) > div {
    background: linear-gradient(180deg, #f7fbff 0%, #ffffff 100%) !important;
}

body.lk-client-area .lk-productdetails-page .module-client-area .col-md-6:nth-child(4n+2) > div,
body.lk-client-area .lk-productdetails-page .module-client-area .col-sm-6:nth-child(4n+2) > div,
body.lk-client-area .lk-productdetails-page .module-client-area .col-lg-6:nth-child(4n+2) > div,
body.lk-client-area .lk-productdetails-page .module-client-area .col-md-12:nth-child(4n+2) > div,
body.lk-client-area .lk-productdetails-page .module-client-area .col-sm-12:nth-child(4n+2) > div,
body.lk-client-area .lk-productdetails-page .module-client-area .col-lg-12:nth-child(4n+2) > div {
    background: linear-gradient(180deg, #f4fcf7 0%, #ffffff 100%) !important;
}

body.lk-client-area .lk-productdetails-page .module-client-area .col-md-6:nth-child(4n+3) > div,
body.lk-client-area .lk-productdetails-page .module-client-area .col-sm-6:nth-child(4n+3) > div,
body.lk-client-area .lk-productdetails-page .module-client-area .col-lg-6:nth-child(4n+3) > div,
body.lk-client-area .lk-productdetails-page .module-client-area .col-md-12:nth-child(4n+3) > div,
body.lk-client-area .lk-productdetails-page .module-client-area .col-sm-12:nth-child(4n+3) > div,
body.lk-client-area .lk-productdetails-page .module-client-area .col-lg-12:nth-child(4n+3) > div {
    background: linear-gradient(180deg, #fffaf4 0%, #ffffff 100%) !important;
}

body.lk-client-area .lk-productdetails-page .module-client-area .col-md-6:nth-child(4n+4) > div,
body.lk-client-area .lk-productdetails-page .module-client-area .col-sm-6:nth-child(4n+4) > div,
body.lk-client-area .lk-productdetails-page .module-client-area .col-lg-6:nth-child(4n+4) > div,
body.lk-client-area .lk-productdetails-page .module-client-area .col-md-12:nth-child(4n+4) > div,
body.lk-client-area .lk-productdetails-page .module-client-area .col-sm-12:nth-child(4n+4) > div,
body.lk-client-area .lk-productdetails-page .module-client-area .col-lg-12:nth-child(4n+4) > div {
    background: linear-gradient(180deg, #faf7ff 0%, #ffffff 100%) !important;
}

body.lk-client-area .lk-productdetails-page .module-client-area .col-md-6 > div > div:first-child,
body.lk-client-area .lk-productdetails-page .module-client-area .col-sm-6 > div > div:first-child,
body.lk-client-area .lk-productdetails-page .module-client-area .col-lg-6 > div > div:first-child,
body.lk-client-area .lk-productdetails-page .module-client-area .col-md-12 > div > div:first-child,
body.lk-client-area .lk-productdetails-page .module-client-area .col-sm-12 > div > div:first-child,
body.lk-client-area .lk-productdetails-page .module-client-area .col-lg-12 > div > div:first-child {
    background: transparent !important;
}


/* ============================================================
   CLIENT AREA PRODUCT DETAILS - Real homepage pastel bodies
   ============================================================ */
body.lk-client-area .lk-productdetails-page .module-client-area .col-md-6 > div,
body.lk-client-area .lk-productdetails-page .module-client-area .col-sm-6 > div,
body.lk-client-area .lk-productdetails-page .module-client-area .col-lg-6 > div,
body.lk-client-area .lk-productdetails-page .module-client-area .col-md-12 > div,
body.lk-client-area .lk-productdetails-page .module-client-area .col-sm-12 > div,
body.lk-client-area .lk-productdetails-page .module-client-area .col-lg-12 > div {
    box-shadow: 0 8px 18px rgba(15, 23, 42, 0.03) !important;
}

body.lk-client-area .lk-productdetails-page .module-client-area .col-md-6:nth-child(4n+1) > div,
body.lk-client-area .lk-productdetails-page .module-client-area .col-sm-6:nth-child(4n+1) > div,
body.lk-client-area .lk-productdetails-page .module-client-area .col-lg-6:nth-child(4n+1) > div,
body.lk-client-area .lk-productdetails-page .module-client-area .col-md-12:nth-child(4n+1) > div,
body.lk-client-area .lk-productdetails-page .module-client-area .col-sm-12:nth-child(4n+1) > div,
body.lk-client-area .lk-productdetails-page .module-client-area .col-lg-12:nth-child(4n+1) > div,
body.lk-client-area .lk-productdetails-page .module-client-area .col-md-6:nth-child(4n+1) > div > div:not(:first-child),
body.lk-client-area .lk-productdetails-page .module-client-area .col-sm-6:nth-child(4n+1) > div > div:not(:first-child),
body.lk-client-area .lk-productdetails-page .module-client-area .col-lg-6:nth-child(4n+1) > div > div:not(:first-child),
body.lk-client-area .lk-productdetails-page .module-client-area .col-md-12:nth-child(4n+1) > div > div:not(:first-child),
body.lk-client-area .lk-productdetails-page .module-client-area .col-sm-12:nth-child(4n+1) > div > div:not(:first-child),
body.lk-client-area .lk-productdetails-page .module-client-area .col-lg-12:nth-child(4n+1) > div > div:not(:first-child) {
    background: #eff5ff !important;
}

body.lk-client-area .lk-productdetails-page .module-client-area .col-md-6:nth-child(4n+2) > div,
body.lk-client-area .lk-productdetails-page .module-client-area .col-sm-6:nth-child(4n+2) > div,
body.lk-client-area .lk-productdetails-page .module-client-area .col-lg-6:nth-child(4n+2) > div,
body.lk-client-area .lk-productdetails-page .module-client-area .col-md-12:nth-child(4n+2) > div,
body.lk-client-area .lk-productdetails-page .module-client-area .col-sm-12:nth-child(4n+2) > div,
body.lk-client-area .lk-productdetails-page .module-client-area .col-lg-12:nth-child(4n+2) > div,
body.lk-client-area .lk-productdetails-page .module-client-area .col-md-6:nth-child(4n+2) > div > div:not(:first-child),
body.lk-client-area .lk-productdetails-page .module-client-area .col-sm-6:nth-child(4n+2) > div > div:not(:first-child),
body.lk-client-area .lk-productdetails-page .module-client-area .col-lg-6:nth-child(4n+2) > div > div:not(:first-child),
body.lk-client-area .lk-productdetails-page .module-client-area .col-md-12:nth-child(4n+2) > div > div:not(:first-child),
body.lk-client-area .lk-productdetails-page .module-client-area .col-sm-12:nth-child(4n+2) > div > div:not(:first-child),
body.lk-client-area .lk-productdetails-page .module-client-area .col-lg-12:nth-child(4n+2) > div > div:not(:first-child) {
    background: #eefaf3 !important;
}

body.lk-client-area .lk-productdetails-page .module-client-area .col-md-6:nth-child(4n+3) > div,
body.lk-client-area .lk-productdetails-page .module-client-area .col-sm-6:nth-child(4n+3) > div,
body.lk-client-area .lk-productdetails-page .module-client-area .col-lg-6:nth-child(4n+3) > div,
body.lk-client-area .lk-productdetails-page .module-client-area .col-md-12:nth-child(4n+3) > div,
body.lk-client-area .lk-productdetails-page .module-client-area .col-sm-12:nth-child(4n+3) > div,
body.lk-client-area .lk-productdetails-page .module-client-area .col-lg-12:nth-child(4n+3) > div,
body.lk-client-area .lk-productdetails-page .module-client-area .col-md-6:nth-child(4n+3) > div > div:not(:first-child),
body.lk-client-area .lk-productdetails-page .module-client-area .col-sm-6:nth-child(4n+3) > div > div:not(:first-child),
body.lk-client-area .lk-productdetails-page .module-client-area .col-lg-6:nth-child(4n+3) > div > div:not(:first-child),
body.lk-client-area .lk-productdetails-page .module-client-area .col-md-12:nth-child(4n+3) > div > div:not(:first-child),
body.lk-client-area .lk-productdetails-page .module-client-area .col-sm-12:nth-child(4n+3) > div > div:not(:first-child),
body.lk-client-area .lk-productdetails-page .module-client-area .col-lg-12:nth-child(4n+3) > div > div:not(:first-child) {
    background: #fff7ec !important;
}

body.lk-client-area .lk-productdetails-page .module-client-area .col-md-6:nth-child(4n+4) > div,
body.lk-client-area .lk-productdetails-page .module-client-area .col-sm-6:nth-child(4n+4) > div,
body.lk-client-area .lk-productdetails-page .module-client-area .col-lg-6:nth-child(4n+4) > div,
body.lk-client-area .lk-productdetails-page .module-client-area .col-md-12:nth-child(4n+4) > div,
body.lk-client-area .lk-productdetails-page .module-client-area .col-sm-12:nth-child(4n+4) > div,
body.lk-client-area .lk-productdetails-page .module-client-area .col-lg-12:nth-child(4n+4) > div,
body.lk-client-area .lk-productdetails-page .module-client-area .col-md-6:nth-child(4n+4) > div > div:not(:first-child),
body.lk-client-area .lk-productdetails-page .module-client-area .col-sm-6:nth-child(4n+4) > div > div:not(:first-child),
body.lk-client-area .lk-productdetails-page .module-client-area .col-lg-6:nth-child(4n+4) > div > div:not(:first-child),
body.lk-client-area .lk-productdetails-page .module-client-area .col-md-12:nth-child(4n+4) > div > div:not(:first-child),
body.lk-client-area .lk-productdetails-page .module-client-area .col-sm-12:nth-child(4n+4) > div > div:not(:first-child),
body.lk-client-area .lk-productdetails-page .module-client-area .col-lg-12:nth-child(4n+4) > div > div:not(:first-child) {
    background: #f5f0ff !important;
}

body.lk-client-area .lk-productdetails-page .module-client-area .col-md-6 > div > div:first-child,
body.lk-client-area .lk-productdetails-page .module-client-area .col-sm-6 > div > div:first-child,
body.lk-client-area .lk-productdetails-page .module-client-area .col-lg-6 > div > div:first-child,
body.lk-client-area .lk-productdetails-page .module-client-area .col-md-12 > div > div:first-child,
body.lk-client-area .lk-productdetails-page .module-client-area .col-sm-12 > div > div:first-child,
body.lk-client-area .lk-productdetails-page .module-client-area .col-lg-12 > div > div:first-child {
    background: rgba(255, 255, 255, 0.72) !important;
}


/* ============================================================
   CLIENT AREA PRODUCT DETAILS - Exact homepage card colors
   ============================================================ */
body.lk-client-area .lk-productdetails-page .module-client-area {
    background: transparent !important;
    border: 0 !important;
    padding: 0 !important;
}

body.lk-client-area .lk-productdetails-page .module-client-area > .row {
    display: flex !important;
    flex-wrap: wrap !important;
    gap: 18px !important;
    margin: 0 !important;
}

body.lk-client-area .lk-productdetails-page .module-client-area > .row > [class*='col-'] {
    padding: 0 !important;
    margin: 0 0 18px 0 !important;
}

body.lk-client-area .lk-productdetails-page .module-client-area > .row > [class*='col-'] > div {
    border: 1px solid #e6ebf5 !important;
    border-radius: 22px !important;
    overflow: hidden !important;
    box-shadow: 0 10px 24px rgba(15, 23, 42, 0.05) !important;
}

body.lk-client-area .lk-productdetails-page .module-client-area > .row > [class*='col-']:nth-child(1) > div {
    background: #eef4ff !important;
}

body.lk-client-area .lk-productdetails-page .module-client-area > .row > [class*='col-']:nth-child(2) > div {
    background: #ecfbf3 !important;
}

body.lk-client-area .lk-productdetails-page .module-client-area > .row > [class*='col-']:nth-child(3) > div {
    background: #fff5e9 !important;
}

body.lk-client-area .lk-productdetails-page .module-client-area > .row > [class*='col-']:nth-child(4) > div,
body.lk-client-area .lk-productdetails-page .module-client-area > .row > [class*='col-']:nth-child(5) > div,
body.lk-client-area .lk-productdetails-page .module-client-area > .row > [class*='col-']:nth-child(6) > div {
    background: #f5f0ff !important;
}

body.lk-client-area .lk-productdetails-page .module-client-area > .row > [class*='col-'] > div > div:first-child {
    padding: 20px 24px 14px !important;
    background: rgba(255,255,255,0.55) !important;
    border-bottom: 1px solid rgba(27, 37, 75, 0.08) !important;
}

body.lk-client-area .lk-productdetails-page .module-client-area > .row > [class*='col-'] > div > div:first-child h1,
body.lk-client-area .lk-productdetails-page .module-client-area > .row > [class*='col-'] > div > div:first-child h2,
body.lk-client-area .lk-productdetails-page .module-client-area > .row > [class*='col-'] > div > div:first-child h3,
body.lk-client-area .lk-productdetails-page .module-client-area > .row > [class*='col-'] > div > div:first-child h4 {
    margin: 0 !important;
    color: #1b254b !important;
    font-size: 15px !important;
    font-weight: 800 !important;
}

body.lk-client-area .lk-productdetails-page .module-client-area > .row > [class*='col-'] > div > div:not(:first-child) {
    padding: 24px !important;
    background: transparent !important;
}

body.lk-client-area .lk-productdetails-page .module-client-area > .row > [class*='col-'] strong,
body.lk-client-area .lk-productdetails-page .module-client-area > .row > [class*='col-'] b {
    color: #1b254b !important;
}

body.lk-client-area .lk-productdetails-page .module-client-area > .row > [class*='col-'] .text-muted,
body.lk-client-area .lk-productdetails-page .module-client-area > .row > [class*='col-'] small {
    color: #7f8aa8 !important;
}

body.lk-client-area .lk-productdetails-page .module-client-area > .row > [class*='col-'] .btn,
body.lk-client-area .lk-productdetails-page .module-client-area > .row > [class*='col-'] button,
body.lk-client-area .lk-productdetails-page .module-client-area > .row > [class*='col-'] input[type='submit'],
body.lk-client-area .lk-productdetails-page .module-client-area > .row > [class*='col-'] input[type='button'] {
    border-radius: 14px !important;
}

body.lk-client-area .lk-productdetails-page .module-client-area > .row > [class*='col-'] select,
body.lk-client-area .lk-productdetails-page .module-client-area > .row > [class*='col-'] .form-control {
    background: rgba(255,255,255,0.92) !important;
    border: 1px solid #dfe6f4 !important;
    border-radius: 14px !important;
}


/* ============================================================
   CLIENT AREA PRODUCT DETAILS - JS-targeted rebuilt module cards
   ============================================================ */
body.lk-client-area .lk-productdetails-page .lk-module-section {
    border: 1px solid #e6ebf5 !important;
    border-radius: 22px !important;
    overflow: hidden !important;
    box-shadow: 0 10px 24px rgba(15, 23, 42, 0.05) !important;
}

body.lk-client-area .lk-productdetails-page .lk-module-section--blue {
    background: #eef4ff !important;
}

body.lk-client-area .lk-productdetails-page .lk-module-section--green {
    background: #ecfbf3 !important;
}

body.lk-client-area .lk-productdetails-page .lk-module-section--orange {
    background: #fff5e9 !important;
}

body.lk-client-area .lk-productdetails-page .lk-module-section--purple {
    background: #f5f0ff !important;
}

body.lk-client-area .lk-productdetails-page .lk-module-section > div:first-child,
body.lk-client-area .lk-productdetails-page .lk-module-section .panel-heading:first-child {
    padding: 20px 24px 14px !important;
    background: rgba(255,255,255,0.56) !important;
    border-bottom: 1px solid rgba(27, 37, 75, 0.08) !important;
}

body.lk-client-area .lk-productdetails-page .lk-module-section > div:not(:first-child),
body.lk-client-area .lk-productdetails-page .lk-module-section .panel-body,
body.lk-client-area .lk-productdetails-page .lk-module-section .well,
body.lk-client-area .lk-productdetails-page .lk-module-section .content {
    background: transparent !important;
}

body.lk-client-area .lk-productdetails-page .lk-module-section h1,
body.lk-client-area .lk-productdetails-page .lk-module-section h2,
body.lk-client-area .lk-productdetails-page .lk-module-section h3,
body.lk-client-area .lk-productdetails-page .lk-module-section h4,
body.lk-client-area .lk-productdetails-page .lk-module-section .panel-title {
    color: #1b254b !important;
    font-weight: 800 !important;
}

body.lk-client-area .lk-productdetails-page .lk-home-btn-shape,
body.lk-client-area .lk-productdetails-page .lk-home-btn-shape.btn,
body.lk-client-area .lk-productdetails-page .lk-home-btn-shape.button,
body.lk-client-area .lk-productdetails-page .lk-home-btn-shape[type='submit'] {
    min-height: 42px !important;
    padding: 0 16px !important;
    border-radius: 14px !important;
    border-top-left-radius: 14px !important;
    border-top-right-radius: 14px !important;
    border-bottom-left-radius: 14px !important;
    border-bottom-right-radius: 14px !important;
}


/* ============================================================
   CLIENT AREA PRODUCT DETAILS - Rebuilt overview cards
   ============================================================ */
body.lk-client-area .lk-product-module-shell {
    margin-top: 18px;
}

body.lk-client-area .lk-product-module-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 20px;
}

body.lk-client-area .lk-product-module-card {
    border: 1px solid #e4ebf5;
    border-radius: 24px;
    overflow: hidden;
    box-shadow: 0 10px 24px rgba(15, 23, 42, 0.05);
}

body.lk-client-area .lk-product-module-card--blue { background: #eef4ff; }
body.lk-client-area .lk-product-module-card--green { background: #ecfbf3; }
body.lk-client-area .lk-product-module-card--orange { background: #fff5e9; }
body.lk-client-area .lk-product-module-card--purple { background: #f5f0ff; }

body.lk-client-area .lk-product-module-head {
    padding: 20px 24px 14px;
    background: rgba(255,255,255,0.56);
    border-bottom: 1px solid rgba(27, 37, 75, 0.08);
}

body.lk-client-area .lk-product-module-head h3 {
    margin: 0;
    font-size: 16px;
    font-weight: 800;
    color: #1b254b;
}

body.lk-client-area .lk-product-module-body {
    padding: 24px;
}

body.lk-client-area .lk-product-module-body--center {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    min-height: 250px;
    gap: 14px;
}

body.lk-client-area .lk-product-eyebrow {
    font-size: 13px;
    font-weight: 700;
    color: #5b6786;
}

body.lk-client-area .lk-product-title {
    font-size: 2rem;
    font-weight: 800;
    line-height: 1.05;
    color: #1b254b;
}

body.lk-client-area .lk-product-domain {
    font-size: 15px;
    font-weight: 700;
    color: #6656ff;
}

body.lk-client-area .lk-product-actions-inline {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    justify-content: center;
}

body.lk-client-area .lk-product-actions-inline--single {
    margin-top: 16px;
}

body.lk-client-area .lk-product-module-stats {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 14px;
    min-height: 250px;
    align-content: start;
}

body.lk-client-area .lk-product-stat {
    background: rgba(255,255,255,0.58);
    border: 1px solid rgba(27, 37, 75, 0.08);
    border-radius: 18px;
    padding: 18px;
    min-height: 132px;
}

body.lk-client-area .lk-product-stat-label {
    font-size: 11px;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: #919cb5;
}

body.lk-client-area .lk-product-stat-value {
    margin-top: 10px;
    font-size: 1.9rem;
    font-weight: 800;
    color: #1b254b;
}

body.lk-client-area .lk-product-stat-sub,
body.lk-client-area .lk-product-meta-note {
    margin-top: 6px;
    font-size: 13px;
    color: #7b86a3;
}

body.lk-client-area .lk-product-meta-note {
    grid-column: 1 / -1;
}

body.lk-client-area .lk-product-option-list {
    display: flex;
    flex-direction: column;
    gap: 12px;
    min-height: 250px;
}

body.lk-client-area .lk-product-option-item {
    display: flex;
    justify-content: space-between;
    gap: 12px;
    padding: 14px 16px;
    border-radius: 16px;
    background: rgba(255,255,255,0.58);
    border: 1px solid rgba(27, 37, 75, 0.08);
}

body.lk-client-area .lk-product-option-name {
    font-size: 13px;
    font-weight: 700;
    color: #1b254b;
}

body.lk-client-area .lk-product-option-value {
    font-size: 13px;
    color: #5a6786;
    text-align: right;
}

body.lk-client-area .lk-product-empty {
    min-height: 250px;
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    padding: 20px;
    border-radius: 18px;
    background: rgba(255,255,255,0.52);
    color: #6f7c98;
}

body.lk-client-area .lk-product-shortcuts {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 12px;
}

body.lk-client-area .lk-product-shortcut {
    display: flex;
    align-items: center;
    gap: 12px;
    min-height: 84px;
    padding: 16px;
    border-radius: 18px;
    background: rgba(255,255,255,0.58);
    border: 1px solid rgba(27, 37, 75, 0.08);
    text-decoration: none !important;
}

body.lk-client-area .lk-product-shortcut-icon {
    width: 44px;
    height: 44px;
    border-radius: 14px;
    background: #ffffff;
    color: #6656ff;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

body.lk-client-area .lk-product-shortcut-copy {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

body.lk-client-area .lk-product-shortcut-copy strong {
    font-size: 14px;
    font-weight: 700;
    color: #1b254b;
}

body.lk-client-area .lk-product-shortcut-copy small {
    font-size: 12px;
    color: #7f8aa8;
}

body.lk-client-area .lk-product-manage-note {
    padding: 18px 20px;
    border: 1px solid #e4ebf5;
    border-radius: 18px;
    background: #f7f9fd;
    color: #67748f;
    text-align: left;
}

@media (max-width: 991px) {
    body.lk-client-area .lk-product-module-grid,
    body.lk-client-area .lk-product-shortcuts,
    body.lk-client-area .lk-product-module-stats {
        grid-template-columns: 1fr;
    }

    body.lk-client-area .lk-product-option-item {
        flex-direction: column;
    }
}


/* ============================================================
   CLIENT AREA PRODUCT DETAILS - Refinement pass
   ============================================================ */
body.lk-client-area .lk-product-module-grid {
    align-items: stretch;
}

body.lk-client-area .lk-product-module-card {
    min-height: 0;
}

body.lk-client-area .lk-product-module-body--center {
    min-height: 180px;
    gap: 10px;
}

body.lk-client-area .lk-product-title {
    font-size: 1.8rem;
}

body.lk-client-area .lk-product-actions-inline .lk-lpanel-row-btn {
    min-height: 40px;
}

body.lk-client-area .lk-product-module-stats {
    min-height: 180px;
    align-content: stretch;
}

body.lk-client-area .lk-product-stat {
    min-height: 116px;
}

body.lk-client-area .lk-product-stat-value {
    font-size: 1.65rem;
}

body.lk-client-area .lk-product-option-list,
body.lk-client-area .lk-product-empty {
    min-height: 160px;
}

body.lk-client-area .lk-product-empty {
    border: 1px dashed rgba(27, 37, 75, 0.1);
    background: rgba(255,255,255,0.45);
}

body.lk-client-area .lk-product-shortcuts {
    align-content: start;
}

body.lk-client-area .lk-product-shortcut {
    min-height: 78px;
}

body.lk-client-area .lk-product-shortcut-icon {
    width: 40px;
    height: 40px;
}

body.lk-client-area .lk-product-shortcut-copy strong {
    font-size: 13px;
}

body.lk-client-area .lk-product-shortcut-copy small {
    line-height: 1.35;
}


/* ============================================================
   CLIENT AREA PRODUCT DETAILS - Hosting workspace layout
   ============================================================ */
body.lk-client-area .lk-hosting-workspace {
    display: flex;
    flex-direction: column;
    gap: 20px;
}

body.lk-client-area .lk-hosting-hero-card,
body.lk-client-area .lk-hosting-access-card,
body.lk-client-area .lk-hosting-category-card {
    border: 1px solid #dde6f4;
    border-radius: 26px;
    box-shadow: 0 12px 30px rgba(32, 46, 84, 0.05);
}

body.lk-client-area .lk-hosting-hero-card {
    padding: 24px 28px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 18px;
    background: linear-gradient(135deg, #edf4ff 0%, #f8fbff 100%);
}

body.lk-client-area .lk-hosting-access-card {
    background: linear-gradient(135deg, #ffffff 0%, #f7faff 100%);
}

body.lk-client-area .lk-hosting-category-card[data-category="cpanel"] {
    background: linear-gradient(135deg, #eef4ff 0%, #f8fbff 100%);
}

body.lk-client-area .lk-hosting-category-card[data-category="email"] {
    background: linear-gradient(135deg, #f5f0ff 0%, #fcf9ff 100%);
}

body.lk-client-area .lk-hosting-category-card[data-category="files"] {
    background: linear-gradient(135deg, #ecfff6 0%, #f8fffb 100%);
}

body.lk-client-area .lk-hosting-category-card[data-category="databases"] {
    background: linear-gradient(135deg, #fff8ec 0%, #fffdf8 100%);
}

body.lk-client-area .lk-hosting-category-card[data-category="domain"] {
    background: linear-gradient(135deg, #eef9f4 0%, #fbfffd 100%);
}

body.lk-client-area .lk-hosting-category-card[data-category="performance"] {
    background: linear-gradient(135deg, #f4f1ff 0%, #fcfbff 100%);
}

body.lk-client-area .lk-hosting-hero-badge {
    display: inline-flex;
    min-height: 30px;
    padding: 0 12px;
    align-items: center;
    border-radius: 999px;
    background: #ffffff;
    color: #4f61ff;
    border: 1px solid #dfe7f7;
    font-size: 12px;
    font-weight: 700;
}

body.lk-client-area .lk-hosting-hero-copy h2 {
    margin: 12px 0 4px;
    font-size: 2rem;
    font-weight: 800;
    color: #1b254b;
}

body.lk-client-area .lk-hosting-hero-copy p {
    margin: 0;
    color: #7f8aa8;
}

body.lk-client-area .lk-hosting-hero-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    justify-content: flex-end;
}

body.lk-client-area .lk-hosting-section-head {
    padding: 20px 24px 14px;
    border-bottom: 1px solid #edf1f7;
}

body.lk-client-area .lk-hosting-section-head h3 {
    margin: 0;
    font-size: 16px;
    font-weight: 800;
    color: #1b254b;
}

body.lk-client-area .lk-hosting-access-grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 14px;
    padding: 22px 24px 24px;
}

body.lk-client-area .lk-hosting-access-item {
    border-radius: 18px;
    background: rgba(255, 255, 255, 0.74);
    border: 1px solid #e4ebf5;
    padding: 16px;
}

body.lk-client-area .lk-hosting-access-label {
    display: block;
    font-size: 11px;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: #94a0bd;
    margin-bottom: 8px;
}

body.lk-client-area .lk-hosting-access-item strong {
    color: #1b254b;
}

body.lk-client-area .lk-hosting-category-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 20px;
}

body.lk-client-area .lk-hosting-action-list {
    padding: 18px 20px 20px;
    display: flex;
    flex-direction: column;
    gap: 12px;
}

body.lk-client-area .lk-hosting-action-item {
    display: grid;
    grid-template-columns: 44px minmax(0, 1fr) auto;
    gap: 12px;
    align-items: center;
    border: 1px solid #e3eaf5;
    border-radius: 18px;
    padding: 14px 16px;
    text-decoration: none !important;
    background: rgba(255, 255, 255, 0.88);
}

body.lk-client-area .lk-hosting-action-item:hover {
    border-color: #cfd9ef;
    background: #ffffff;
    transform: translateY(-1px);
}

body.lk-client-area .lk-hosting-action-icon {
    width: 44px;
    height: 44px;
    border-radius: 14px;
    background: #ffffff;
    color: #4f61ff;
    border: 1px solid #e2e9f5;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

body.lk-client-area .lk-hosting-action-copy {
    display: flex;
    flex-direction: column;
    gap: 4px;
    min-width: 0;
}

body.lk-client-area .lk-hosting-action-copy strong {
    color: #1b254b;
    font-size: 14px;
    font-weight: 700;
}

body.lk-client-area .lk-hosting-action-copy small {
    color: #7f8aa8;
    font-size: 12px;
}

body.lk-client-area .lk-hosting-action-btn {
    min-height: 34px;
    padding: 0 16px;
    border-radius: 12px;
    border: none !important;
    background: linear-gradient(90deg, #5d53ff 0%, #6d64ff 100%) !important;
    background-color: #6656ff !important;
    color: #ffffff !important;
    -webkit-text-fill-color: #ffffff !important;
    font-size: 12px;
    font-weight: 700;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    transition: box-shadow .15s, transform .1s;
    box-shadow: 0 2px 8px rgba(102,86,255,.25) !important;
}

body.lk-client-area .lk-hosting-action-item:hover .lk-hosting-action-btn {
    background: linear-gradient(90deg, #5147f0 0%, #6258f5 100%) !important;
    box-shadow: 0 4px 12px rgba(102,86,255,.35) !important;
    transform: translateY(-1px);
    color: #ffffff !important;
    -webkit-text-fill-color: #ffffff !important;
}

body.lk-client-area .lk-hosting-empty {
    min-height: 74px;
    border: 1px dashed #d7e1f0;
    border-radius: 16px;
    background: rgba(255, 255, 255, 0.72);
    color: #8692ad;
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    padding: 16px;
}

@media (max-width: 991px) {
    body.lk-client-area .lk-hosting-hero-card,
    body.lk-client-area .lk-hosting-access-grid,
    body.lk-client-area .lk-hosting-category-grid {
        grid-template-columns: 1fr;
    }

    body.lk-client-area .lk-hosting-hero-card {
        flex-direction: column;
        align-items: flex-start;
    }

    body.lk-client-area .lk-hosting-action-item {
        grid-template-columns: 44px minmax(0, 1fr);
    }

    body.lk-client-area .lk-hosting-action-btn {
        grid-column: 1 / -1;
        width: 100%;
    }
}


/* ============================================================
   CLIENT AREA SERVICES - Tighter centered layout
   ============================================================ */
body.lk-client-area .lk-services-toolbar,
body.lk-client-area .lk-services-list {
    max-width: 1240px;
    margin-left: auto;
    margin-right: auto;
}

body.lk-client-area .lk-services-toolbar {
    margin-bottom: 10px;
    padding: 0 14px;
}

body.lk-client-area .lk-services-list {
    padding: 10px 12px;
}

body.lk-client-area .lk-services-list .lk-list-item {
    gap: 14px;
    padding: 14px 16px;
    border-radius: 18px;
    margin: 0 0 8px;
    border: 1px solid #e8edf7;
    background: #ffffff;
}

body.lk-client-area .lk-services-list .lk-list-item:last-child {
    margin-bottom: 0;
}

body.lk-client-area .lk-services-list .lk-list-main {
    flex: 1 1 360px;
    min-width: 220px;
}

body.lk-client-area .lk-services-list .lk-list-prix {
    flex: 0 0 100px;
    min-width: 100px;
}

body.lk-client-area .lk-services-list .lk-list-plan {
    flex: 0 0 80px;
    min-width: 80px;
}

body.lk-client-area .lk-services-list .lk-list-prix .lk-list-price {
    font-weight: 700;
    color: #22304d;
    font-size: 13px;
}

body.lk-client-area .lk-services-list .lk-list-plan .lk-list-cycle {
    font-size: 12px;
    color: #8a96b3;
    font-weight: 500;
}

body.lk-client-area .lk-services-list .lk-list-due {
    flex: 0 0 210px;
    min-width: 180px;
    text-align: left;
}

body.lk-client-area .lk-services-list .lk-list-due-date {
    white-space: normal;
    line-height: 1.4;
    font-size: 12px;
}

body.lk-client-area .lk-services-list .lk-list-status {
    flex: 0 0 130px;
    min-width: 130px;
    display: flex;
    justify-content: flex-start;
}

body.lk-client-area .lk-services-list .lk-list-action {
    flex: 0 0 300px;
    min-width: 300px;
    display: flex;
    justify-content: flex-end;
}

body.lk-client-area .lk-services-list .lk-list-action .btn {
    min-width: 132px;
    text-align: center;
}

body.lk-client-area .lk-services-status-pills {
    box-shadow: 0 8px 18px rgba(31, 45, 79, 0.04);
}

@media (max-width: 1200px) {
    body.lk-client-area .lk-services-toolbar,
    body.lk-client-area .lk-services-list {
        max-width: none;
    }
}

@media (max-width: 992px) {
    body.lk-client-area .lk-services-toolbar {
        padding: 0;
    }

    body.lk-client-area .lk-services-list {
        padding: 8px 0;
    }

    body.lk-client-area .lk-services-list .lk-list-item {
        gap: 12px;
    }

    body.lk-client-area .lk-services-list .lk-list-prix,
    body.lk-client-area .lk-services-list .lk-list-plan,
    body.lk-client-area .lk-services-list .lk-list-due,
    body.lk-client-area .lk-services-list .lk-list-status {
        min-width: auto;
        flex-basis: auto;
    }
}


/* ── Webmail grisé (service sans domaine) ──────────────────────────────── */
body.lk-client-area .lk-quick-btn--disabled {
    opacity: 0.35;
    cursor: default;
    pointer-events: none;
}


/* ============================================================
   CLIENT AREA HOME - Centered dashboard spacing test
   ============================================================ */
body.lk-client-area .lk-lpanel-home {
    max-width: 1240px;
    margin: 0 auto;
}

body.lk-client-area .lk-lpanel-top,
body.lk-client-area .lk-lpanel-actions,
body.lk-client-area .lk-lpanel-library {
    padding-left: 22px;
    padding-right: 22px;
}

body.lk-client-area .lk-lpanel-top {
    padding-top: 22px;
    padding-bottom: 22px;
}

body.lk-client-area .lk-lpanel-actions {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 14px;
}

body.lk-client-area .lk-lpanel-library {
    padding-top: 20px;
    padding-bottom: 20px;
}

body.lk-client-area .lk-lpanel-stats {
    gap: 12px;
}

body.lk-client-area .lk-lpanel-stat {
    min-height: 120px;
}

body.lk-client-area .lk-lpanel-action-card {
    min-height: 184px;
}

body.lk-client-area .lk-lpanel-library-head {
    padding-right: 0;
}

body.lk-client-area .lk-lpanel-table-head {
    padding-left: 8px;
    padding-right: 8px;
}

body.lk-client-area .lk-lpanel-table-row {
    padding-left: 8px;
    padding-right: 8px;
}

body.lk-client-area .lk-lpanel-table-row--services,
body.lk-client-area .lk-lpanel-table-head--services {
    grid-template-columns: minmax(0, 1.3fr) minmax(150px, 0.9fr) 110px 164px;
}

body.lk-client-area .lk-lpanel-table-row--domains,
body.lk-client-area .lk-lpanel-table-head--domains {
    grid-template-columns: minmax(0, 1.35fr) minmax(150px, 0.9fr) 110px 164px;
}

body.lk-client-area .lk-lpanel-action-cell {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 6px;
}

@media (max-width: 1280px) {
    body.lk-client-area .lk-lpanel-home {
        max-width: none;
    }
}

@media (max-width: 920px) {
    body.lk-client-area .lk-lpanel-top,
    body.lk-client-area .lk-lpanel-actions,
    body.lk-client-area .lk-lpanel-library {
        padding-left: 16px;
        padding-right: 16px;
    }

    body.lk-client-area .lk-lpanel-table-row {
        padding-left: 0;
        padding-right: 0;
    }
}


/* ============================================================
   CLIENT AREA - Shared content width alignment
   ============================================================ */
body.lk-client-area .lk-content-width,
body.lk-client-area .lk-lpanel-home,
body.lk-client-area .lk-services-toolbar,
body.lk-client-area .lk-services-list {
    max-width: 1240px;
    margin-left: auto;
    margin-right: auto;
}

body.lk-client-area .lk-lpanel-top,
body.lk-client-area .lk-lpanel-actions,
body.lk-client-area .lk-lpanel-library,
body.lk-client-area .lk-services-toolbar,
body.lk-client-area .lk-services-list {
    box-sizing: border-box;
}

@media (max-width: 1280px) {
    body.lk-client-area .lk-content-width,
    body.lk-client-area .lk-lpanel-home,
    body.lk-client-area .lk-services-toolbar,
    body.lk-client-area .lk-services-list {
        max-width: none;
    }
}


/* ============================================================
   CLIENT AREA SERVICES - Match homepage outer width exactly
   ============================================================ */
body.lk-client-area .lk-services-toolbar,
body.lk-client-area .lk-services-list {
    width: calc(100% - 32px);
}

body.lk-client-area .lk-services-list {
    padding-left: 0;
    padding-right: 0;
    border-radius: 24px;
}

body.lk-client-area .lk-services-list .lk-list-item {
    margin-left: 12px;
    margin-right: 12px;
}

@media (max-width: 920px) {
    body.lk-client-area .lk-services-toolbar,
    body.lk-client-area .lk-services-list {
        width: 100%;
    }

    body.lk-client-area .lk-services-list .lk-list-item {
        margin-left: 0;
        margin-right: 0;
    }
}


/* ============================================================
   CLIENT AREA SERVICES - Final width match with homepage
   ============================================================ */
body.lk-client-area .lk-services-toolbar,
body.lk-client-area .lk-services-list {
    max-width: 1240px !important;
    width: 100% !important;
    margin-left: auto !important;
    margin-right: auto !important;
}

body.lk-client-area .lk-services-list {
    padding-left: 8px !important;
    padding-right: 8px !important;
}

body.lk-client-area .lk-services-list .lk-list-item {
    margin-left: 0 !important;
    margin-right: 0 !important;
}

body.lk-client-area .lk-services-toolbar {
    padding-left: 8px !important;
    padding-right: 8px !important;
}

@media (max-width: 920px) {
    body.lk-client-area .lk-services-list,
    body.lk-client-area .lk-services-toolbar {
        padding-left: 0 !important;
        padding-right: 0 !important;
    }
}


/* ============================================================
   CLIENT AREA SERVICES - Micro width correction
   ============================================================ */
body.lk-client-area .lk-services-toolbar,
body.lk-client-area .lk-services-list {
    max-width: 1264px !important;
}


/* ============================================================
   CLIENT AREA TABLE PAGES - Domains, invoices, tickets aligned
   ============================================================ */
body.lk-client-area .lk-domains-toolbar,
body.lk-client-area .lk-invoices-toolbar,
body.lk-client-area .lk-tickets-toolbar,
body.lk-client-area .lk-domains-page .lk-table-shell,
body.lk-client-area .lk-invoices-page .lk-table-shell,
body.lk-client-area .lk-tickets-page .lk-table-shell {
    max-width: 1264px;
    width: 100%;
    margin-left: auto;
    margin-right: auto;
}

body.lk-client-area .lk-domains-toolbar,
body.lk-client-area .lk-invoices-toolbar,
body.lk-client-area .lk-tickets-toolbar {
    display: flex;
    justify-content: flex-end;
    align-items: center;
    gap: 14px;
    flex-wrap: wrap;
    margin-bottom: 12px;
}

body.lk-client-area .lk-domains-toolbar {
    justify-content: space-between;
}

body.lk-client-area .lk-invoices-status-pills,
body.lk-client-area .lk-tickets-status-pills {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 6px;
    border-radius: 16px;
    background: #f5f7fc;
    border: 1px solid #e4eaf4;
    box-shadow: 0 8px 18px rgba(31, 45, 79, 0.04);
}

body.lk-client-area .lk-invoices-status-pill,
body.lk-client-area .lk-tickets-status-pill {
    min-height: 38px;
    padding: 0 14px;
    border: 0;
    border-radius: 12px;
    background: transparent;
    color: #7d88a6;
    font-size: 13px;
    font-weight: 700;
    display: inline-flex;
    align-items: center;
    gap: 8px;
}

body.lk-client-area .lk-invoices-status-pill span,
body.lk-client-area .lk-tickets-status-pill span,
body.lk-client-area .lk-domains-status-pill span,
body.lk-client-area .lk-lpanel-tab span {
    display: inline-flex;
    min-width: 20px;
    height: 20px;
    padding: 0 6px;
    align-items: center;
    justify-content: center;
    border-radius: 999px;
    background: rgba(93, 83, 255, 0.08);
    color: #5d53ff;
    font-size: 11px;
    font-weight: 800;
}


/* ============================================================
   CLIENT AREA SERVICES - Toolbar with search
   ============================================================ */
body.lk-client-area .lk-services-toolbar--with-search {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    flex-wrap: wrap;
}

body.lk-client-area .lk-services-search-wrap {
    flex: 0 0 auto;
}

body.lk-client-area .lk-lpanel-search-input {
    height: 38px;
    padding: 0 14px 0 36px;
    border: 1px solid #e4eaf4;
    border-radius: 12px;
    background: #ffffff url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='none' stroke='%23a3aed0' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='11' cy='11' r='8'/%3E%3Cpath d='m21 21-4.35-4.35'/%3E%3C/svg%3E") no-repeat 12px center;
    font-size: 13px;
    color: #1b254b;
    outline: none;
    width: 220px;
    transition: border-color .15s, box-shadow .15s;
}

body.lk-client-area .lk-lpanel-search-input:focus {
    border-color: #c5beff;
    box-shadow: 0 0 0 3px rgba(102,86,255,.10);
}

body.lk-client-area .lk-lpanel-search-input::placeholder {
    color: #a3aed0;
}

@media (max-width: 640px) {
    body.lk-client-area .lk-services-toolbar--with-search {
        flex-direction: column;
        align-items: stretch;
    }
    body.lk-client-area .lk-services-search-wrap,
    body.lk-client-area .lk-lpanel-search-input {
        width: 100%;
    }
}


/* ============================================================
   CLIENT AREA SERVICES - Column headers (sort)
   ============================================================ */
body.lk-client-area .lk-services-col-head {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 6px 16px 8px;
    margin: 0 0 2px;
    border-bottom: 1px solid #edf1f7;
}

body.lk-client-area .lk-services-col-head .lk-sch-spacer {
    flex: 0 0 38px;
    min-width: 38px;
}

body.lk-client-area .lk-services-col-head .lk-sch-main {
    flex: 1 1 360px;
    min-width: 220px;
}

body.lk-client-area .lk-services-col-head .lk-sch-prix {
    flex: 0 0 100px;
    min-width: 100px;
}

body.lk-client-area .lk-services-col-head .lk-sch-plan {
    flex: 0 0 80px;
    min-width: 80px;
}

body.lk-client-area .lk-services-col-head .lk-sch-due {
    flex: 0 0 210px;
    min-width: 180px;
    text-align: left;
}

body.lk-client-area .lk-services-col-head .lk-sch-status {
    flex: 0 0 130px;
    min-width: 130px;
}

body.lk-client-area .lk-services-col-head .lk-sch-action {
    flex: 0 0 300px;
    min-width: 300px;
}

body.lk-client-area .lk-svc-sort-btn {
    background: none;
    border: none;
    padding: 0;
    font-family: inherit;
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .04em;
    color: #a3aed0;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    gap: 5px;
    transition: color .15s;
    white-space: nowrap;
}

body.lk-client-area .lk-svc-sort-btn:hover {
    color: #1b254b;
}

body.lk-client-area .lk-svc-sort-btn.is-sorted-asc,
body.lk-client-area .lk-svc-sort-btn.is-sorted-desc {
    color: #6656ff;
}

body.lk-client-area .lk-svc-sort-btn .lk-sort-icon {
    font-size: 10px;
    opacity: .5;
    transition: transform .2s, opacity .2s;
}

body.lk-client-area .lk-svc-sort-btn.is-sorted-asc .lk-sort-icon {
    transform: rotate(180deg);
    opacity: 1;
}

body.lk-client-area .lk-svc-sort-btn.is-sorted-desc .lk-sort-icon {
    opacity: 1;
}

/* Hide column headers on narrow screens (same breakpoint as meta/due/status collapse) */
@media (max-width: 768px) {
    body.lk-client-area .lk-services-col-head {
        display: none;
    }
}

body.lk-client-area .lk-invoices-status-pill.is-active,
body.lk-client-area .lk-invoices-status-pill:hover,
body.lk-client-area .lk-tickets-status-pill.is-active,
body.lk-client-area .lk-tickets-status-pill:hover {
    background: #ffffff;
    color: #1b254b;
    box-shadow: 0 4px 10px rgba(15, 23, 42, 0.06);
}

body.lk-client-area .lk-domains-page .lk-table-shell .table-container,
body.lk-client-area .lk-invoices-page .lk-table-shell .table-container,
body.lk-client-area .lk-tickets-page .lk-table-shell .table-container {
    padding-left: 8px;
    padding-right: 8px;
    padding-bottom: 16px;
    overflow: visible !important;
}

@media (max-width: 920px) {
    body.lk-client-area .lk-domains-toolbar,
    body.lk-client-area .lk-invoices-toolbar,
    body.lk-client-area .lk-tickets-toolbar {
        justify-content: flex-start;
    }

    body.lk-client-area .lk-domains-status-pills,
    body.lk-client-area .lk-invoices-status-pills,
    body.lk-client-area .lk-tickets-status-pills {
        width: 100%;
        overflow-x: auto;
    }

    body.lk-client-area .lk-domains-page .lk-table-shell .table-container,
    body.lk-client-area .lk-invoices-page .lk-table-shell .table-container,
    body.lk-client-area .lk-tickets-page .lk-table-shell .table-container {
        padding-left: 0;
        padding-right: 0;
    }
}


/* ============================================================
   CLIENT AREA TABLE ACTIONS - Invoices and tickets
   ============================================================ */
body.lk-client-area .lk-table-actions {
    display: inline-flex;
    align-items: center;
    justify-content: flex-end;
    gap: 8px;
    flex-wrap: wrap;
}

body.lk-client-area .lk-table-action-primary {
    min-width: 92px;
}

body.lk-client-area .lk-table-action-secondary {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 38px;
    padding: 0 14px;
    border-radius: 12px;
    border: 1px solid #d8e0ee;
    background: #ffffff;
    color: #55627f !important;
    text-decoration: none !important;
    font-size: 12px;
    font-weight: 700;
}

body.lk-client-area .lk-table-action-secondary:hover {
    border-color: #cbd6e8;
    background: #fbfcff;
    color: #22304d !important;
}

body.lk-client-area .lk-invoices-page .table.table-list th:last-child,
body.lk-client-area .lk-invoices-page .table.table-list td:last-child,
body.lk-client-area .lk-tickets-page .table.table-list th:last-child,
body.lk-client-area .lk-tickets-page .table.table-list td:last-child {
    text-align: right;
}

@media (max-width: 920px) {
    body.lk-client-area .lk-table-actions {
        justify-content: flex-start;
    }
}


/* ============================================================
   CLIENT AREA DOMAINS - Match services actions and lighter rows
   ============================================================ */
body.lk-client-area .lk-domains-page .table-container {
    background: #ffffff;
}

body.lk-client-area .lk-domains-page .table.table-list tbody tr:hover {
    background: #fcfdff !important;
}

body.lk-client-area .lk-domains-page .table.table-list tbody td {
    background: transparent !important;
}

body.lk-client-area .lk-domain-actions {
    gap: 6px;
}

/* ── Dropdown domaines : évite le clipping par les conteneurs parents ── */
body.lk-client-area .lk-domains-page .lk-domains-section,
body.lk-client-area .lk-domains-page #tableDomainsList_wrapper,
body.lk-client-area .lk-domains-page .dataTables_wrapper,
body.lk-client-area .lk-domains-page table.dataTable tbody tr {
    overflow: visible !important;
}

body.lk-client-area .lk-domain-manage-btn {
    min-width: 132px;
    padding: 0 14px !important;
    justify-content: center !important;
}

body.lk-client-area .lk-domain-manage-btn i {
    display: none !important;
}

body.lk-client-area .lk-domain-manage-btn span {
    color: #ffffff !important;
    -webkit-text-fill-color: #ffffff !important;
}

body.lk-client-area .lk-domain-more-btn {
    width: 38px;
    min-width: 38px;
    background: #ffffff !important;
    background-image: none !important;
    border: 1px solid #d8e0ee !important;
    color: #55627f !important;
    -webkit-text-fill-color: #55627f !important;
    box-shadow: none !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
}

body.lk-client-area .lk-domain-more-btn:hover {
    background: #fbfcff !important;
    border-color: #cbd6e8 !important;
    color: #22304d !important;
    -webkit-text-fill-color: #22304d !important;
}

body.lk-client-area .lk-domain-more-chev {
    width: 18px;
    height: 18px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

body.lk-client-area .lk-domain-more-chev i {
    font-size: 12px !important;
    color: currentColor !important;
    -webkit-text-fill-color: currentColor !important;
}


/* ============================================================
   CLIENT AREA DOMAINS - Search aligned left of status filters
   ============================================================ */
body.lk-client-area .lk-domains-toolbar-right {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 12px;
    flex-wrap: wrap;
}

body.lk-client-area .lk-domains-search {
    min-width: 260px;
}

body.lk-client-area .lk-domains-search .dataTables_filter {
    margin: 0 !important;
    float: none !important;
}

body.lk-client-area .lk-domains-search .dataTables_filter label {
    margin: 0 !important;
    width: 100%;
}

body.lk-client-area .lk-domains-search-input {
    width: 260px !important;
    max-width: 100%;
    min-height: 38px;
    padding: 0 14px !important;
    border-radius: 12px !important;
    border: 1px solid #d8e0ee !important;
    background: #ffffff !important;
    color: #22304d !important;
    box-shadow: none !important;
}

body.lk-client-area .lk-domains-search-input:focus {
    border-color: #c6d3e8 !important;
    box-shadow: 0 0 0 3px rgba(93, 83, 255, 0.08) !important;
}

@media (max-width: 920px) {
    body.lk-client-area .lk-domains-toolbar-right {
        width: 100%;
        justify-content: flex-start;
    }

    body.lk-client-area .lk-domains-search {
        width: 100%;
    }

    body.lk-client-area .lk-domains-search-input {
        width: 100% !important;
    }
}


/* ============================================================
   CLIENT AREA DOMAINS - Remove gray data table surfaces
   ============================================================ */
body.lk-client-area .lk-domains-page .lk-table-shell,
body.lk-client-area .lk-domains-page .table-container,
body.lk-client-area .lk-domains-page .dataTables_wrapper,
body.lk-client-area .lk-domains-page .dataTables_scroll,
body.lk-client-area .lk-domains-page .dataTables_scrollHead,
body.lk-client-area .lk-domains-page .dataTables_scrollHeadInner,
body.lk-client-area .lk-domains-page .dataTables_scrollBody,
body.lk-client-area .lk-domains-page table.dataTable,
body.lk-client-area .lk-domains-page table.dataTable thead,
body.lk-client-area .lk-domains-page table.dataTable tbody {
    background: #ffffff !important;
}

body.lk-client-area .lk-domains-page .dataTables_scrollBody {
    border-radius: 18px;
}

body.lk-client-area .lk-domains-page .table.table-list thead th {
    background: #ffffff !important;
    overflow: hidden;
    max-width: 140px;
}

body.lk-client-area .lk-domains-page .table.table-list tbody tr {
    background: #ffffff !important;
}

body.lk-client-area .lk-domains-page .table.table-list tbody tr:nth-child(even) {
    background: #ffffff !important;
}

body.lk-client-area .lk-domains-page .dataTables_length,
body.lk-client-area .lk-domains-page .dataTables_info,
body.lk-client-area .lk-domains-page .dataTables_paginate {
    background: transparent !important;
}


/* ============================================================
   CLIENT AREA TABLE PAGINATION - lpanel style
   ============================================================ */
body.lk-client-area .dataTables_paginate {
    display: inline-flex !important;
    align-items: center;
    gap: 6px;
    padding: 6px;
    border-radius: 16px;
    background: #f5f7fc !important;
    border: 1px solid #e4eaf4;
    box-shadow: 0 8px 18px rgba(31, 45, 79, 0.04);
}

body.lk-client-area .dataTables_paginate .paginate_button {
    min-height: 36px;
    min-width: 36px;
    padding: 0 14px !important;
    border: 0 !important;
    border-radius: 12px !important;
    background: transparent !important;
    color: #6656ff !important;
    font-size: 13px !important;
    font-weight: 700 !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    box-shadow: none !important;
}

body.lk-client-area .dataTables_paginate .paginate_button:hover {
    background: #f0eeff !important;
    color: #5147f0 !important;
}

body.lk-client-area .dataTables_paginate .paginate_button.current,
body.lk-client-area .dataTables_paginate .paginate_button.current:hover {
    background: linear-gradient(135deg, #7b6dff 0%, #6656ff 100%) !important;
    color: #ffffff !important;
    box-shadow: 0 4px 10px rgba(102, 86, 255, 0.30) !important;
}

body.lk-client-area .dataTables_paginate .paginate_button.disabled,
body.lk-client-area .dataTables_paginate .paginate_button.disabled:hover {
    opacity: 0.45;
    background: transparent !important;
    color: #98a4bf !important;
    cursor: default !important;
}

body.lk-client-area .dataTables_paginate .ellipsis {
    color: #98a4bf;
    padding: 0 4px;
}


/* ============================================================
   CLIENT AREA DOMAINS - Tighten top space and group info with pager
   ============================================================ */
body.lk-client-area .lk-domains-page .dataTables_scrollBody {
    height: auto !important;
    max-height: none !important;
    min-height: 0 !important;
}

body.lk-client-area .lk-domains-page .dataTables_wrapper > .row:last-child {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
}

body.lk-client-area .lk-domains-page .dataTables_wrapper > .row:last-child::before,
body.lk-client-area .lk-domains-page .dataTables_wrapper > .row:last-child::after {
    display: none !important;
}

body.lk-client-area .lk-domains-page .dataTables_wrapper > .row:last-child > [class*='col-'] {
    float: none !important;
    width: auto !important;
}

body.lk-client-area .lk-domains-page .dataTables_info {
    order: 2;
    margin: 0 10px 0 0 !important;
    color: #7d88a6 !important;
    font-size: 13px !important;
    font-weight: 700 !important;
}

body.lk-client-area .lk-domains-page .dataTables_paginate {
    order: 3;
}

body.lk-client-area .lk-domains-page .dataTables_length {
    order: 1;
    margin-right: auto;
}

body.lk-client-area .lk-domains-page .dataTables_paginate .paginate_button {
    color: #5d53ff !important;
}

body.lk-client-area .lk-domains-page .dataTables_paginate .paginate_button:hover,
body.lk-client-area .lk-domains-page .dataTables_paginate .paginate_button.current,
body.lk-client-area .lk-domains-page .dataTables_paginate .paginate_button.current:hover {
    color: #1b254b !important;
}

@media (max-width: 920px) {
    body.lk-client-area .lk-domains-page .dataTables_wrapper > .row:last-child {
        flex-wrap: wrap;
    }

    body.lk-client-area .lk-domains-page .dataTables_length {
        margin-right: 0;
    }
}


/* ============================================================
   CLIENT AREA DETAIL PAGES - lpanel style continuity
   ============================================================ */
body.lk-client-area .domain-previw-box,
body.lk-client-area .domains-dotoday,
body.lk-client-area #tabNameservers .bg-seccolorstyle.bg-white,
body.lk-client-area #tabAutorenew,
body.lk-client-area #tabReglock,
body.lk-client-area #tabEmailForwarding,
body.lk-client-area #tabManageDns,
body.lk-client-area #tabIDProtection,
body.lk-client-area #tabContactInformation,
body.lk-client-area #tabGetEPPCode,
body.lk-client-area .ticket-reply,
body.lk-client-area #frmReply,
body.lk-client-area .panel.panel-info.panel-collapsable,
body.lk-client-area .panel.visible-print-block,
body.lk-client-area .panel.panel-default,
body.lk-client-area .panel.panel-success,
body.lk-client-area .transactions-container,
body.lk-client-area .invoice-container .panel,
body.lk-client-area .invoice-container .table-responsive,
body.lk-client-area .clientareaaddfunds .panel,
body.lk-client-area .panel.panel-default,
body.lk-client-area .panel.panel-info,
body.lk-client-area .panel.panel-success,
body.lk-client-area .supportticketsubmit .service-section,
body.lk-client-area .lk-ticket-department-card {
    background: #ffffff !important;
    border: 1px solid #e6ebf5 !important;
    border-radius: 22px !important;
    box-shadow: 0 10px 24px rgba(15, 23, 42, 0.05) !important;
}

body.lk-client-area .domain-previw-box,
body.lk-client-area .ticket-reply,
body.lk-client-area .panel.panel-info.panel-collapsable,
body.lk-client-area .panel.visible-print-block,
body.lk-client-area .clientareaaddfunds .panel,
body.lk-client-area .supportticketsubmit .service-section,
body.lk-client-area .lk-ticket-department-card {
    overflow: hidden;
}

body.lk-client-area .domain-previw-box .bg-seccolorstyle.bg-white,
body.lk-client-area .domains-dotoday,
body.lk-client-area #tabAutorenew,
body.lk-client-area #tabNameservers .bg-seccolorstyle.bg-white,
body.lk-client-area .ticket-reply .message,
body.lk-client-area .ticket-reply .user,
body.lk-client-area .panel .panel-heading,
body.lk-client-area .panel .panel-body,
body.lk-client-area .panel .panel-footer {
    background: transparent !important;
    border-color: #edf1f7 !important;
}

body.lk-client-area .ticket-reply .message,
body.lk-client-area .ticket-reply .user,
body.lk-client-area .panel .panel-heading,
body.lk-client-area .panel .panel-body,
body.lk-client-area .panel .panel-footer {
    color: #22304d !important;
}

body.lk-client-area .panel .panel-heading h3,
body.lk-client-area .ticket-reply .name,
body.lk-client-area .ticket-reply .date,
body.lk-client-area .ticket-reply .type,
body.lk-client-area .domain-main-info,
body.lk-client-area .overview-box span,
body.lk-client-area .clientareaaddfunds strong {
    color: #22304d !important;
}

body.lk-client-area .ticket-reply .message,
body.lk-client-area .ticket-reply .attachments,
body.lk-client-area .ticket-reply .attachments a,
body.lk-client-area .overview-box i,
body.lk-client-area .panel .help-block,
body.lk-client-area .panel small,
body.lk-client-area .clientareaaddfunds td {
    color: #7f8aa8 !important;
}

body.lk-client-area .ticket-reply {
    border-radius: 22px !important;
    margin-bottom: 16px;
}

body.lk-client-area .ticket-reply .user {
    padding: 18px 20px;
    border-bottom: 1px solid #edf1f7;
}

body.lk-client-area .ticket-reply .message {
    padding: 20px;
}

body.lk-client-area #frmReply,
body.lk-client-area .clientareaaddfunds .panel-body,
body.lk-client-area .domain-previw-box,
body.lk-client-area .domains-dotoday,
body.lk-client-area #tabAutorenew,
body.lk-client-area #tabNameservers .bg-seccolorstyle.bg-white {
    padding: 20px;
}

body.lk-client-area .clientareaaddfunds .panel table {
    margin-bottom: 0;
}

body.lk-client-area .clientareaaddfunds .table-striped > tbody > tr:nth-of-type(odd) {
    background: #fbfcff;
}

body.lk-client-area .supportticketssubmit .lk-ticket-department-card,
body.lk-client-area .lk-ticket-department-card {
    padding: 20px 18px !important;
}

body.lk-client-area .supportticketssubmit .lk-ticket-department-pill,
body.lk-client-area .lk-ticket-department-pill {
    background: #f5f7fc !important;
    border: 1px solid #e4eaf4;
    color: #7d88a6 !important;
}


/* ============================================================
   CLIENT AREA - Global lpanel content width pass
   ============================================================ */
body.lk-client-area #main-body .main-content > .row > [class*='col-'] > .lk-table-shell,
body.lk-client-area #main-body .main-content > .row > [class*='col-'] > .table-container,
body.lk-client-area #main-body .main-content > .row > [class*='col-'] > .panel,
body.lk-client-area #main-body .main-content > .row > [class*='col-'] > .well,
body.lk-client-area #main-body .main-content > .row > [class*='col-'] > .domain-previw-box,
body.lk-client-area #main-body .main-content > .row > [class*='col-'] > .domains-dotoday,
body.lk-client-area #main-body .main-content > .row > [class*='col-'] > .ticket-reply,
body.lk-client-area #main-body .main-content > .row > [class*='col-'] > .supportticketssubmit,
body.lk-client-area #main-body .main-content > .row > [class*='col-'] > .services,
body.lk-client-area #main-body .main-content > .row > [class*='col-'] > .clientareaaddfunds,
body.lk-client-area #main-body .main-content > .row > [class*='col-'] > .invoice-container,
body.lk-client-area #main-body .main-content > .row > [class*='col-'] > .tab-content,
body.lk-client-area #main-body .main-content > .row > [class*='col-'] > form > .table-container,
body.lk-client-area #main-body .main-content > .row > [class*='col-'] > form > .panel,
body.lk-client-area #main-body .main-content > .row > [class*='col-'] > .moduleoutput,
body.lk-client-area #main-body .main-content > .row > [class*='col-'] > .clientalert,
body.lk-client-area #main-body .main-content > .row > [class*='col-'] > .alert,
body.lk-client-area #main-body .main-content > .row > [class*='col-'] > .product-details,
body.lk-client-area #main-body .main-content > .row > [class*='col-'] > .view-ticket-container {
    max-width: 1264px;
    margin-left: auto;
    margin-right: auto;
}

body.lk-client-area #main-body .main-content > .row > [class*='col-'] > .alert,
body.lk-client-area #main-body .main-content > .row > [class*='col-'] > .clientalert,
body.lk-client-area #main-body .main-content > .row > [class*='col-'] > .moduleoutput {
    margin-bottom: 16px;
}

body.lk-client-area #main-body .main-content > .row > [class*='col-'] > .product-details,
body.lk-client-area #main-body .main-content > .row > [class*='col-'] > .invoice-container {
    width: 100%;
}

body.lk-client-area #main-body .main-content > .row > [class*='col-'] > .tab-content {
    width: 100%;
}

@media (max-width: 1280px) {
    body.lk-client-area #main-body .main-content > .row > [class*='col-'] > .lk-table-shell,
    body.lk-client-area #main-body .main-content > .row > [class*='col-'] > .table-container,
    body.lk-client-area #main-body .main-content > .row > [class*='col-'] > .panel,
    body.lk-client-area #main-body .main-content > .row > [class*='col-'] > .well,
    body.lk-client-area #main-body .main-content > .row > [class*='col-'] > .domain-previw-box,
    body.lk-client-area #main-body .main-content > .row > [class*='col-'] > .domains-dotoday,
    body.lk-client-area #main-body .main-content > .row > [class*='col-'] > .ticket-reply,
    body.lk-client-area #main-body .main-content > .row > [class*='col-'] > .supportticketssubmit,
    body.lk-client-area #main-body .main-content > .row > [class*='col-'] > .services,
    body.lk-client-area #main-body .main-content > .row > [class*='col-'] > .clientareaaddfunds,
    body.lk-client-area #main-body .main-content > .row > [class*='col-'] > .invoice-container,
    body.lk-client-area #main-body .main-content > .row > [class*='col-'] > .tab-content,
    body.lk-client-area #main-body .main-content > .row > [class*='col-'] > form > .table-container,
    body.lk-client-area #main-body .main-content > .row > [class*='col-'] > form > .panel,
    body.lk-client-area #main-body .main-content > .row > [class*='col-'] > .moduleoutput,
    body.lk-client-area #main-body .main-content > .row > [class*='col-'] > .clientalert,
    body.lk-client-area #main-body .main-content > .row > [class*='col-'] > .alert,
    body.lk-client-area #main-body .main-content > .row > [class*='col-'] > .product-details,
    body.lk-client-area #main-body .main-content > .row > [class*='col-'] > .view-ticket-container {
        max-width: none;
    }
}


/* ============================================================
   CLIENT AREA ACCOUNT PAGES - lpanel style
   ============================================================ */
body.lk-client-area .lk-account-page {
    max-width: 1264px;
    margin: 0 auto;
}

body.lk-client-area .lk-account-page h2,
body.lk-client-area .lk-account-page h3,
body.lk-client-area .lk-account-page .section-subheading {
    color: #1b254b !important;
}

body.lk-client-area .lk-account-page .lk-account-card,
body.lk-client-area .lk-account-page > .alert,
body.lk-client-area .lk-account-page > .panel,
body.lk-client-area .lk-account-page > .well,
body.lk-client-area .lk-account-page .alert.alert-block,
body.lk-client-area .lk-account-page .bg-seccolorstyle.bg-white,
body.lk-client-area .lk-account-page form.form-horizontal,
body.lk-client-area .lk-account-page form[role='form'] {
    background: #ffffff !important;
    border: 1px solid #e6ebf5 !important;
    border-radius: 22px !important;
    box-shadow: 0 10px 24px rgba(15, 23, 42, 0.05) !important;
}

body.lk-client-area .lk-account-page .alert.alert-block,
body.lk-client-area .lk-account-page .bg-seccolorstyle.bg-white,
body.lk-client-area .lk-account-page form.form-horizontal,
body.lk-client-area .lk-account-page form[role='form'] {
    padding: 20px;
}

body.lk-client-area .lk-account-page .form-group label,
body.lk-client-area .lk-account-page .control-label,
body.lk-client-area .lk-account-page .mergecolor,
body.lk-client-area .lk-account-page .c-black {
    color: #22304d !important;
}

body.lk-client-area .lk-account-page .form-control,
body.lk-client-area .lk-account-page select.form-control,
body.lk-client-area .lk-account-page input.form-control,
body.lk-client-area .lk-account-page textarea.form-control {
    min-height: 42px;
    border-radius: 14px !important;
    border: 1px solid #dce4f0 !important;
    box-shadow: none !important;
    background: #ffffff !important;
}

body.lk-client-area .lk-account-page textarea.form-control {
    min-height: 140px;
}

body.lk-client-area .lk-account-page .form-control:focus {
    border-color: #c6d3e8 !important;
    box-shadow: 0 0 0 3px rgba(93, 83, 255, 0.08) !important;
}

body.lk-client-area .lk-account-page .checkbox,
body.lk-client-area .lk-account-page .help-block,
body.lk-client-area .lk-account-page small,
body.lk-client-area .lk-account-page p {
    color: #7f8aa8 !important;
}

body.lk-client-area .lk-account-page .well {
    padding: 18px;
    background: #fbfcff !important;
}

body.lk-client-area .lk-account-page .btn-check-all,
body.lk-client-area .lk-account-page .generate-password,
body.lk-client-area .lk-account-page .btn-default,
body.lk-client-area .lk-account-page .btn-primary,
body.lk-client-area .lk-account-page .btn-danger,
body.lk-client-area .lk-account-page .btn-success,
body.lk-client-area .lk-account-page .btn-default-yellow-fill {
    min-height: 38px;
}

@media (max-width: 1280px) {
    body.lk-client-area .lk-account-page {
        max-width: none;
    }
}

/* ============================================================
   CLIENT AREA ACCOUNT PAGES - Route based tables and dialogs
   ============================================================ */
body.lk-client-area .lk-account-page .table-responsive,
body.lk-client-area .lk-account-page .listtable,
body.lk-client-area .lk-account-page .pay-method,
body.lk-client-area .lk-account-page .fieldgroup-creditcard,
body.lk-client-area .lk-account-page .fieldgroup-bankaccount,
body.lk-client-area .lk-account-page .fieldgroup-remoteinput,
body.lk-client-area .lk-account-page #billingContactsContainer,
body.lk-client-area .lk-account-page #innerBillingContactsContainer {
    background: #ffffff !important;
    border: 1px solid #e6ebf5 !important;
    border-radius: 22px !important;
    box-shadow: 0 10px 24px rgba(15, 23, 42, 0.05) !important;
}

body.lk-client-area .lk-account-page .table-responsive,
body.lk-client-area .lk-account-page .listtable,
body.lk-client-area .lk-account-page .pay-method,
body.lk-client-area .lk-account-page .fieldgroup-creditcard,
body.lk-client-area .lk-account-page .fieldgroup-bankaccount,
body.lk-client-area .lk-account-page .fieldgroup-remoteinput,
body.lk-client-area .lk-account-page #billingContactsContainer,
body.lk-client-area .lk-account-page #innerBillingContactsContainer {
    overflow: hidden;
}

body.lk-client-area .lk-account-page .listtable,
body.lk-client-area .lk-account-page .pay-method,
body.lk-client-area .lk-account-page .fieldgroup-creditcard,
body.lk-client-area .lk-account-page .fieldgroup-bankaccount,
body.lk-client-area .lk-account-page .fieldgroup-remoteinput,
body.lk-client-area .lk-account-page #billingContactsContainer,
body.lk-client-area .lk-account-page #innerBillingContactsContainer {
    padding: 20px;
}

body.lk-client-area .lk-account-page .table.table-list {
    margin-bottom: 0;
    background: transparent !important;
}

body.lk-client-area .lk-account-page .table.table-list > thead > tr > th {
    background: #fbfcff !important;
    color: #8b97b4 !important;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    font-size: 12px;
    font-weight: 700;
    border-bottom: 1px solid #edf1f7 !important;
}

body.lk-client-area .lk-account-page .table.table-list > tbody > tr > td {
    background: #ffffff !important;
    border-top: 1px solid #edf1f7 !important;
    color: #22304d !important;
    vertical-align: middle;
}

body.lk-client-area .lk-account-page .table.table-list > tbody > tr:first-child > td {
    border-top: 0 !important;
}

body.lk-client-area .lk-account-page .table.table-list small,
body.lk-client-area .lk-account-page .table.table-list .text-muted,
body.lk-client-area .lk-account-page .table.table-list .description,
body.lk-client-area .lk-account-page .table.table-list .field-error-msg,
body.lk-client-area .lk-account-page .table.table-list .mergecolor {
    color: #7f8aa8 !important;
}

body.lk-client-area .lk-account-page .section-subheading {
    text-align: left !important;
    margin: 0 0 18px !important;
    color: #7f8aa8 !important;
}

body.lk-client-area .lk-account-page .radio-inline,
body.lk-client-area .lk-account-page .checkbox-inline,
body.lk-client-area .lk-account-page .checkbox label,
body.lk-client-area .lk-account-page label.checkbox-inline {
    color: #22304d !important;
}

body.lk-client-area .lk-account-page .radio-inline,
body.lk-client-area .lk-account-page .checkbox-inline {
    margin-right: 18px;
    margin-bottom: 10px;
}

body.lk-client-area .lk-account-page .label,
body.lk-client-area .lk-account-page .badge.feat,
body.lk-client-area .lk-account-page .plans.badge {
    border-radius: 999px !important;
    padding: 7px 12px !important;
    font-size: 12px !important;
    font-weight: 700;
    border: 0 !important;
}

body.lk-client-area .lk-account-page .label-success,
body.lk-client-area .lk-account-page .badge.bg-success {
    background: #e8fbef !important;
    color: #2f9a5d !important;
}

body.lk-client-area .lk-account-page .badge.bg-default,
body.lk-client-area .lk-account-page .label-default {
    background: #eef2ff !important;
    color: #5d53ff !important;
}

body.lk-client-area .lk-account-page .badge.bg-danger,
body.lk-client-area .lk-account-page .label-danger {
    background: #fff2ea !important;
    color: #dd7f2a !important;
}

body.lk-client-area .lk-account-page .submit-container,
body.lk-client-area .lk-account-page .form-group.text-center {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    align-items: center;
}

body.lk-client-area .lk-account-page .btn.btn-block {
    width: auto;
    min-width: 160px;
}

body.lk-client-area .lk-account-page .btn-sm,
body.lk-client-area .lk-account-page .btn {
    border-radius: 14px !important;
}

body.lk-client-area .lk-account-page .btn-remove-user,
body.lk-client-area .lk-account-page .btn-delete,
body.lk-client-area .lk-account-page .btn-danger {
    background: #fff2ea !important;
    border-color: #ffd8c0 !important;
    color: #bf5b19 !important;
}

body.lk-client-area .lk-account-page .btn-remove-user:hover,
body.lk-client-area .lk-account-page .btn-delete:hover,
body.lk-client-area .lk-account-page .btn-danger:hover {
    background: #ffe7d6 !important;
    color: #a94e12 !important;
}

body.lk-client-area .lk-account-page .btn-set-default.disabled,
body.lk-client-area .lk-account-page .btn.disabled,
body.lk-client-area .lk-account-page .btn[disabled] {
    opacity: 0.55;
}

body.lk-client-area .lk-account-page .modal-content {
    border: 1px solid #e6ebf5 !important;
    border-radius: 24px !important;
    box-shadow: 0 24px 60px rgba(15, 23, 42, 0.16) !important;
}

body.lk-client-area .lk-account-page .modal-header,
body.lk-client-area .lk-account-page .modal-body,
body.lk-client-area .lk-account-page .modal-footer {
    border-color: #edf1f7 !important;
}

body.lk-client-area .lk-account-page .modal-header,
body.lk-client-area .lk-account-page .modal-body,
body.lk-client-area .lk-account-page .modal-footer,
body.lk-client-area .lk-account-page .modal-title {
    background: #ffffff !important;
    color: #22304d !important;
}

body.lk-client-area .lk-account-page .gateway-errors,
body.lk-client-area .lk-account-page .alert.alert-warning,
body.lk-client-area .lk-account-page .alert.alert-info,
body.lk-client-area .lk-account-page .alert.alert-success,
body.lk-client-area .lk-account-page .alert.alert-danger {
    border-radius: 18px !important;
}

body.lk-client-area .lk-account-page .fieldgroup-creditcard,
body.lk-client-area .lk-account-page .fieldgroup-bankaccount {
    margin-bottom: 18px;
}

body.lk-client-area .lk-account-page .fieldgroup-creditcard .form-group,
body.lk-client-area .lk-account-page .fieldgroup-bankaccount .form-group {
    margin-left: 0;
    margin-right: 0;
}

body.lk-client-area .lk-account-page .type-card,
body.lk-client-area .lk-account-page .bg-colorstyle.bg-pratalight {
    background: #fbfcff !important;
    border: 1px solid #edf1f7 !important;
    border-radius: 18px !important;
}

body.lk-client-area .lk-account-page .auth3d-area {
    border: 1px solid #e6ebf5 !important;
    border-radius: 22px !important;
    background: #ffffff;
}

body.lk-client-area .lk-account-page .row.mt-50 {
    margin-top: 0 !important;
}

body.lk-client-area .lk-account-page--user-profile > .row,
body.lk-client-area .lk-account-page--user-security > .row,
body.lk-client-area .lk-account-page--user-password > .row {
    margin-left: -10px;
    margin-right: -10px;
}

body.lk-client-area .lk-account-page--user-profile > .row > [class*='col-'],
body.lk-client-area .lk-account-page--user-security > .row > [class*='col-'],
body.lk-client-area .lk-account-page--user-password > .row > [class*='col-'] {
    padding-left: 10px;
    padding-right: 10px;
}

@media (max-width: 991px) {
    body.lk-client-area .lk-account-page .submit-container,
    body.lk-client-area .lk-account-page .form-group.text-center {
        flex-direction: column;
        align-items: stretch;
    }

    body.lk-client-area .lk-account-page .btn.btn-block,
    body.lk-client-area .lk-account-page .submit-container .btn,
    body.lk-client-area .lk-account-page .form-group.text-center .btn {
        width: 100%;
    }
}

/* ============================================================
   CLIENT AREA INVOICES - Remove gray data table surfaces
   ============================================================ */
body.lk-client-area .lk-invoices-page .lk-table-shell,
body.lk-client-area .lk-invoices-page .table-container,
body.lk-client-area .lk-invoices-page .dataTables_wrapper,
body.lk-client-area .lk-invoices-page .dataTables_scroll,
body.lk-client-area .lk-invoices-page .dataTables_scrollHead,
body.lk-client-area .lk-invoices-page .dataTables_scrollHeadInner,
body.lk-client-area .lk-invoices-page .dataTables_scrollBody,
body.lk-client-area .lk-invoices-page table.dataTable,
body.lk-client-area .lk-invoices-page table.dataTable thead,
body.lk-client-area .lk-invoices-page table.dataTable tbody {
    background: #ffffff !important;
}

body.lk-client-area .lk-invoices-page .dataTables_scrollBody {
    border-radius: 18px;
}

body.lk-client-area .lk-invoices-page .table.table-list > thead > tr > th,
body.lk-client-area .lk-invoices-section .table.table-list > thead > tr > th,
body.lk-client-area .lk-tickets-section .table.table-list > thead > tr > th {
    background: #ffffff !important;
}

body.lk-client-area .lk-invoices-page .table.table-list tbody tr,
body.lk-client-area .lk-invoices-page .table.table-list tbody tr:nth-child(even) {
    background: #ffffff !important;
}

body.lk-client-area .lk-invoices-page .table.table-list tbody td {
    background: transparent !important;
}

body.lk-client-area .lk-invoices-page .dataTables_length,
body.lk-client-area .lk-invoices-page .dataTables_info,
body.lk-client-area .lk-invoices-page .dataTables_paginate {
    background: transparent !important;
}

/* ============================================================
   CLIENT AREA TICKETS - Remove gray data table surfaces
   ============================================================ */
body.lk-client-area .lk-tickets-page .lk-table-shell,
body.lk-client-area .lk-tickets-page .table-container,
body.lk-client-area .lk-tickets-page .dataTables_wrapper,
body.lk-client-area .lk-tickets-page .dataTables_scroll,
body.lk-client-area .lk-tickets-page .dataTables_scrollHead,
body.lk-client-area .lk-tickets-page .dataTables_scrollHeadInner,
body.lk-client-area .lk-tickets-page .dataTables_scrollBody,
body.lk-client-area .lk-tickets-page table.dataTable,
body.lk-client-area .lk-tickets-page table.dataTable thead,
body.lk-client-area .lk-tickets-page table.dataTable tbody {
    background: #ffffff !important;
}

body.lk-client-area .lk-tickets-page .dataTables_scrollBody {
    border-radius: 18px;
}

body.lk-client-area .lk-tickets-page .table.table-list thead th {
    background: #ffffff !important;
}

body.lk-client-area .lk-tickets-page .table.table-list tbody tr,
body.lk-client-area .lk-tickets-page .table.table-list tbody tr:nth-child(even) {
    background: #ffffff !important;
}

body.lk-client-area .lk-tickets-page .table.table-list tbody td {
    background: transparent !important;
}

body.lk-client-area .lk-tickets-page .dataTables_length,
body.lk-client-area .lk-tickets-page .dataTables_info,
body.lk-client-area .lk-tickets-page .dataTables_paginate {
    background: transparent !important;
}

/* ============================================================
   CLIENT AREA TICKETS - lpanel pagination alignment
   ============================================================ */
body.lk-client-area .lk-tickets-page .dataTables_wrapper > .row:last-child {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    margin-top: 18px;
}

body.lk-client-area .lk-tickets-page .dataTables_wrapper > .row:last-child::before,
body.lk-client-area .lk-tickets-page .dataTables_wrapper > .row:last-child::after {
    display: none;
}

body.lk-client-area .lk-tickets-page .dataTables_wrapper > .row:last-child > [class*='col-'] {
    float: none !important;
    width: auto !important;
    padding-left: 0;
    padding-right: 0;
}

body.lk-client-area .lk-tickets-page .dataTables_info {
    order: 2;
    margin-left: auto;
    margin-right: 12px;
    color: #7f8aa8 !important;
    font-weight: 600;
}

body.lk-client-area .lk-tickets-page .dataTables_paginate {
    order: 3;
}

body.lk-client-area .lk-tickets-page .dataTables_length {
    order: 1;
}

body.lk-client-area .lk-tickets-page .dataTables_paginate .paginate_button {
    min-width: 0;
}

body.lk-client-area .lk-tickets-page .dataTables_paginate .paginate_button:hover {
    background: #f0eeff !important;
}
body.lk-client-area .lk-tickets-page .dataTables_paginate .paginate_button.current,
body.lk-client-area .lk-tickets-page .dataTables_paginate .paginate_button.current:hover {
    background: linear-gradient(135deg, #7b6dff 0%, #6656ff 100%) !important;
    color: #ffffff !important;
    box-shadow: 0 4px 10px rgba(102, 86, 255, 0.30) !important;
}

@media (max-width: 920px) {
    body.lk-client-area .lk-tickets-page .dataTables_wrapper > .row:last-child {
        flex-wrap: wrap;
    }

    body.lk-client-area .lk-tickets-page .dataTables_length {
        width: 100%;
    }
}

/* ============================================================
   CLIENT AREA TABLE PAGINATION - strong global override
   ============================================================ */
body.lk-client-area .dataTables_wrapper .dataTables_paginate,
body.lk-client-area .dataTables_paginate {
    display: inline-flex !important;
    align-items: center !important;
    gap: 6px !important;
    padding: 6px !important;
    border-radius: 16px !important;
    background: #f5f7fc !important;
    background-image: none !important;
    border: 1px solid #e4eaf4 !important;
    box-shadow: 0 8px 18px rgba(31, 45, 79, 0.04) !important;
}

body.lk-client-area .dataTables_wrapper .dataTables_paginate a.paginate_button,
body.lk-client-area .dataTables_wrapper .dataTables_paginate span.paginate_button,
body.lk-client-area .dataTables_paginate a.paginate_button,
body.lk-client-area .dataTables_paginate span.paginate_button {
    min-height: 36px !important;
    min-width: 36px !important;
    padding: 0 14px !important;
    border: 0 !important;
    border-radius: 12px !important;
    background: transparent !important;
    background-image: none !important;
    color: #7d88a6 !important;
    -webkit-text-fill-color: #7d88a6 !important;
    font-size: 13px !important;
    font-weight: 700 !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    box-shadow: none !important;
    text-decoration: none !important;
}

body.lk-client-area .dataTables_wrapper .dataTables_paginate a.paginate_button:hover,
body.lk-client-area .dataTables_wrapper .dataTables_paginate span.paginate_button:hover,
body.lk-client-area .dataTables_paginate a.paginate_button:hover,
body.lk-client-area .dataTables_paginate span.paginate_button:hover {
    background: #ffffff !important;
    background-image: none !important;
    color: #22304d !important;
    -webkit-text-fill-color: #22304d !important;
}

body.lk-client-area .dataTables_wrapper .dataTables_paginate a.paginate_button.current,
body.lk-client-area .dataTables_wrapper .dataTables_paginate a.paginate_button.current:hover,
body.lk-client-area .dataTables_wrapper .dataTables_paginate span.paginate_button.current,
body.lk-client-area .dataTables_wrapper .dataTables_paginate span.paginate_button.current:hover,
body.lk-client-area .dataTables_paginate a.paginate_button.current,
body.lk-client-area .dataTables_paginate a.paginate_button.current:hover,
body.lk-client-area .dataTables_paginate span.paginate_button.current,
body.lk-client-area .dataTables_paginate span.paginate_button.current:hover {
    background: linear-gradient(135deg, #7b6dff 0%, #6656ff 100%) !important;
    background-image: none !important;
    color: #ffffff !important;
    -webkit-text-fill-color: #ffffff !important;
    box-shadow: 0 4px 10px rgba(102, 86, 255, 0.30) !important;
}

body.lk-client-area .dataTables_wrapper .dataTables_paginate a.paginate_button.disabled,
body.lk-client-area .dataTables_wrapper .dataTables_paginate a.paginate_button.disabled:hover,
body.lk-client-area .dataTables_wrapper .dataTables_paginate span.paginate_button.disabled,
body.lk-client-area .dataTables_wrapper .dataTables_paginate span.paginate_button.disabled:hover,
body.lk-client-area .dataTables_paginate a.paginate_button.disabled,
body.lk-client-area .dataTables_paginate a.paginate_button.disabled:hover,
body.lk-client-area .dataTables_paginate span.paginate_button.disabled,
body.lk-client-area .dataTables_paginate span.paginate_button.disabled:hover {
    opacity: 0.45 !important;
    background: transparent !important;
    background-image: none !important;
    color: #98a4bf !important;
    -webkit-text-fill-color: #98a4bf !important;
    cursor: default !important;
    box-shadow: none !important;
}


/* ============================================================
   QUICK ACTION BUTTONS - lk-quick-btn
   Used on services page, domains page, and dashboard rows
   ============================================================ */
body.lk-client-area .lk-quick-btn {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 0 10px;
    height: 34px;
    border-radius: 10px;
    border: 1px solid #d8e0ee;
    background: #ffffff;
    color: #55627f !important;
    -webkit-text-fill-color: #55627f !important;
    font-size: 12px;
    font-weight: 600;
    text-decoration: none !important;
    white-space: nowrap;
    flex-shrink: 0;
    transition: background 0.15s, border-color 0.15s, color 0.15s;
    box-shadow: none !important;
    background-image: none !important;
}

body.lk-client-area .lk-quick-btn:hover,
body.lk-client-area .lk-quick-btn:focus {
    background: #eef2ff !important;
    background-image: none !important;
    border-color: #c5beff !important;
    color: #5d53ff !important;
    -webkit-text-fill-color: #5d53ff !important;
    text-decoration: none !important;
    box-shadow: none !important;
}

body.lk-client-area .lk-quick-btn i {
    font-size: 13px;
    color: currentColor !important;
    -webkit-text-fill-color: currentColor !important;
}

body.lk-client-area .lk-quick-btn span {
    color: currentColor !important;
    -webkit-text-fill-color: currentColor !important;
}

/* Icon-only compact variant for dashboard rows */
body.lk-client-area .lk-quick-btn--sm {
    width: 34px;
    padding: 0;
    justify-content: center;
}

body.lk-client-area .lk-quick-btn--sm i {
    font-size: 14px;
}


/* ============================================================
   SERVICES PAGE - Action cell flex layout with quick buttons
   ============================================================ */
body.lk-client-area .lk-list-action--with-quick {
    display: flex;
    align-items: center;
    gap: 6px;
    flex-wrap: nowrap;
    justify-content: flex-end;
}

body.lk-client-area .lk-list-action--with-quick .btn {
    flex-shrink: 0;
}


/* ============================================================
   DOMAINS PAGE - Action cell with quick buttons + btn-group
   ============================================================ */
body.lk-client-area .lk-domain-actions-wrap {
    display: flex;
    align-items: center;
    gap: 6px;
    justify-content: flex-end;
}

@media (max-width: 920px) {
    body.lk-client-area .lk-list-action--with-quick {
        justify-content: flex-start;
    }

    body.lk-client-area .lk-domain-actions-wrap {
        justify-content: flex-start;
        flex-wrap: wrap;
    }
}


/* ============================================================
   DASHBOARD PANEL TOOLBAR - search input + sort headers
   ============================================================ */
body.lk-client-area .lk-lpanel-panel-toolbar {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 0 8px;
}

body.lk-client-area .lk-lpanel-search-input {
    width: 100%;
    max-width: 280px;
    height: 34px;
    padding: 0 12px;
    border-radius: 10px;
    border: 1px solid #d8e0ee;
    background: #ffffff;
    color: #22304d;
    font-size: 13px;
    outline: none;
    box-shadow: none;
    transition: border-color 0.15s;
}

body.lk-client-area .lk-lpanel-search-input::placeholder {
    color: #aab4cc;
}

body.lk-client-area .lk-lpanel-search-input:focus {
    border-color: #c5beff;
    box-shadow: 0 0 0 3px rgba(93, 83, 255, 0.08);
}

/* Sort buttons — inherit grid position from table-head */
body.lk-client-area .lk-sort-btn {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 0;
    border: 0;
    background: none;
    color: #8b97b4;
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.07em;
    cursor: pointer;
    white-space: nowrap;
    transition: color 0.15s;
}

body.lk-client-area .lk-sort-btn:hover {
    color: #5d53ff;
}

body.lk-client-area .lk-sort-icon {
    font-size: 10px;
    opacity: 0.4;
    transition: transform 0.2s, opacity 0.2s;
}

body.lk-client-area .lk-sort-btn.is-sorted-asc .lk-sort-icon,
body.lk-client-area .lk-sort-btn.is-sorted-desc .lk-sort-icon {
    opacity: 1;
    color: #5d53ff;
}

body.lk-client-area .lk-sort-btn.is-sorted-asc .lk-sort-icon {
    transform: rotate(180deg);
}


/* ============================================================
   UNPAID INVOICE BADGE - lk-unpaid-badge
   Shown on suspended services (services page + dashboard)
   ============================================================ */
body.lk-client-area .lk-unpaid-badge {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    margin-top: 4px;
    padding: 3px 8px;
    border-radius: 8px;
    background: #fff4ec;
    border: 1px solid #ffd5b0;
    color: #c05e10 !important;
    -webkit-text-fill-color: #c05e10 !important;
    font-size: 11px;
    font-weight: 700;
    text-decoration: none !important;
    white-space: nowrap;
    line-height: 1.4;
    transition: background 0.15s, border-color 0.15s;
}

body.lk-client-area .lk-unpaid-badge:hover,
body.lk-client-area .lk-unpaid-badge:focus {
    background: #ffe8d0 !important;
    border-color: #f5b880 !important;
    color: #a04c08 !important;
    -webkit-text-fill-color: #a04c08 !important;
    text-decoration: none !important;
}

body.lk-client-area .lk-unpaid-badge i {
    font-size: 11px;
    color: currentColor !important;
    -webkit-text-fill-color: currentColor !important;
}

/* Dashboard row variant — sits inside .lk-lpanel-product-cell > div */
body.lk-client-area .lk-lpanel-product-cell .lk-unpaid-badge {
    margin-top: 3px;
}


/* ============================================================
   1. BANDEAU D'ALERTES PRIORITAIRES
   ============================================================ */
body.lk-client-area .lk-alerts-banner {
    width: 100%;
    box-sizing: border-box;
    padding: 0 0 6px;
}

body.lk-client-area .lk-alerts-inner {
    display: flex;
    flex-direction: column;
    gap: 8px;
    width: 100%;
}

body.lk-client-area .lk-alert-card {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 14px 16px;
    border-radius: 14px;
    border: 1px solid transparent;
    text-decoration: none !important;
    cursor: pointer;
    transition: background 0.15s, border-color 0.15s;
    width: 100%;
    box-sizing: border-box;
}

body.lk-client-area .lk-alert-card--danger {
    background: #fff1f0;
    border-color: #ffd5d2;
}

body.lk-client-area .lk-alert-card--warning {
    background: #fffbec;
    border-color: #fde9a0;
}

body.lk-client-area .lk-alert-card--danger:hover  { background: #ffe4e2 !important; border-color: #ffb8b3 !important; }
body.lk-client-area .lk-alert-card--warning:hover { background: #fff5cc !important; border-color: #f9d96a !important; }

body.lk-client-area .lk-alert-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    border-radius: 10px;
    flex-shrink: 0;
    font-size: 16px;
}

body.lk-client-area .lk-alert-card--danger  .lk-alert-icon { background: #ffe4e2; color: #c0200e !important; -webkit-text-fill-color: #c0200e !important; }
body.lk-client-area .lk-alert-card--warning .lk-alert-icon { background: #fff0c0; color: #8a6200 !important; -webkit-text-fill-color: #8a6200 !important; }

body.lk-client-area .lk-alert-body {
    flex: 1;
    min-width: 0;
}

body.lk-client-area .lk-alert-title {
    font-size: 14px;
    font-weight: 600;
    line-height: 1.4;
}

body.lk-client-area .lk-alert-card--danger  .lk-alert-title { color: #c0200e !important; -webkit-text-fill-color: #c0200e !important; }
body.lk-client-area .lk-alert-card--warning .lk-alert-title { color: #8a6200 !important; -webkit-text-fill-color: #8a6200 !important; }

body.lk-client-area .lk-alert-sub {
    font-size: 12px;
    margin-top: 2px;
    opacity: 0.75;
}

body.lk-client-area .lk-alert-card--danger  .lk-alert-sub { color: #c0200e !important; -webkit-text-fill-color: #c0200e !important; }
body.lk-client-area .lk-alert-card--warning .lk-alert-sub { color: #8a6200 !important; -webkit-text-fill-color: #8a6200 !important; }

body.lk-client-area .lk-alert-btn {
    display: inline-flex;
    align-items: center;
    padding: 7px 14px;
    border-radius: 8px;
    font-size: 12px;
    font-weight: 700;
    white-space: nowrap;
    flex-shrink: 0;
    transition: opacity 0.15s;
}

body.lk-client-area .lk-alert-card--danger  .lk-alert-btn { background: #c0200e; color: #fff !important; -webkit-text-fill-color: #fff !important; }
body.lk-client-area .lk-alert-card--warning .lk-alert-btn { background: #8a6200; color: #fff !important; -webkit-text-fill-color: #fff !important; }
body.lk-client-area .lk-alert-card:hover .lk-alert-btn { opacity: 0.85; }

@media (max-width: 640px) {
    body.lk-client-area .lk-alerts-banner { padding: 0 0 12px; }
    body.lk-client-area .lk-alert-btn { display: none; }
}

/* Stat card urgente (factures impayees) — garde la barre de droite */
body.lk-client-area .lk-lpanel-stat--urgent {
    border-color: #ffd5d2 !important;
    background: linear-gradient(90deg, #fff1f0 0%, #fff1f0 76%, #ffd5d2 76%, #ffc7c4 100%) !important;
}

body.lk-client-area .lk-lpanel-stat--urgent .lk-lpanel-stat-label,
body.lk-client-area .lk-lpanel-stat--urgent strong,
body.lk-client-area .lk-lpanel-stat--urgent .lk-lpanel-stat-sub {
    color: #c0200e !important;
    -webkit-text-fill-color: #c0200e !important;
}

body.lk-client-area .lk-lpanel-stat--urgent .lk-lpanel-stat-icon {
    color: #c0200e !important;
    -webkit-text-fill-color: #c0200e !important;
    opacity: 0.7;
}


/* ============================================================
   2. DATES RELATIVES
   ============================================================ */
body.lk-client-area .lk-date-rel {
    display: inline-block;
    font-size: 12px;
    font-weight: 600;
    padding: 2px 9px;
    border-radius: 8px;
    white-space: normal;
    line-height: 1.5;
}

body.lk-client-area .lk-date-overdue {
    background: #fff1f0;
    color: #c0200e !important;
    -webkit-text-fill-color: #c0200e !important;
}

body.lk-client-area .lk-date-critical {
    background: #fff4ec;
    color: #c05e10 !important;
    -webkit-text-fill-color: #c05e10 !important;
}

body.lk-client-area .lk-date-warning {
    background: #fffbec;
    color: #8a6200 !important;
    -webkit-text-fill-color: #8a6200 !important;
}

body.lk-client-area .lk-date-info {
    background: #f0f5ff;
    color: #3a4fd7 !important;
    -webkit-text-fill-color: #3a4fd7 !important;
}


/* ============================================================
   4. TICKETS PANEL
   ============================================================ */
body.lk-client-area .lk-lpanel-table-row--tickets,
body.lk-client-area .lk-lpanel-table-head--tickets {
    grid-template-columns: minmax(0, 1.8fr) minmax(80px, 0.6fr) 100px 90px;
}

body.lk-client-area .lk-ticket-subject {
    font-weight: 500;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

body.lk-client-area .lk-ticket-link {
    color: #22304d !important;
    -webkit-text-fill-color: #22304d !important;
    text-decoration: none !important;
}

body.lk-client-area .lk-ticket-link:hover {
    color: #5d53ff !important;
    -webkit-text-fill-color: #5d53ff !important;
    text-decoration: underline !important;
}

body.lk-client-area .lk-ticket-dept {
    font-size: 12px;
    color: #8b97b4 !important;
    -webkit-text-fill-color: #8b97b4 !important;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* Statut repondu (bleu) */
body.lk-client-area .lk-lpanel-status.is-info {
    background: #eef2ff;
    color: #3a4fd7 !important;
    -webkit-text-fill-color: #3a4fd7 !important;
}


/* ============================================================
   5. STAT CARD — total factures (sub enrichi par JS)
   ============================================================ */
body.lk-client-area #lkStatInvoiceSub strong {
    font-weight: 700;
}


/* ============================================================
   6. SKELETON LOADERS
   ============================================================ */
@keyframes lk-shimmer {
    0%   { background-position: -600px 0; }
    100% { background-position: 600px 0; }
}

body.lk-client-area .lk-skeleton-wrap {
    width: 100%;
}

body.lk-client-area .lk-skel {
    display: block;
    border-radius: 6px;
    background: linear-gradient(90deg, #e8edf5 25%, #f2f5fb 50%, #e8edf5 75%);
    background-size: 1200px 100%;
    animation: lk-shimmer 1.6s infinite linear;
}

body.lk-client-area .lk-skeleton-row {
    display: grid;
    align-items: center;
    gap: 12px;
    padding: 14px 8px;
    border-bottom: 1px solid #f0f3f8;
}

body.lk-client-area .lk-skeleton-row--domains {
    grid-template-columns: 28px minmax(0, 1.35fr) 100px 60px 80px;
}

body.lk-client-area .lk-skeleton-row--tickets {
    grid-template-columns: minmax(0, 1.8fr) 100px 60px 70px;
}

body.lk-client-area .lk-skel--icon  { width: 28px; height: 28px; border-radius: 8px; }
body.lk-client-area .lk-skel--long  { height: 13px; }
body.lk-client-area .lk-skel--med   { width: 90px; height: 11px; }
body.lk-client-area .lk-skel--pill  { width: 58px; height: 22px; border-radius: 20px; }
body.lk-client-area .lk-skel--btn   { width: 62px; height: 28px; border-radius: 8px; justify-self: end; }


/* ============================================================
   7. INDICATEUR SSL PAR DOMAINE
   ============================================================ */
/* Ancien point (conservé pour rétrocompat) */
body.lk-client-area .lk-ssl-dot {
    display: inline-block;
    width: 7px;
    height: 7px;
    border-radius: 50%;
    vertical-align: middle;
    margin-left: 5px;
    flex-shrink: 0;
    cursor: default;
}

/* Nouveau badge cadenas */
body.lk-client-area .lk-ssl-badge {
    display: inline-flex;
    align-items: center;
    gap: 3px;
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 0.04em;
    padding: 2px 6px 2px 5px;
    border-radius: 6px;
    vertical-align: middle;
    margin-left: 6px;
    cursor: default;
    flex-shrink: 0;
    line-height: 1;
}

body.lk-client-area .lk-ssl-badge i {
    font-size: 10px !important;
}

body.lk-client-area .lk-ssl-valid    { background: #22c55e; }
body.lk-client-area .lk-ssl-expiring { background: #f59e0b; }
body.lk-client-area .lk-ssl-missing  { background: #e5e7eb; }
body.lk-client-area .lk-ssl-unknown  { background: #d1d5db; }

body.lk-client-area .lk-ssl-badge.lk-ssl-valid    { background: #dcfce7; color: #16a34a; }
body.lk-client-area .lk-ssl-badge.lk-ssl-expiring { background: #fef3c7; color: #d97706; }
body.lk-client-area .lk-ssl-badge.lk-ssl-missing  { background: #f1f5f9; color: #94a3b8; }
body.lk-client-area .lk-ssl-badge.lk-ssl-unknown  { background: #f1f5f9; color: #94a3b8; }

/* ── Badges expiration domaines ── */
body.lk-client-area .lk-dom-warning {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    margin-top: 5px;
    font-size: 11px;
    font-weight: 600;
    padding: 2px 8px 2px 6px;
    border-radius: 6px;
    line-height: 1.4;
    clear: both;
}
body.lk-client-area .lk-domain-link {
    display: block;
}
body.lk-client-area .lk-dom-warning i { font-size: 11px !important; }
body.lk-client-area .lk-dom-warning--expired { background: #fee2e2; color: #dc2626; }
body.lk-client-area .lk-dom-warning--soon    { background: #fff3de; color: #c57a16; }


/* ============================================================
   3. SALUTATION (greeting h1)
   ============================================================ */
body.lk-client-area .lk-lpanel-heading h1 {
    font-size: 22px;
    font-weight: 700;
}

body.lk-client-area .lk-greeting-wave {
    font-style: normal;
}

/* .lk-alerts-banner has no horizontal padding override at 920px
   – the banner uses width:100% + box-sizing:border-box so it always
     matches the flex siblings (.lk-lpanel-top etc.) exactly */

/* ============================================================
   DATE NORMALE (> 60 jours) + DATE ECHEANCE HEBERGEMENT
   ============================================================ */
body.lk-client-area .lk-date-normal {
    background: #f1f5f9;
    color: #64748b !important;
    -webkit-text-fill-color: #64748b !important;
}

/* Petit badge sous le nom du service (renouvellement) */
body.lk-client-area .lk-svc-due {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    font-size: 11px;
    margin-top: 3px;
}
body.lk-client-area .lk-svc-due i {
    font-size: 10px;
    opacity: 0.8;
}


/* ============================================================
   SERVICES LIST — "Gestion du produit" button in blue
   ============================================================ */
body.lk-client-area .lk-list-action--with-quick .btn.btn-default-yellow-fill,
body.lk-client-area .lk-list-action--with-quick .btn.btn-default-yellow-fill:visited {
    background: #6656ff !important;
    background-image: none !important;
    border-color: #6656ff !important;
    color: #ffffff !important;
    -webkit-text-fill-color: #ffffff !important;
    box-shadow: 0 2px 8px rgba(102,86,255,.25) !important;
}

body.lk-client-area .lk-list-action--with-quick .btn.btn-default-yellow-fill:hover,
body.lk-client-area .lk-list-action--with-quick .btn.btn-default-yellow-fill:focus {
    background: #5546ee !important;
    background-image: none !important;
    border-color: #5546ee !important;
    color: #ffffff !important;
    -webkit-text-fill-color: #ffffff !important;
}


/* ============================================================
   TICKETS PANEL — toolbar + "Ouvrir un ticket" button
   ============================================================ */
body.lk-client-area .lk-tickets-toolbar {
    display: flex;
    justify-content: flex-end;
    padding: 0 0 12px;
}

body.lk-client-area .lk-lpanel-open-ticket-btn {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 0 16px;
    height: 36px;
    border-radius: 10px;
    background: #f0eeff;
    color: #6656ff !important;
    -webkit-text-fill-color: #6656ff !important;
    border: 1px solid #d8d2ff;
    font-size: 13px;
    font-weight: 600;
    text-decoration: none !important;
    white-space: nowrap;
    transition: all .15s;
    box-shadow: none;
}

body.lk-client-area .lk-lpanel-open-ticket-btn:hover {
    background: #6656ff;
    color: #ffffff !important;
    -webkit-text-fill-color: #ffffff !important;
    border-color: #6656ff;
    text-decoration: none !important;
}

body.lk-client-area .lk-lpanel-open-ticket-btn i {
    font-size: 14px;
}


/* ============================================================
   DASHBOARD — Services panel aligned with services page
   ============================================================ */

/* Col-head inside the library panel — même padding horizontal que les rangées */
body.lk-client-area .lk-lpanel-library-panel .lk-services-col-head {
    padding-left: 16px;
    padding-right: 16px;
    margin-bottom: 0;
    border-bottom-color: #edf1f7;
}

/* Rows: reuse lk-list-item look inside the dashboard body */
body.lk-client-area .lk-dash-services-body {
    display: flex;
    flex-direction: column;
    padding-top: 8px;
}

body.lk-client-area .lk-dash-services-body .lk-list-item {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 14px 16px;
    border-radius: 18px;
    margin: 0 0 8px;
    border: 1px solid #e8edf7;
    background: #ffffff;
    transition: background .12s, box-shadow .12s;
}

body.lk-client-area .lk-dash-services-body .lk-list-item:last-child {
    margin-bottom: 0;
}

body.lk-client-area .lk-dash-services-body .lk-list-item:hover {
    background: #f8faff;
    box-shadow: 0 2px 10px rgba(112,144,176,.10);
}

/* Column widths — identical to services page */
body.lk-client-area .lk-dash-services-body .lk-list-icon  { flex: 0 0 38px; min-width: 38px; }
body.lk-client-area .lk-dash-services-body .lk-list-main  { flex: 1 1 0; min-width: 0; overflow: hidden; }
body.lk-client-area .lk-dash-services-body .lk-list-prix  { flex: 0 0 100px; min-width: 100px; }
body.lk-client-area .lk-dash-services-body .lk-list-plan  { flex: 0 0 80px;  min-width: 80px;  }
body.lk-client-area .lk-dash-services-body .lk-list-due   { flex: 0 0 210px; min-width: 180px; text-align: left; }
body.lk-client-area .lk-dash-services-body .lk-list-due-date { white-space: normal; line-height: 1.4; font-size: 12px; }
body.lk-client-area .lk-dash-services-body .lk-list-status { flex: 0 0 130px; min-width: 130px; display: flex; justify-content: flex-start; }
body.lk-client-area .lk-dash-services-body .lk-list-action { flex: 0 0 300px; min-width: 300px; display: flex; justify-content: flex-end; gap: 6px; flex-wrap: nowrap; }

body.lk-client-area .lk-dash-services-body .lk-list-prix .lk-list-price { font-weight: 700; color: #22304d; font-size: 13px; }
body.lk-client-area .lk-dash-services-body .lk-list-plan .lk-list-cycle { font-size: 12px; color: #8a96b3; font-weight: 500; }
body.lk-client-area .lk-dash-services-body .lk-list-name  { font-weight: 600; font-size: 14px; color: #1b254b; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
body.lk-client-area .lk-dash-services-body .lk-list-sub   { font-size: 12px; color: #8a96b3; margin-top: 2px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
body.lk-client-area .lk-dash-services-body .lk-list-sub a { color: inherit; text-decoration: none; }
body.lk-client-area .lk-dash-services-body .lk-list-sub a:hover { text-decoration: underline; }

@media (max-width: 992px) {
    body.lk-client-area .lk-dash-services-body .lk-list-prix,
    body.lk-client-area .lk-dash-services-body .lk-list-plan,
    body.lk-client-area .lk-dash-services-body .lk-list-due,
    body.lk-client-area .lk-dash-services-body .lk-list-status { display: none; }
    body.lk-client-area .lk-dash-services-head .lk-sch-prix,
    body.lk-client-area .lk-dash-services-head .lk-sch-plan,
    body.lk-client-area .lk-dash-services-head .lk-sch-due,
    body.lk-client-area .lk-dash-services-head .lk-sch-status  { display: none; }
}

@media (max-width: 768px) {
    body.lk-client-area .lk-dash-services-body .lk-list-action { display: none; }
    body.lk-client-area .lk-dash-services-head .lk-sch-action  { display: none; }
}

/* ============================================================
   FORMULAIRE TICKET — supportticketsubmit-steptwo.tpl
   ============================================================ */

.lk-ticket-form-card {
    background: #ffffff;
    border: 1px solid #e8edf7;
    border-radius: 20px;
    padding: 36px 40px 40px;
    max-width: 860px;
    margin: 0 auto;
}

/* Header */
.lk-ticket-form-header {
    display: flex;
    align-items: center;
    gap: 16px;
    margin-bottom: 32px;
    padding-bottom: 24px;
    border-bottom: 1px solid #edf1f7;
}

.lk-ticket-form-header-icon {
    flex: 0 0 48px;
    width: 48px;
    height: 48px;
    border-radius: 14px;
    background: linear-gradient(135deg, #7b6dff 0%, #6656ff 100%);
    display: flex;
    align-items: center;
    justify-content: center;
    color: #fff;
    font-size: 22px;
}

.lk-ticket-form-title {
    font-size: 20px;
    font-weight: 700;
    color: #1b254b;
    margin: 0 0 2px;
}

.lk-ticket-form-sub {
    font-size: 13px;
    color: #8a96b3;
    margin: 0;
}

/* Sections */
.lk-ticket-form-section {
    margin-bottom: 28px;
}

.lk-ticket-section-label {
    font-size: 11px;
    font-weight: 700;
    letter-spacing: .08em;
    text-transform: uppercase;
    color: #a0aec0;
    margin-bottom: 12px;
}

/* Rows & groups */
.lk-ticket-form-row {
    display: flex;
    gap: 16px;
}

.lk-ticket-form-row--meta {
    flex-wrap: wrap;
}

.lk-ticket-form-group {
    flex: 1 1 0;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.lk-ticket-form-group--full {
    flex: 0 0 100%;
    width: 100%;
}

.lk-ticket-form-group label {
    font-size: 13px;
    font-weight: 600;
    color: #4a5568;
    margin: 0;
}

/* Inputs */
.lk-ticket-input,
.lk-ticket-textarea {
    width: 100%;
    border: 1.5px solid #e0e6f0;
    border-radius: 10px;
    padding: 10px 14px;
    font-size: 14px;
    color: #1b254b;
    background: #f8faff;
    transition: border-color .15s, box-shadow .15s;
    outline: none;
    box-shadow: none;
}

.lk-ticket-input:focus,
.lk-ticket-textarea:focus {
    border-color: #6656ff;
    background: #ffffff;
    box-shadow: 0 0 0 3px rgba(102,86,255,.10);
}

.lk-ticket-textarea {
    resize: vertical;
    min-height: 220px;
    font-family: inherit;
    line-height: 1.6;
}

/* Selects */
.lk-ticket-select-wrap {
    position: relative;
}

.lk-ticket-select {
    width: 100%;
    border: 1.5px solid #e0e6f0;
    border-radius: 10px;
    padding: 10px 36px 10px 14px;
    font-size: 14px;
    color: #1b254b;
    background: #f8faff;
    appearance: none;
    -webkit-appearance: none;
    cursor: pointer;
    transition: border-color .15s, box-shadow .15s;
    outline: none;
}

.lk-ticket-select:focus {
    border-color: #6656ff;
    background: #ffffff;
    box-shadow: 0 0 0 3px rgba(102,86,255,.10);
}

.lk-ticket-select-arrow {
    position: absolute;
    right: 12px;
    top: 50%;
    transform: translateY(-50%);
    font-size: 14px;
    color: #8a96b3;
    pointer-events: none;
}

/* Pièces jointes */
.lk-ticket-attach-row {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
}

.lk-ticket-file-label {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 9px 16px;
    border: 1.5px dashed #c8d3e8;
    border-radius: 10px;
    font-size: 13px;
    font-weight: 600;
    color: #6656ff;
    background: #f4f3ff;
    cursor: pointer;
    transition: border-color .15s, background .15s;
}

.lk-ticket-file-label:hover {
    border-color: #6656ff;
    background: #eeecff;
}

.lk-ticket-file-input {
    display: none;
}

.lk-ticket-uploads-list {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
}

.lk-ticket-add-file-btn {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 9px 14px;
    border: 1.5px solid #e0e6f0;
    border-radius: 10px;
    font-size: 13px;
    font-weight: 600;
    color: #4a5568;
    background: #f8faff;
    cursor: pointer;
    transition: border-color .15s, background .15s;
}

.lk-ticket-add-file-btn:hover {
    border-color: #6656ff;
    color: #6656ff;
    background: #f4f3ff;
}

.lk-ticket-attach-note {
    font-size: 12px;
    color: #a0aec0;
    margin: 8px 0 0;
    display: flex;
    align-items: center;
    gap: 5px;
}

/* Markdown editor override — cadre cohérent */
.lk-ticket-editor-wrap .CodeMirror,
.lk-ticket-editor-wrap .editor-toolbar,
.lk-ticket-editor-wrap .EasyMDEContainer .CodeMirror {
    border: 1.5px solid #e0e6f0 !important;
    border-radius: 10px !important;
    font-size: 14px !important;
}

.lk-ticket-editor-wrap .editor-toolbar {
    border-bottom: none !important;
    border-radius: 10px 10px 0 0 !important;
    background: #f8faff !important;
}

.lk-ticket-editor-wrap .CodeMirror {
    border-top: none !important;
    border-radius: 0 0 10px 10px !important;
    background: #ffffff !important;
}

.lk-ticket-editor-wrap .editor-toolbar button {
    color: #4a5568 !important;
    border-radius: 6px !important;
}

.lk-ticket-editor-wrap .editor-toolbar button:hover,
.lk-ticket-editor-wrap .editor-toolbar button.active {
    background: #eeecff !important;
    color: #6656ff !important;
}

/* Captcha */
.lk-ticket-captcha-wrap {
    display: flex;
    justify-content: center;
    margin: 24px 0 20px;
}

/* Suggestions auto-réponse */
.lk-ticket-suggestions {
    margin-top: 16px;
    padding: 16px;
    border: 1px solid #e8edf7;
    border-radius: 12px;
    background: #f8faff;
    font-size: 14px;
}

/* Actions */
.lk-ticket-form-actions {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 12px;
    padding-top: 24px;
    border-top: 1px solid #edf1f7;
}

.lk-ticket-submit-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 11px 28px;
    background: #6656ff;
    border: none;
    border-radius: 12px;
    color: #ffffff;
    font-size: 14px;
    font-weight: 700;
    cursor: pointer;
    box-shadow: 0 2px 8px rgba(102,86,255,.28);
    transition: background .15s, box-shadow .15s;
}

.lk-ticket-submit-btn:hover {
    background: #5546ee;
    box-shadow: 0 4px 14px rgba(102,86,255,.38);
}

.lk-ticket-cancel-btn {
    display: inline-flex;
    align-items: center;
    padding: 11px 20px;
    border: 1.5px solid #e0e6f0;
    border-radius: 12px;
    color: #8a96b3;
    font-size: 14px;
    font-weight: 600;
    text-decoration: none;
    transition: border-color .15s, color .15s;
}

.lk-ticket-cancel-btn:hover {
    border-color: #6656ff;
    color: #6656ff;
    text-decoration: none;
}

/* Responsive */
@media (max-width: 768px) {
    .lk-ticket-form-card {
        padding: 24px 20px 28px;
        border-radius: 16px;
    }

    .lk-ticket-form-row {
        flex-direction: column;
    }

    .lk-ticket-form-actions {
        flex-direction: column-reverse;
        align-items: stretch;
    }

    .lk-ticket-submit-btn,
    .lk-ticket-cancel-btn {
        justify-content: center;
        width: 100%;
    }
}

/* ============================================================
   ÉTAPE 1 — Page sélection département
   ============================================================ */
.lk-ticket-dept-page .lk-ticket-form-header {
    margin-bottom: 24px;
}

.lk-ticket-dept-intro {
    font-size: 13px;
    color: #8a96b3;
    margin: 0 0 20px;
    text-align: center;
}

.lk-dept-list {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.lk-dept-row {
    display: flex;
    align-items: center;
    gap: 16px;
    padding: 18px 20px;
    background: #ffffff;
    border: 1.5px solid #e8edf7;
    border-radius: 18px;
    text-decoration: none;
    transition: border-color .15s, box-shadow .15s, background .15s;
    cursor: pointer;
}

.lk-dept-row:hover {
    border-color: #6656ff;
    box-shadow: 0 4px 16px rgba(102,86,255,.12);
    background: #faf9ff;
    text-decoration: none;
}

.lk-dept-row-icon {
    flex: 0 0 44px;
    width: 44px;
    height: 44px;
    border-radius: 13px;
    background: linear-gradient(135deg, #7b6dff 0%, #6656ff 100%);
    display: flex;
    align-items: center;
    justify-content: center;
    color: #ffffff;
    font-size: 20px;
}

.lk-dept-row-body {
    flex: 1 1 0;
    min-width: 0;
}

.lk-dept-row-name {
    font-size: 15px;
    font-weight: 700;
    color: #1b254b;
    margin-bottom: 2px;
}

.lk-dept-row-desc {
    font-size: 13px;
    color: #8a96b3;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.lk-dept-row-arrow {
    flex: 0 0 28px;
    width: 28px;
    height: 28px;
    border-radius: 8px;
    background: #f0eeff;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #6656ff;
    font-size: 14px;
    transition: background .15s, color .15s;
}

.lk-dept-row:hover .lk-dept-row-arrow {
    background: #6656ff;
    color: #ffffff;
}

@media (max-width: 768px) {
    .lk-ticket-dept-page {
        padding: 24px 20px;
    }
    .lk-dept-row {
        padding: 14px 16px;
    }
}

/* ============================================================
   ÉTAPE 1 — Boutons départements : mauve + carré (legacy)
   ============================================================ */
body .lk-ticket-department-card .btn,
body .lk-ticket-department-card .btn-default-yellow-fill,
body.lk-client-area .lk-ticket-department-card .btn,
body.lk-client-area .lk-ticket-department-card .btn-default-yellow-fill {
    background: #6656ff !important;
    background-color: #6656ff !important;
    border-color: #6656ff !important;
    color: #ffffff !important;
    -webkit-text-fill-color: #ffffff !important;
    border-radius: 14px !important;
    font-weight: 700;
    padding: 10px 20px;
    transition: background .15s, box-shadow .15s;
    box-shadow: 0 2px 8px rgba(102,86,255,.25) !important;
}

body .lk-ticket-department-card .btn:hover,
body .lk-ticket-department-card .btn-default-yellow-fill:hover,
body.lk-client-area .lk-ticket-department-card .btn:hover,
body.lk-client-area .lk-ticket-department-card .btn-default-yellow-fill:hover {
    background: #5546ee !important;
    background-color: #5546ee !important;
    border-color: #5546ee !important;
    border-radius: 14px !important;
    box-shadow: 0 4px 12px rgba(102,86,255,.35) !important;
}

/* ============================================================
   TOOLBAR MARKDOWN — Remplacer Glyphicons manquants par FontAwesome
   (Font Awesome 6 Free, weight 900 = Solid)
   ============================================================ */

/* Override critique: body.lk-client-area .btn span { color:white } a spécificité (0,2,2) —
   on doit être à (0,3,1) minimum pour gagner */
body .md-header .btn span,
body .md-header .btn i {
    color: #4a5568 !important;
    -webkit-text-fill-color: #4a5568 !important;
}
body .md-header .btn:hover span,
body .md-header .btn:hover i,
body .md-header .btn.active span,
body .md-header .btn.active i {
    color: #6656ff !important;
    -webkit-text-fill-color: #6656ff !important;
}

.md-header .glyphicon {
    font-family: "Font Awesome 6 Free" !important;
    font-weight: 900 !important;
    font-style: normal;
    font-variant: normal;
    text-rendering: auto;
    -webkit-font-smoothing: antialiased;
    line-height: 1;
}

/* Reset le caractère Glyphicon puis injecter FA6 (double quotes obligatoires pour l'unicode en CSS) */
.md-header .glyphicon-bold::before       { content: "\f032" !important; }
.md-header .glyphicon-italic::before     { content: "\f033" !important; }
.md-header .glyphicon-header::before     { content: "\f1dc" !important; }
.md-header .glyphicon-link::before       { content: "\f0c1" !important; }
.md-header .glyphicon-picture::before    { content: "\f03e" !important; }
.md-header .glyphicon-list::before       { content: "\f0ca" !important; }
.md-header .glyphicon-th-list::before    { content: "\f0cb" !important; }
.md-header .glyphicon-asterisk::before   { content: "\f121" !important; }
.md-header .glyphicon-console::before    { content: "\f121" !important; }
.md-header .glyphicon-comment::before    { content: "\f10d" !important; }
.md-header .glyphicon-search::before     { content: "\f06e" !important; }
.md-header .glyphicon-fullscreen::before { content: "\f065" !important; }

/* Toolbar : style boutons cohérent */
.md-header .btn.btn-default {
    background: #f0eeff !important;
    border-color: transparent !important;
    color: #6656ff !important;
    border-radius: 8px !important;
    padding: 4px 8px;
    margin: 1px;
    font-size: 13px;
    transition: background .12s, color .12s;
}

.md-header .btn.btn-default:hover,
.md-header .btn.btn-default:focus,
.md-header .btn.btn-default.active {
    background: #6656ff !important;
    color: #ffffff !important;
    border-color: #6656ff !important;
}

/* Prévisualiser button */
.md-header .btn-primary {
    background: #6656ff !important;
    border-color: #6656ff !important;
    border-radius: 8px !important;
    padding: 4px 10px;
    font-size: 13px;
}

.md-header .btn-group {
    gap: 2px;
}

/* ============================================================
   PAGE HERO — En-tête de page (services, domaines, etc.)
   Même style que .lk-lpanel-library sur le dashboard
   ============================================================ */
.lk-page-hero {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 16px;
    padding: 18px 24px;
    background: #fff;
    border: 1px solid #e4ebf5;
    border-radius: 24px;
    box-shadow: 0 10px 24px rgba(15, 23, 42, 0.05);
    margin: 0 auto 18px;
    max-width: 1264px;
    width: 100%;
    box-sizing: border-box;
}

/* Variante avec outils intégrés (filtres, recherche) */
.lk-page-hero--with-tools {
    flex-wrap: wrap;
}

.lk-page-hero--with-tools .lk-page-hero-copy {
    flex: 0 0 auto;
}

.lk-page-hero-tools {
    flex: 0 0 auto;
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
    justify-content: flex-end;
}

/* Pills dans le hero : style onglets comme le dashboard */
.lk-page-hero .lk-services-status-pills,
.lk-page-hero .lk-domains-status-pills,
.lk-page-hero .lk-invoices-status-pills {
    background: #f4f7fc !important;
    border-radius: 14px !important;
    padding: 4px !important;
    border: 1px solid #e4eaf4 !important;
    box-shadow: none !important;
    gap: 2px !important;
}

.lk-page-hero .lk-services-status-pill,
.lk-page-hero .lk-domains-status-pill,
.lk-page-hero .lk-invoices-status-pill {
    border-radius: 10px !important;
    border: 0 !important;
    background: transparent !important;
    color: #7d88a6 !important;
    font-size: 12px !important;
    font-weight: 600 !important;
    padding: 6px 11px !important;
    min-height: 30px !important;
    box-shadow: none !important;
}

.lk-page-hero .lk-services-status-pill.is-active,
.lk-page-hero .lk-services-status-pill:hover,
.lk-page-hero .lk-domains-status-pill.is-active,
.lk-page-hero .lk-domains-status-pill:hover,
.lk-page-hero .lk-invoices-status-pill.is-active,
.lk-page-hero .lk-invoices-status-pill:hover {
    background: #ffffff !important;
    color: #1b254b !important;
    box-shadow: 0 2px 6px rgba(15, 23, 42, 0.08) !important;
}

/* Search dans le hero : taille compacte */
.lk-page-hero .lk-lpanel-search-input {
    min-height: 34px !important;
    font-size: 13px !important;
    width: 180px !important;
    padding: 0 12px !important;
}

/* Bouton bulk domains dans le hero */
.lk-page-hero .lk-domains-bulk-btn {
    min-height: 34px;
    padding: 0 12px;
    font-size: 12px;
    border-radius: 10px;
    border: 1px solid #e4eaf4;
    background: #f4f7fc;
    color: #55627f;
    display: inline-flex;
    align-items: center;
    gap: 5px;
    cursor: pointer;
}

.lk-page-hero .lk-domains-bulk-btn:hover {
    background: #edf0f9;
}

@media (max-width: 576px) {
    .lk-page-hero--with-tools .lk-page-hero-tools { width: 100%; justify-content: flex-start; }
}

.lk-page-hero-icon {
    flex: 0 0 52px;
    width: 52px;
    height: 52px;
    border-radius: 15px;
    background: linear-gradient(135deg, #7b6dff 0%, #6656ff 100%);
    display: flex;
    align-items: center;
    justify-content: center;
    color: #fff;
    font-size: 22px;
}

.lk-page-hero-copy {
    flex: 1 1 0;
    min-width: 0;
}

.lk-page-hero-title {
    font-size: 22px;
    font-weight: 800;
    color: #1b254b;
    margin: 0 0 4px;
    line-height: 1.1;
    letter-spacing: -0.03em;
}

.lk-page-hero-sub {
    font-size: 14px;
    color: #7f8aa8;
    margin: 0;
}

.lk-page-hero-cta {
    flex: 0 0 auto;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 10px 20px;
    background: linear-gradient(135deg, #7b6dff 0%, #6656ff 100%);
    color: #fff !important;
    font-size: 13px;
    font-weight: 600;
    border-radius: 12px;
    text-decoration: none !important;
    transition: box-shadow .2s, transform .1s;
}

.lk-page-hero-cta:hover {
    box-shadow: 0 6px 18px rgba(102,86,255,.35);
    transform: translateY(-1px);
    color: #fff !important;
}

@media (max-width: 576px) {
    .lk-page-hero { flex-wrap: wrap; }
    .lk-page-hero-cta { width: 100%; justify-content: center; }
}

/* ============================================================
   SECTION INTÉGRÉE (services / domaines / factures)
   lk-lpanel-library-head contient le titre + les outils
   ============================================================ */

/* Override : h2 dans lk-lpanel-library-head garde la taille hero, pas 34px */
.lk-lpanel-library-head .lk-page-hero-title {
    font-size: 22px !important;
    font-weight: 800 !important;
    letter-spacing: -0.03em !important;
    line-height: 1.1 !important;
    color: #1b254b !important;
}

/* Header row dans les sections intégrées */
body.lk-client-area .lk-services-section .lk-lpanel-library-head,
body.lk-client-area .lk-domains-section .lk-lpanel-library-head,
body.lk-client-area .lk-invoices-section .lk-lpanel-library-head,
body.lk-client-area .lk-tickets-section .lk-lpanel-library-head {
    align-items: center !important;
    padding-right: 0 !important;
    flex-wrap: wrap !important;
    gap: 12px !important;
    margin-bottom: 20px !important;
}

/* Côté gauche : titre + sous-titre */
.lk-section-head-left { flex: 1 1 auto; min-width: 0; }

/* Côté droit : pills + search + bouton CTA — alignés sur une ligne, wrap si besoin */
.lk-section-head-right {
    flex: 0 0 auto;
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
    justify-content: flex-end;
}

/* Harmoniser la hauteur de tous les éléments dans lk-section-head-right */
.lk-section-head-right .lk-search-wrap {
    height: 38px !important;
    padding: 0 12px !important;
    box-sizing: border-box !important;
}
.lk-section-head-right .lk-section-cta {
    height: 38px !important;
    padding: 0 16px !important;
    box-sizing: border-box !important;
}
/* Réduire le padding du container tabs pour s'aligner à 38px */
.lk-section-head-right .lk-lpanel-tabs {
    padding: 4px !important;
}

/* Champ recherche compact */
.lk-section-search {
    width: 160px !important;
    flex-shrink: 1 !important;
    min-width: 80px !important;
    font-size: 13px !important;
}

/* Bouton CTA dans les sections intégrées — couleur garantie */
.lk-section-cta {
    display: inline-flex !important;
    align-items: center;
    gap: 7px;
    padding: 8px 16px;
    background: linear-gradient(135deg, #7b6dff 0%, #6656ff 100%) !important;
    color: #ffffff !important;
    -webkit-text-fill-color: #ffffff !important;
    font-size: 13px;
    font-weight: 600;
    border-radius: 12px;
    text-decoration: none !important;
    white-space: nowrap;
    transition: box-shadow .2s, transform .1s;
}

.lk-section-cta:hover {
    box-shadow: 0 6px 18px rgba(102, 86, 255, 0.35);
    transform: translateY(-1px);
    color: #ffffff !important;
    -webkit-text-fill-color: #ffffff !important;
    text-decoration: none !important;
}

/* Neutraliser le card-style de lk-list quand il est à l'intérieur d'un lk-lpanel-library */
.lk-services-section .lk-list {
    background: transparent !important;
    border: none !important;
    border-radius: 0 !important;
    box-shadow: none !important;
    overflow: visible;
}

/* Séparateur entre items (le border-bottom du dernier item disparaît) */
.lk-services-section .lk-list-item {
    border-bottom: 1px solid var(--lk-border);
}

.lk-services-section .lk-list-item:last-child {
    border-bottom: none;
}

.lk-services-section .lk-services-col-head {
    max-width: 100%;
}

.lk-domains-section .lk-table-shell,
.lk-domains-section .lk-domains-page,
.lk-domains-section .lk-table-shell .table-container,
.lk-invoices-section .lk-table-shell,
.lk-invoices-section .lk-invoices-page,
.lk-invoices-section .lk-table-shell .table-container,
.lk-tickets-section .lk-table-shell,
.lk-tickets-section .lk-tickets-page,
.lk-tickets-section .lk-table-shell .table-container {
    box-shadow: none !important;
    background: transparent !important;
    border: none !important;
    border-radius: 0 !important;
    max-width: 100% !important;
    padding: 0 !important;
    margin: 0 !important;
}

/* Adapter lk-lpanel-library pour les pages de liste (plus de padding-right) */
body.lk-client-area .lk-services-section,
body.lk-client-area .lk-domains-section,
body.lk-client-area .lk-invoices-section,
body.lk-client-area .lk-tickets-section,
body.lk-client-area .lk-masspay-section {
    max-width: 1264px;
    width: 100%;
    margin-left: auto;
    margin-right: auto;
}

/* ============================================================
   BOUTONS — Harmonisation mauve dans le client area
   btn-primary, btn-info, btn-success, btn-default bleus → mauve
   ============================================================ */

body.lk-client-area .btn-primary,
body.lk-client-area .btn-info {
    background-color: #6656ff !important;
    background: linear-gradient(135deg, #7b6dff 0%, #6656ff 100%) !important;
    border-color: #6656ff !important;
    color: #ffffff !important;
    -webkit-text-fill-color: #ffffff !important;
    border-radius: 12px !important;
    font-weight: 600;
    box-shadow: 0 2px 8px rgba(102,86,255,.20) !important;
    transition: box-shadow .2s, transform .1s !important;
}

body.lk-client-area .btn-primary:hover,
body.lk-client-area .btn-info:hover,
body.lk-client-area .btn-primary:focus,
body.lk-client-area .btn-info:focus {
    background-color: #5546ee !important;
    background: #5546ee !important;
    border-color: #5546ee !important;
    color: #ffffff !important;
    box-shadow: 0 4px 14px rgba(102,86,255,.35) !important;
    transform: translateY(-1px);
}

body.lk-client-area .btn-primary:active,
body.lk-client-area .btn-info:active {
    transform: translateY(0);
    box-shadow: 0 2px 6px rgba(102,86,255,.25) !important;
}

/* Liens bleus → mauve dans le client area */
body.lk-client-area a.text-primary,
body.lk-client-area .text-primary {
    color: #6656ff !important;
}

body.lk-client-area a.text-info,
body.lk-client-area .text-info {
    color: #6656ff !important;
}

/* Liens simples dans le client area */
body.lk-client-area .panel a,
body.lk-client-area .well a,
body.lk-client-area .card a {
    color: #6656ff;
}

body.lk-client-area .panel a:hover,
body.lk-client-area .well a:hover,
body.lk-client-area .card a:hover {
    color: #5546ee;
}

/* Bouton default dans le client area (ex : Annuler, Retour) */
body.lk-client-area .btn-default:not(.btn-default-yellow-fill):not(.btn-default-pink-fill) {
    border-color: #e0e6f0 !important;
    color: #4a5378 !important;
    background: #ffffff !important;
    border-radius: 12px !important;
    box-shadow: none !important;
}

body.lk-client-area .btn-default:not(.btn-default-yellow-fill):not(.btn-default-pink-fill):hover {
    border-color: #6656ff !important;
    color: #6656ff !important;
    background: #f0eeff !important;
}

/* ============================================================
   MODAL — Style card moderne
   ============================================================ */
body.lk-client-area .modal-content {
    border-radius: 20px !important;
    border: none !important;
    box-shadow: 0 20px 60px rgba(102,86,255,.15) !important;
    overflow: hidden;
}

body.lk-client-area .modal-header {
    background: #fafbff !important;
    border-bottom: 1.5px solid #edf1f7 !important;
    padding: 20px 24px !important;
}

body.lk-client-area .modal-title {
    font-weight: 700 !important;
    color: #1b254b !important;
    font-size: 16px !important;
}

body.lk-client-area .modal-footer {
    background: #fafbff !important;
    border-top: 1.5px solid #edf1f7 !important;
    padding: 16px 24px !important;
}

body.lk-client-area .modal-body {
    padding: 24px !important;
}

body.lk-client-area .modal-body .form-control {
    border-radius: 10px !important;
    border: 1.5px solid #e8edf7 !important;
    background: #fafbff !important;
    box-shadow: none !important;
}

body.lk-client-area .modal-body .form-control:focus {
    border-color: #6656ff !important;
    box-shadow: 0 0 0 3px rgba(102,86,255,.10) !important;
}

/* ============================================================
   BTN-SUCCESS → mauve
   ============================================================ */
body.lk-client-area .btn-success {
    background-color: #6656ff !important;
    background: linear-gradient(135deg, #7b6dff 0%, #6656ff 100%) !important;
    border-color: #6656ff !important;
    color: #ffffff !important;
    -webkit-text-fill-color: #ffffff !important;
    border-radius: 12px !important;
    font-weight: 600 !important;
    box-shadow: 0 2px 8px rgba(102,86,255,.20) !important;
}

body.lk-client-area .btn-success:hover,
body.lk-client-area .btn-success:focus {
    background: #5546ee !important;
    border-color: #5546ee !important;
    color: #ffffff !important;
    box-shadow: 0 4px 14px rgba(102,86,255,.35) !important;
}

/* ============================================================
   PROGRESS BAR → mauve
   ============================================================ */
body.lk-client-area .progress {
    border-radius: 8px !important;
    height: 8px !important;
    background-color: #edf1f7 !important;
    box-shadow: none !important;
}

body.lk-client-area .progress-bar {
    background-color: #6656ff !important;
    background-image: none !important;
    box-shadow: none !important;
}

body.lk-client-area .progress-bar-success { background-color: #6656ff !important; background-image: none !important; }
body.lk-client-area .progress-bar-warning { background-color: #f59e0b !important; background-image: none !important; }
body.lk-client-area .progress-bar-danger  { background-color: #ef4444 !important; background-image: none !important; }

/* ============================================================
   NAV TABS → mauve active
   ============================================================ */
body.lk-client-area .nav-tabs {
    border-bottom: 2px solid #edf1f7 !important;
}

body.lk-client-area .nav-tabs > li.active > a,
body.lk-client-area .nav-tabs > li.active > a:hover,
body.lk-client-area .nav-tabs > li.active > a:focus {
    color: #6656ff !important;
    border-color: transparent transparent #6656ff !important;
    border-bottom-width: 2px !important;
    font-weight: 600 !important;
    background: transparent !important;
}

body.lk-client-area .nav-tabs > li > a {
    color: #8a96b3 !important;
    border-bottom: 2px solid transparent !important;
}

body.lk-client-area .nav-tabs > li > a:hover {
    color: #6656ff !important;
    background: #f0eeff !important;
    border-color: transparent !important;
}

/* ============================================================
   PANELS → style card
   ============================================================ */
body.lk-client-area .panel {
    border-radius: 16px !important;
    border: 1.5px solid #e8edf7 !important;
    box-shadow: none !important;
    overflow: hidden;
}

body.lk-client-area .panel-heading {
    border-radius: 0 !important;
    font-weight: 600 !important;
    font-size: 14px !important;
    padding: 14px 20px !important;
}

body.lk-client-area .panel-primary > .panel-heading {
    background: linear-gradient(135deg, #7b6dff 0%, #6656ff 100%) !important;
    border-color: #6656ff !important;
    color: #ffffff !important;
}

body.lk-client-area .panel-default > .panel-heading {
    background: #fafbff !important;
    border-bottom: 1.5px solid #e8edf7 !important;
    color: #1b254b !important;
}

body.lk-client-area .panel-info > .panel-heading {
    background: #f0eeff !important;
    border-bottom: 1.5px solid #d4ceff !important;
    color: #6656ff !important;
}

body.lk-client-area .panel-success > .panel-heading {
    background: #d1fae5 !important;
    border-bottom: 1.5px solid #6ee7b7 !important;
    color: #065f46 !important;
}

body.lk-client-area .panel-body {
    padding: 20px !important;
}

/* ============================================================
   PAGINATION → mauve active
   ============================================================ */
body.lk-client-area .pagination > li > a,
body.lk-client-area .pagination > li > span {
    border-radius: 8px !important;
    margin: 0 2px !important;
    color: #4a5378 !important;
    border-color: #e8edf7 !important;
}

body.lk-client-area .pagination > li.active > a,
body.lk-client-area .pagination > li.active > span,
body.lk-client-area .pagination > li.active > a:hover,
body.lk-client-area .pagination > li.active > span:hover {
    background-color: #6656ff !important;
    border-color: #6656ff !important;
    color: #ffffff !important;
}

body.lk-client-area .pagination > li > a:hover {
    color: #6656ff !important;
    border-color: #d4ceff !important;
    background: #f0eeff !important;
}

/* ============================================================
   LABELS / BADGES → mauve
   ============================================================ */
body.lk-client-area .label-primary,
body.lk-client-area .label-info {
    background-color: #6656ff !important;
}

body.lk-client-area .badge {
    background-color: #6656ff !important;
}

/* ============================================================
   TABLES → style propre
   ============================================================ */
body.lk-client-area .table > thead > tr > th {
    border-bottom: 2px solid #e8edf7 !important;
    color: #8a96b3 !important;
    font-size: 12px !important;
    font-weight: 700 !important;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    padding: 12px 16px !important;
}

body.lk-client-area .table > tbody > tr > td {
    border-top: 1px solid #f0f3fb !important;
    vertical-align: middle !important;
    padding: 12px 16px !important;
}

body.lk-client-area .table-striped > tbody > tr:nth-of-type(odd) {
    background-color: #fafbff !important;
}

body.lk-client-area .table-hover > tbody > tr:hover {
    background-color: #f0eeff !important;
}

/* ============================================================
   ALERTS → bordure mauve pour info
   ============================================================ */
body.lk-client-area .alert-info {
    background-color: #f0eeff !important;
    border-color: #d4ceff !important;
    color: #4a3fa0 !important;
}

/* ============================================================
   PAGES AUTH  (login / register / password-reset)
   ============================================================ */

/* Cacher le header/nav sur les pages auth (pwreset, login, register) */
body:has(.lk-auth-page) #header,
body:has(.lk-auth-page) #spinner-area,
body:has(.lk-auth-page) .body-borders {
    display: none !important;
}

body:has(.lk-auth-page) .wrapper.sec-normal {
    margin: 0 !important;
    padding: 0 !important;
}

.lk-auth-page {
    position: fixed;
    top: 0; right: 0; bottom: 0; left: 0;
    z-index: 99999;
    background: #f5f6fa;
    overflow-y: auto;
    display: flex;
    align-items: flex-start;
    justify-content: center;
    padding: 40px 16px;
}

.lk-auth-card {
    background: #ffffff;
    border-radius: 24px;
    box-shadow: 0 8px 40px rgba(102, 86, 255, 0.10);
    padding: 40px 40px 32px;
    width: 100%;
    max-width: 480px;
}

.lk-auth-card--wide {
    max-width: 700px;
}

.lk-auth-logo {
    text-align: center;
    margin-bottom: 28px;
}

.lk-auth-logo-img {
    height: 36px;
    width: auto;
}

.lk-auth-header {
    text-align: center;
    margin-bottom: 28px;
}

.lk-auth-header-icon {
    width: 56px;
    height: 56px;
    border-radius: 16px;
    background: linear-gradient(135deg, #7b6dff 0%, #6656ff 100%);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: #ffffff;
    font-size: 24px;
    margin-bottom: 16px;
}

.lk-auth-title {
    font-size: 22px;
    font-weight: 700;
    color: #1b254b;
    margin: 0 0 6px;
}

.lk-auth-sub {
    font-size: 14px;
    color: #8a96b3;
    margin: 0;
}

.lk-auth-form-group {
    margin-bottom: 16px;
}

.lk-auth-form-group label {
    display: block;
    font-size: 13px;
    font-weight: 600;
    color: #4a5378;
    margin-bottom: 6px;
}

.lk-auth-options {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 20px;
    font-size: 13px;
}

.lk-auth-remember {
    display: flex;
    align-items: center;
    gap: 8px;
    color: #4a5378;
}

.lk-auth-remember input[type="checkbox"] {
    accent-color: #6656ff;
    width: 16px;
    height: 16px;
    cursor: pointer;
}

.lk-auth-remember label {
    margin: 0;
    cursor: pointer;
    color: #4a5378;
    font-size: 13px;
}

.lk-auth-forgot {
    color: #6656ff;
    font-weight: 500;
    text-decoration: none;
}

.lk-auth-forgot:hover {
    text-decoration: underline;
    color: #5546ee;
}

.lk-auth-submit-btn {
    display: block;
    width: 100%;
    padding: 13px 20px;
    background: linear-gradient(135deg, #7b6dff 0%, #6656ff 100%);
    color: #ffffff !important;
    font-size: 15px;
    font-weight: 600;
    border: none;
    border-radius: 14px;
    cursor: pointer;
    text-align: center;
    transition: box-shadow .2s, transform .1s;
    margin-top: 4px;
    -webkit-text-fill-color: #ffffff !important;
}

.lk-auth-submit-btn:hover {
    box-shadow: 0 6px 20px rgba(102, 86, 255, 0.35);
    transform: translateY(-1px);
    color: #ffffff !important;
    text-decoration: none;
}

.lk-auth-footer {
    text-align: center;
    margin-top: 24px;
    font-size: 13px;
    color: #8a96b3;
}

.lk-auth-footer a,
.lk-auth-footer-link {
    color: #6656ff;
    font-weight: 600;
    text-decoration: none;
    margin-left: 4px;
}

.lk-auth-footer-link:hover {
    text-decoration: underline;
}

.lk-auth-divider {
    display: flex;
    align-items: center;
    gap: 12px;
    margin: 20px 0;
    color: #8a96b3;
    font-size: 13px;
}

.lk-auth-divider::before,
.lk-auth-divider::after {
    content: '';
    flex: 1;
    height: 1px;
    background: #E0E5F2;
}

.lk-auth-captcha {
    margin-bottom: 16px;
}

.lk-auth-section-label {
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: #8a96b3;
    margin: 24px 0 14px;
    padding-bottom: 8px;
    border-bottom: 1px solid #edf1f7;
}

.lk-auth-msg {
    font-size: 14px;
    color: #4a5378;
    line-height: 1.6;
    margin: 12px 0 20px;
}

/* form-control & field inputs inside auth card */
.lk-auth-card .form-control,
.lk-auth-card input.field,
.lk-auth-card select.field,
.lk-auth-card select.form-control {
    height: 46px !important;
    border-radius: 12px !important;
    border: 1.5px solid #e8edf7 !important;
    padding: 10px 16px !important;
    font-size: 14px !important;
    color: #1b254b !important;
    background: #fafbff !important;
    box-shadow: none !important;
    transition: border-color .15s, box-shadow .15s;
    width: 100% !important;
}

.lk-auth-card .form-control:focus,
.lk-auth-card input.field:focus,
.lk-auth-card select.field:focus,
.lk-auth-card select.form-control:focus {
    border-color: #6656ff !important;
    box-shadow: 0 0 0 3px rgba(102, 86, 255, 0.10) !important;
    outline: none !important;
    background: #ffffff !important;
}

/* Password strength bar inside auth card */
.lk-auth-card .progress {
    border-radius: 6px;
    height: 6px;
    margin-top: 8px;
}

/* Checkbox / accepttos inside auth card */
.lk-auth-card .custom-control-label {
    font-size: 13px;
    color: #4a5378;
}

/* Submit btn inside auth card (input type=submit fallback) */
.lk-auth-card input[type="submit"].lk-auth-submit-btn {
    -webkit-appearance: none;
    appearance: none;
}

/* Divider with text (billingAddress / personalInfo) */
.lk-auth-card .divider {
    display: flex;
    align-items: center;
    gap: 12px;
    margin: 20px 0 16px;
    color: #8a96b3;
    font-size: 12px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.06em;
}

.lk-auth-card .divider span:first-child,
.lk-auth-card .divider span:last-child {
    flex: 1;
    height: 1px;
    background: #E0E5F2;
}

@media (max-width: 576px) {
    .lk-auth-card {
        padding: 28px 20px 24px;
        border-radius: 18px;
    }
}

/* ============================================================
   STATUT DES SERVEURS
   ============================================================ */

.lk-status-card {
    background: #ffffff;
    border-radius: 18px;
    border: 1.5px solid #e8edf7;
    margin-bottom: 16px;
    overflow: hidden;
}

.lk-status-card-header {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 16px 20px;
    font-weight: 600;
    font-size: 15px;
    color: #1b254b;
    border-bottom: 1.5px solid #e8edf7;
    background: #fafbff;
}

.lk-status-card-header--warning { border-left: 4px solid #f59e0b; }
.lk-status-card-header--info    { border-left: 4px solid #6656ff; }

.lk-status-card-badge {
    font-size: 11px;
    font-weight: 700;
    padding: 3px 10px;
    border-radius: 20px;
    margin-left: auto;
    text-transform: uppercase;
    letter-spacing: 0.04em;
}

.lk-status-card-badge--warning  { background: #fef3c7; color: #92400e; }
.lk-status-card-badge--info     { background: #f0eeff; color: #6656ff; }
.lk-status-card-badge--danger   { background: #fee2e2; color: #991b1b; }
.lk-status-card-badge--success  { background: #d1fae5; color: #065f46; }

.lk-status-card-body {
    padding: 16px 20px;
}

.lk-status-meta {
    display: flex;
    flex-wrap: wrap;
    gap: 16px;
    margin-bottom: 12px;
}

.lk-status-meta-item {
    font-size: 13px;
    color: #4a5378;
}

.lk-status-meta-item strong {
    color: #1b254b;
}

.lk-status-desc {
    font-size: 14px;
    color: #4a5378;
    line-height: 1.6;
}

.lk-status-table-wrap {
    background: #ffffff;
    border-radius: 18px;
    border: 1.5px solid #e8edf7;
    overflow: hidden;
    margin-top: 24px;
}

.lk-status-table {
    width: 100%;
    border-collapse: collapse;
    margin: 0;
}

.lk-status-table thead th {
    background: #fafbff;
    padding: 12px 16px;
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: #8a96b3;
    border-bottom: 1.5px solid #e8edf7;
}

.lk-status-table tbody td {
    padding: 14px 16px;
    font-size: 14px;
    color: #1b254b;
    border-bottom: 1px solid #f0f3fb;
    vertical-align: middle;
}

.lk-status-table tbody tr:last-child td {
    border-bottom: none;
}

.lk-status-pager {
    display: flex;
    gap: 8px;
    margin: 20px 0;
}

.lk-status-pager .btn {
    border-radius: 10px !important;
    border: 1.5px solid #e8edf7 !important;
    color: #4a5378 !important;
    background: #ffffff !important;
    font-size: 13px !important;
    padding: 8px 16px !important;
    box-shadow: none !important;
}

.lk-status-pager .btn:not(.disabled):hover {
    border-color: #6656ff !important;
    color: #6656ff !important;
}

/* ============================================================
   EMAILS / QUOTES PAGES — DataTable layout transparent
   ============================================================ */
body.lk-client-area .lk-account-page--emails .lk-table-shell,
body.lk-client-area .lk-account-page--quotes .lk-table-shell {
    max-width: 100%;
}

body.lk-client-area .lk-account-page--emails .dataTables_wrapper,
body.lk-client-area .lk-account-page--emails .table-container,
body.lk-client-area .lk-account-page--emails table.dataTable,
body.lk-client-area .lk-account-page--emails table.dataTable thead,
body.lk-client-area .lk-account-page--emails table.dataTable tbody,
body.lk-client-area .lk-account-page--quotes .dataTables_wrapper,
body.lk-client-area .lk-account-page--quotes .table-container,
body.lk-client-area .lk-account-page--quotes table.dataTable,
body.lk-client-area .lk-account-page--quotes table.dataTable thead,
body.lk-client-area .lk-account-page--quotes table.dataTable tbody {
    background: #ffffff !important;
}

body.lk-client-area .lk-account-page--emails .dataTables_length,
body.lk-client-area .lk-account-page--emails .dataTables_info,
body.lk-client-area .lk-account-page--emails .dataTables_paginate,
body.lk-client-area .lk-account-page--quotes .dataTables_length,
body.lk-client-area .lk-account-page--quotes .dataTables_info,
body.lk-client-area .lk-account-page--quotes .dataTables_paginate {
    background: transparent !important;
}

body.lk-client-area .lk-account-page--emails .table.table-list tbody tr,
body.lk-client-area .lk-account-page--emails .table.table-list tbody tr:nth-child(even),
body.lk-client-area .lk-account-page--quotes .table.table-list tbody tr,
body.lk-client-area .lk-account-page--quotes .table.table-list tbody tr:nth-child(even) {
    background: #ffffff !important;
}

body.lk-client-area .lk-account-page--emails .table.table-list tbody td,
body.lk-client-area .lk-account-page--quotes .table.table-list tbody td {
    background: transparent !important;
    vertical-align: middle;
}

body.lk-client-area .lk-account-page--emails .table.table-list tbody tr:hover,
body.lk-client-area .lk-account-page--quotes .table.table-list tbody tr:hover {
    background: #f5f3ff !important;
}

/* ============================================================
   DOMAIN LINK COLORS — Noms de domaine en mauve
   ============================================================ */
body.lk-client-area .lk-domain-link,
body.lk-client-area .lk-list-sub a {
    color: #6656ff !important;
    font-weight: 600;
    text-decoration: none !important;
}

body.lk-client-area .lk-domain-link:hover,
body.lk-client-area .lk-list-sub a:hover {
    color: #5147f0 !important;
    text-decoration: underline !important;
}

/* ============================================================
   TABLE ROWS — Style amélioré pour domaines, factures, courriels
   ============================================================ */

/* Hover effet mauve doux sur les lignes */
body.lk-client-area .lk-table-shell .table.table-list tbody tr:hover,
body.lk-client-area .lk-invoices-page .table.table-list tbody tr:hover,
body.lk-client-area .lk-domains-page .table.table-list tbody tr:hover {
    background: #f5f3ff !important;
}

/* Cellules verticalement centrées */
body.lk-client-area .lk-table-shell .table.table-list tbody td {
    vertical-align: middle;
    padding: 14px 12px;
}

body.lk-client-area .lk-table-shell .table.table-list thead th {
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: #919cb5;
    padding: 12px 12px;
    border-bottom: 2px solid #edf0f9;
    background: transparent;
}

/* ============================================================
   ADD FUNDS PAGE
   ============================================================ */
body.lk-client-area .lk-addfunds-wrap {
    max-width: 520px;
    margin: 0 auto;
}

body.lk-client-area .lk-addfunds-info {
    background: #f5f7ff;
    border: 1.5px solid #e4e8f8;
    border-radius: 14px;
    padding: 18px 22px;
    margin-bottom: 24px;
}

body.lk-client-area .lk-addfunds-info-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 8px 0;
    border-bottom: 1px solid #edf0fb;
    font-size: 14px;
}

body.lk-client-area .lk-addfunds-info-row:last-child {
    border-bottom: none;
}

body.lk-client-area .lk-addfunds-info-label {
    color: #7b86a3;
    font-weight: 500;
}

body.lk-client-area .lk-addfunds-info-value {
    color: #1b254b;
    font-weight: 700;
}

body.lk-client-area .lk-addfunds-form {
    background: #ffffff;
    border: 1.5px solid #e4e8f8;
    border-radius: 14px;
    padding: 24px;
}

body.lk-client-area .lk-addfunds-notice {
    font-size: 12px;
    color: #8a96b3;
    margin-bottom: 16px;
    font-style: italic;
}

/* ============================================================
   PAGINATION CUSTOM — page services (lk-list)
   Même style que le DataTable paginate container
   ============================================================ */
.lk-pagination {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    padding: 14px 0 2px;
}

.lk-pagination-wrap {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 6px;
    border-radius: 16px;
    background: #f5f7fc;
    border: 1px solid #e4eaf4;
    box-shadow: 0 8px 18px rgba(31, 45, 79, 0.04);
}

.lk-pagination-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 36px;
    min-width: 36px;
    padding: 0 14px;
    border: 0;
    border-radius: 12px;
    background: transparent;
    color: #7d88a6;
    -webkit-text-fill-color: #7d88a6;
    font-size: 13px;
    font-weight: 700;
    cursor: pointer;
    transition: background .15s, color .15s;
}

.lk-pagination-btn:hover:not(:disabled) {
    background: #ffffff;
    color: #22304d;
    -webkit-text-fill-color: #22304d;
}

.lk-pagination-btn.is-active {
    background: linear-gradient(135deg, #7b6dff 0%, #6656ff 100%);
    color: #ffffff !important;
    -webkit-text-fill-color: #ffffff !important;
    box-shadow: 0 4px 10px rgba(102, 86, 255, 0.30);
}

.lk-pagination-btn:disabled {
    opacity: 0.40;
    cursor: not-allowed;
}

/* Per-page selector */
.lk-per-page-wrap {
    display: flex; align-items: center; gap: 7px;
    font-size: 12px; color: #8a96b3; white-space: nowrap;
}
.lk-per-page-select {
    -webkit-appearance: none;
    appearance: none;
    border: 1px solid #e4eaf4;
    border-radius: 10px;
    background: #f5f7fc url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6' viewBox='0 0 10 6'%3E%3Cpath d='M1 1l4 4 4-4' stroke='%238a96b3' stroke-width='1.5' fill='none' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") right 8px center / 10px 6px no-repeat;
    color: #55627f;
    font-size: 12px;
    font-weight: 600;
    padding: 5px 26px 5px 10px;
    cursor: pointer;
    outline: none;
}
.lk-per-page-select:hover { border-color: #c5cfe8; }

/* Bulk action bar (factures) */
.lk-bulk-bar {
    position: sticky; top: 16px; z-index: 100;
    display: flex; align-items: center; gap: 12px;
    padding: 12px 20px; margin-bottom: 16px;
    background: #f0eeff;
    border: 1px solid #d8d2ff;
    border-radius: 16px;
    box-shadow: 0 4px 20px rgba(102, 86, 255, 0.12);
    flex-wrap: wrap;
}
.lk-bulk-bar-info {
    flex: 1 1 auto; display: flex; align-items: center; gap: 16px;
    font-size: 13px;
}
.lk-bulk-bar-count { font-weight: 700; color: #6656ff; }
.lk-bulk-bar-total { color: #7b6dff; font-size: 12px; font-weight: 600; }
.lk-bulk-bar-actions { display: flex; align-items: center; gap: 8px; }
.lk-bulk-bar-btn {
    display: inline-flex; align-items: center; gap: 6px;
    padding: 8px 16px; border-radius: 10px; border: 0;
    font-size: 13px; font-weight: 600; cursor: pointer;
    text-decoration: none !important; transition: background .15s, opacity .15s;
}
.lk-bulk-bar-btn:hover { opacity: 0.88; }
.lk-bulk-bar-btn--pay {
    background: linear-gradient(135deg, #7b6dff 0%, #6656ff 100%);
    color: #fff !important; -webkit-text-fill-color: #fff !important;
}
.lk-bulk-bar-btn--dl {
    background: #e6e1ff;
    border: 1px solid #c9c2ff;
    color: #6656ff !important; -webkit-text-fill-color: #6656ff !important;
}
.lk-bulk-bar-btn--dismiss {
    background: transparent;
    border: 1px solid #c9c2ff;
    color: #9589ff !important;
    -webkit-text-fill-color: #9589ff !important;
    padding: 8px; border-radius: 8px; margin-left: 4px;
}
.lk-bulk-bar-btn--dismiss:hover { background: #e6e1ff; }

/* ── Bouton "Payer" par ligne (impayée) ───────────────────────── */
/* Double classe pour surclasser la règle lk-lpanel-row-btn qui apparaît plus loin */
body.lk-client-area .lk-invoices-section .lk-table-action-pay,
body.lk-client-area .lk-invoices-section .lk-table-action-pay:link,
body.lk-client-area .lk-invoices-section .lk-table-action-pay:visited,
body.lk-client-area .lk-invoices-section .lk-table-action-pay.lk-lpanel-row-btn,
body.lk-client-area .lk-invoices-section .lk-table-action-pay.lk-lpanel-row-btn:link,
body.lk-client-area .lk-invoices-section .lk-table-action-pay.lk-lpanel-row-btn:visited {
    background: linear-gradient(135deg, #7b6dff 0%, #6656ff 100%) !important;
    color: #fff !important;
    -webkit-text-fill-color: #fff !important;
    border: none !important;
    display: inline-flex !important;
    align-items: center !important;
    gap: 5px !important;
}
body.lk-client-area .lk-invoices-section .lk-table-action-pay:hover,
body.lk-client-area .lk-invoices-section .lk-table-action-pay.lk-lpanel-row-btn:hover {
    background: linear-gradient(135deg, #6656ff 0%, #5546ef 100%) !important;
    color: #fff !important;
    -webkit-text-fill-color: #fff !important;
    opacity: 0.92;
}

/* ── Bouton "Tout payer" dans le header ───────────────────────── */
.lk-section-cta--pay {
    background: linear-gradient(135deg, #7b6dff 0%, #6656ff 100%);
    color: #fff !important;
    -webkit-text-fill-color: #fff !important;
    border: none !important;
}
.lk-section-cta--pay:hover {
    background: linear-gradient(135deg, #6656ff 0%, #5546ef 100%);
    color: #fff !important;
    -webkit-text-fill-color: #fff !important;
    opacity: 0.9;
}

/* ── Bouton "CSV" ghost dans le header ────────────────────────── */
.lk-section-cta--ghost {
    background: transparent !important;
    color: #6656ff !important;
    -webkit-text-fill-color: #6656ff !important;
    border: 1px solid #d8d2ff !important;
    box-shadow: none !important;
    cursor: pointer;
}
.lk-section-cta--ghost:hover {
    background: #f0eeff !important;
    color: #6656ff !important;
    -webkit-text-fill-color: #6656ff !important;
    box-shadow: none !important;
    transform: none !important;
}

/* ── Filtres années ───────────────────────────────────────────── */
.lk-invoices-year-tabs { gap: 4px; }
.lk-invoices-year-pill { font-variant-numeric: tabular-nums; }

/* Checkbox dans la table factures */
body.lk-client-area .lk-invoices-section .table-list input[type="checkbox"] {
    width: 16px; height: 16px; cursor: pointer; accent-color: #6656ff;
}
body.lk-client-area .lk-invoices-section .table-list tr.lk-row-selected td {
    background: #f5f3ff !important;
}

/* ============================================================
   CACHER LE SÉLECTEUR "AFFICHER" NATIF DE DATATABLES
   On utilise notre propre sélecteur "Par page"
   ============================================================ */
body.lk-client-area .lk-domains-section .dataTables_length,
body.lk-client-area .lk-invoices-section .dataTables_length {
    display: none !important;
}

/* ============================================================
   DOMAINES — Fix overflow pour dropdown dans le tableau
   ============================================================ */
/* Le wrapper DataTable génère un div.listtable.table-responsive qui
   a overflow-x:auto → les dropdowns sont coupés. On le corrige. */
body.lk-client-area .lk-domains-section .listtable.table-responsive,
body.lk-client-area .lk-domains-section .table-container {
    overflow: visible !important;
}

/* S'assurer que le dropdown Bootstrap est bien positionné */
body.lk-client-area .lk-domain-actions {
    position: relative !important;
}

body.lk-client-area .lk-domain-actions .dropdown-menu {
    position: absolute !important;
    right: 0 !important;
    left: auto !important;
    top: 100% !important;
    z-index: 9999 !important;
    min-width: 220px;
    border-radius: 14px !important;
    border: 1px solid #e4eaf4 !important;
    box-shadow: 0 8px 28px rgba(31, 45, 79, 0.14) !important;
    padding: 6px !important;
    background: #ffffff !important;
    margin-top: 4px !important;
}

body.lk-client-area .lk-domain-actions .dropdown-menu > li > a {
    border-radius: 10px !important;
    padding: 9px 14px !important;
    font-size: 13px !important;
    font-weight: 500 !important;
    color: #22304d !important;
    -webkit-text-fill-color: #22304d !important;
    display: flex !important;
    align-items: center !important;
    gap: 8px !important;
    transition: background .12s !important;
}

body.lk-client-area .lk-domain-actions .dropdown-menu > li > a:hover {
    background: #f0eeff !important;
    color: #6656ff !important;
    -webkit-text-fill-color: #6656ff !important;
    text-decoration: none !important;
}

body.lk-client-area .lk-domain-actions .dropdown-menu > li > a i {
    color: #8b97b4 !important;
    font-size: 13px !important;
    width: 16px;
    flex-shrink: 0;
}

body.lk-client-area .lk-domain-actions .dropdown-menu > li > a:hover i {
    color: #6656ff !important;
}

body.lk-client-area .lk-domain-actions .dropdown-menu > li.divider {
    margin: 4px 6px !important;
    border-color: #edf1f7 !important;
}

/* Bouton "Gerer" */
body.lk-client-area .lk-domain-manage-btn {
    border-radius: 10px 0 0 10px !important;
    border: 1px solid #e0e6f0 !important;
    background: #ffffff !important;
    color: #22304d !important;
    -webkit-text-fill-color: #22304d !important;
    font-size: 12px !important;
    font-weight: 600 !important;
    padding: 6px 14px !important;
    transition: all .15s !important;
}

body.lk-client-area .lk-domain-manage-btn:hover {
    background: #f0eeff !important;
    border-color: #c5beff !important;
    color: #6656ff !important;
    -webkit-text-fill-color: #6656ff !important;
}

body.lk-client-area .lk-domain-more-btn {
    border-radius: 0 10px 10px 0 !important;
    border: 1px solid #e0e6f0 !important;
    border-left: 0 !important;
    background: #ffffff !important;
    color: #8b97b4 !important;
    padding: 6px 10px !important;
    transition: all .15s !important;
}

body.lk-client-area .lk-domain-more-btn:hover {
    background: #f0eeff !important;
    border-color: #c5beff !important;
    color: #6656ff !important;
}

body.lk-client-area .lk-domain-more-btn .lk-domain-more-chev i {
    font-size: 11px;
}

/* ============================================================
   DOMAINES — Checkbox dans le tableau
   ============================================================ */
body.lk-client-area .lk-domains-section .table-list input[type="checkbox"] {
    width: 16px; height: 16px; cursor: pointer; accent-color: #6656ff;
}

body.lk-client-area .lk-domains-section .table-list tr.lk-row-selected td {
    background: #f5f3ff !important;
}

/* ============================================================
   DOMAINES — Pagination : cacher le col length (même pattern que factures)
   ============================================================ */
body.lk-client-area .lk-domains-page .dataTables_length {
    display: none !important;
}

/* ============================================================
   BULK BARS — Bouton "Actions" dans la barre de sélection
   ============================================================ */
.lk-bulk-bar-btn--actions {
    background: rgba(255, 255, 255, 0.14);
    color: #e8edf5 !important;
    -webkit-text-fill-color: #e8edf5 !important;
    border: 1px solid rgba(255,255,255,0.18) !important;
}

.lk-bulk-bar-btn--actions:hover {
    background: rgba(255,255,255,0.22) !important;
}

/* ============================================================
   DATATABLES — Indicateurs de tri (chevron evafeat, style services)
   ============================================================ */
/* Supprimer les background-image PNG natifs */
body.lk-client-area table.dataTable thead th.sorting,
body.lk-client-area table.dataTable thead th.sorting_asc,
body.lk-client-area table.dataTable thead th.sorting_desc,
body.lk-client-area table.dataTable thead th.sorting_asc_disabled,
body.lk-client-area table.dataTable thead th.sorting_desc_disabled {
    background-image: none !important;
    padding-right: 22px !important;
    position: relative;
    cursor: pointer;
}

/* Base commune : chevron centré verticalement */
body.lk-client-area table.dataTable thead th.sorting::after,
body.lk-client-area table.dataTable thead th.sorting_asc::after,
body.lk-client-area table.dataTable thead th.sorting_desc::after,
body.lk-client-area table.dataTable thead th.sorting_asc_disabled::after,
body.lk-client-area table.dataTable thead th.sorting_desc_disabled::after {
    font-family: 'evafeat' !important;
    content: "\e933";          /* ico-chevron-down */
    position: absolute;
    right: 5px;
    top: 50%;
    transform: translateY(-50%);
    font-size: 12px;
    line-height: 1;
    transition: transform .2s, color .15s, opacity .15s;
    speak: none;
    font-style: normal;
    font-weight: normal;
    font-variant: normal;
    text-transform: none;
    -webkit-font-smoothing: antialiased;
}

/* Neutre — chevron bas, grisé */
body.lk-client-area table.dataTable thead th.sorting::after,
body.lk-client-area table.dataTable thead th.sorting_asc_disabled::after,
body.lk-client-area table.dataTable thead th.sorting_desc_disabled::after {
    color: #c8d0e3;
    opacity: 0.7;
    transform: translateY(-50%) rotate(0deg);
}

/* Tri ascendant — chevron retourné vers le haut, mauve */
body.lk-client-area table.dataTable thead th.sorting_asc::after {
    color: #6656ff;
    opacity: 1;
    transform: translateY(-50%) rotate(180deg);
}

/* Tri descendant — chevron vers le bas, mauve */
body.lk-client-area table.dataTable thead th.sorting_desc::after {
    color: #6656ff;
    opacity: 1;
    transform: translateY(-50%) rotate(0deg);
}

/* Colonne non sortable : pas d'indicateur */
body.lk-client-area table.dataTable thead th.no-sort::after,
body.lk-client-area table.dataTable thead th:not(.sorting):not(.sorting_asc):not(.sorting_desc):not(.sorting_asc_disabled):not(.sorting_desc_disabled)::after {
    display: none !important;
}
body.lk-client-area table.dataTable thead th:not(.sorting):not(.sorting_asc):not(.sorting_desc) {
    background-image: none !important;
}

/* ============================================================
   MASSPAY — Page paiement groupé
   ============================================================ */
.lk-masspay-section { padding-bottom: 32px; }

/* ── Liste des factures ─────────────────────────────────────── */
.lk-masspay-invoices {
    display: flex;
    flex-direction: column;
    gap: 12px;
    margin-bottom: 20px;
}

.lk-masspay-inv-block {
    border: 1px solid #e8ecf4;
    border-radius: 14px;
    overflow: hidden;
    background: #fff;
}

.lk-masspay-inv-header {
    display: flex;
    align-items: center;
    padding: 10px 20px;
    background: #f7f5ff;
    border-bottom: 1px solid #e8e2ff;
}

.lk-masspay-inv-num {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    font-size: 12px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .04em;
    color: #6656ff;
}
.lk-masspay-inv-num i { font-size: 14px; }

.lk-masspay-inv-lines {
    padding: 4px 0;
}

.lk-masspay-inv-line {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    gap: 24px;
    padding: 10px 20px;
    border-bottom: 1px solid #f4f6fb;
}
.lk-masspay-inv-line:last-child { border-bottom: none; }

.lk-masspay-inv-desc {
    font-size: 13px;
    color: #1b254b;
    flex: 1 1 auto;
}

.lk-masspay-inv-amount {
    font-size: 13px;
    font-weight: 600;
    color: #1b254b;
    white-space: nowrap;
    flex-shrink: 0;
}

.lk-masspay-empty {
    text-align: center;
    padding: 32px;
    color: #a3aed0;
    font-size: 14px;
}

/* ── Pied : résumé + paiement côte à côte ───────────────────── */
.lk-masspay-footer {
    display: grid;
    grid-template-columns: 1fr 300px;
    gap: 16px;
    align-items: start;
}

/* Récapitulatif */
.lk-masspay-summary {
    border: 1px solid #e8ecf4;
    border-radius: 14px;
    overflow: hidden;
    background: #fff;
}
.lk-masspay-summary-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 10px 20px;
    font-size: 13px;
    color: #55627f;
    border-bottom: 1px solid #f4f6fb;
}
.lk-masspay-summary-row:last-child { border-bottom: none; }
.lk-masspay-summary-total {
    font-size: 15px;
    font-weight: 700;
    color: #1b254b;
    background: #f7f5ff;
    padding: 14px 20px;
}

/* Bloc paiement */
.lk-masspay-pay-block {
    border: 1px solid #e8ecf4;
    border-radius: 14px;
    padding: 20px;
    background: #fff;
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.lk-masspay-gateway-label {
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .06em;
    color: #a3aed0;
    margin: 0;
}

.lk-masspay-select {
    width: 100%;
    height: 40px;
    border: 1px solid #d8d2ff;
    border-radius: 10px;
    padding: 0 36px 0 12px;
    font-size: 13px;
    color: #1b254b;
    background: #fff url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%23a3aed0' stroke-width='2.5'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E") no-repeat right 12px center;
    appearance: none;
    -webkit-appearance: none;
    cursor: pointer;
    outline: none;
    transition: border-color .15s;
}
.lk-masspay-select:focus { border-color: #6656ff; }

.lk-masspay-submit-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 7px;
    width: 100%;
    padding: 0 22px;
    height: 42px;
    border: none;
    border-radius: 10px;
    background: linear-gradient(135deg, #7b6dff 0%, #6656ff 100%);
    color: #fff !important;
    -webkit-text-fill-color: #fff !important;
    font-size: 14px;
    font-weight: 600;
    cursor: pointer;
    transition: opacity .15s;
}
.lk-masspay-submit-btn:hover { opacity: 0.88; }

.lk-masspay-back-link,
.lk-masspay-back-link:link,
.lk-masspay-back-link:visited {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 5px;
    font-size: 12px;
    font-weight: 600;
    color: #a3aed0 !important;
    -webkit-text-fill-color: #a3aed0 !important;
    text-decoration: none !important;
    transition: color .15s;
}
.lk-masspay-back-link:hover,
.lk-masspay-back-link:hover i {
    color: #6656ff !important;
    -webkit-text-fill-color: #6656ff !important;
}

@media (max-width: 768px) {
    .lk-masspay-footer { grid-template-columns: 1fr; }
    .lk-masspay-pay-block { order: -1; }
}

/* ============================================================
   DATATABLES — Colonnes : largeurs et alignement
   ============================================================ */
/* Checkbox col : fixe */
body.lk-client-area .lk-invoices-section #tableInvoicesList thead th:first-child,
body.lk-client-area .lk-invoices-section #tableInvoicesList tbody td:first-child,
body.lk-client-area .lk-domains-section #tableDomainsList thead th:first-child,
body.lk-client-area .lk-domains-section #tableDomainsList tbody td:first-child {
    width: 36px !important;
    min-width: 36px !important;
    max-width: 36px !important;
    padding-left: 12px !important;
    padding-right: 4px !important;
    vertical-align: middle !important;
}

/* Status col : no wrap */
body.lk-client-area .lk-table-shell .table.table-list tbody td .label {
    white-space: nowrap;
}

/* Action col : right-align & no wrap */
body.lk-client-area .lk-table-shell .table.table-list tbody td:last-child,
body.lk-client-area .lk-table-shell .table.table-list thead th:last-child {
    white-space: nowrap;
    text-align: right;
}

/* Thead : no text wrap */
body.lk-client-area .lk-table-shell .table.table-list thead th {
    white-space: nowrap;
    vertical-align: middle !important;
}

/* ============================================================
   TICKETS SECTION — Intégration lk-lpanel-library
   ============================================================ */
body.lk-client-area .lk-tickets-section {
    max-width: 1264px;
    width: 100%;
    margin-left: auto;
    margin-right: auto;
}

/* Neutraliser les anciens styles de toolbar et table-shell dans la section */
body.lk-client-area .lk-tickets-section .lk-tickets-page {
    background: transparent !important;
    border: none !important;
    box-shadow: none !important;
    padding: 0 !important;
}

body.lk-client-area .lk-tickets-section .lk-table-shell,
body.lk-client-area .lk-tickets-section .lk-tickets-page .lk-table-shell,
body.lk-client-area .lk-tickets-section .table-container {
    box-shadow: none !important;
    background: transparent !important;
    border: none !important;
    border-radius: 0 !important;
    max-width: 100% !important;
    padding: 0 !important;
    margin: 0 !important;
}

/* Cacher le native "Afficher" dans tickets aussi */
body.lk-client-area .lk-tickets-section .dataTables_length {
    display: none !important;
}

/* Pills tickets dans la section : utiliser le style lk-lpanel-tab */
body.lk-client-area .lk-tickets-section .lk-tickets-status-pill {
    /* Hérite du style lk-lpanel-tab via JS class renaming */
}

/* Lien sujet dans la table tickets */
body.lk-client-area .lk-ticket-num {
    font-size: 11px;
    font-weight: 700;
    color: #8b97b4 !important;
    -webkit-text-fill-color: #8b97b4 !important;
    margin-right: 6px;
}

body.lk-client-area .lk-ticket-subj {
    font-size: 13px;
    font-weight: 500;
    color: #22304d !important;
    -webkit-text-fill-color: #22304d !important;
}

body.lk-client-area .lk-ticket-unread {
    font-weight: 700 !important;
    color: #1b254b !important;
    -webkit-text-fill-color: #1b254b !important;
}

body.lk-client-area a.lk-ticket-link {
    color: inherit !important;
    -webkit-text-fill-color: inherit !important;
    text-decoration: none !important;
    display: flex;
    flex-direction: column;
    gap: 1px;
}

body.lk-client-area a.lk-ticket-link:hover .lk-ticket-subj {
    color: #6656ff !important;
    -webkit-text-fill-color: #6656ff !important;
}

/* ============================================================
   ACCOUNT PAGES — En-tête hero intégré dans une carte
   ============================================================ */
body.lk-client-area .lk-account-hero.lk-lpanel-library {
    margin-bottom: 20px;
}

/* Assurer que les cartes de formulaire suivent le même arrondi que les sections */
body.lk-client-area .lk-account-page .lk-account-card,
body.lk-client-area .lk-account-page form[role='form'],
body.lk-client-area .lk-account-page form.form-horizontal {
    border-radius: 24px !important;
    padding: 28px !important;
}

/* ============================================================
   TABLE ACTIONS — Boutons Voir / Payer / Répondre
   ============================================================ */
body.lk-client-area .lk-table-actions {
    display: flex;
    align-items: center;
    gap: 6px;
    justify-content: flex-end;
    flex-wrap: nowrap;
}

body.lk-client-area .lk-table-action-primary,
body.lk-client-area .lk-lpanel-row-btn {
    display: inline-flex !important;
    align-items: center !important;
    padding: 6px 14px !important;
    border-radius: 10px !important;
    font-size: 12px !important;
    font-weight: 600 !important;
    background: #f0eeff !important;
    color: #6656ff !important;
    -webkit-text-fill-color: #6656ff !important;
    border: 1px solid #d8d2ff !important;
    text-decoration: none !important;
    white-space: nowrap !important;
    transition: all .15s !important;
}

body.lk-client-area .lk-table-action-primary:hover,
body.lk-client-area .lk-lpanel-row-btn:hover {
    background: #6656ff !important;
    color: #ffffff !important;
    -webkit-text-fill-color: #ffffff !important;
    border-color: #6656ff !important;
    text-decoration: none !important;
}

body.lk-client-area .lk-table-action-secondary {
    display: inline-flex !important;
    align-items: center !important;
    padding: 6px 14px !important;
    border-radius: 10px !important;
    font-size: 12px !important;
    font-weight: 600 !important;
    background: #f0eeff !important;
    color: #6656ff !important;
    -webkit-text-fill-color: #6656ff !important;
    border: 1px solid #d8d2ff !important;
    text-decoration: none !important;
    white-space: nowrap !important;
    transition: all .15s !important;
}

body.lk-client-area .lk-table-action-secondary:hover {
    background: #6656ff !important;
    color: #ffffff !important;
    -webkit-text-fill-color: #ffffff !important;
    border-color: #6656ff !important;
    text-decoration: none !important;
    opacity: 1 !important;
}


/* ============================================================
   DOMAIN BUTTONS — Gérer + chevron dropdown
   btn btn-default supprimés du HTML → plus de conflit webkit
   ============================================================ */
body.lk-client-area .btn-group > .lk-domain-manage-btn {
    display: inline-flex !important;
    align-items: center !important;
    background: #f0eeff !important;
    color: #6656ff !important;
    -webkit-text-fill-color: #6656ff !important;
    border: 1px solid #d8d2ff !important;
    border-right: none !important;
    font-size: 12px !important;
    font-weight: 600 !important;
    padding: 5px 14px !important;
    border-radius: 10px 0 0 10px !important;
    text-decoration: none !important;
    transition: all .15s !important;
}
body.lk-client-area .btn-group > .lk-domain-manage-btn:hover {
    background: #6656ff !important;
    border-color: #6656ff !important;
    color: #ffffff !important;
    -webkit-text-fill-color: #ffffff !important;
}
body.lk-client-area .btn-group > .lk-domain-more-btn {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    background: #f0eeff !important;
    color: #6656ff !important;
    -webkit-text-fill-color: #6656ff !important;
    border: 1px solid #d8d2ff !important;
    padding: 5px 9px !important;
    border-radius: 0 10px 10px 0 !important;
    transition: all .15s !important;
}
body.lk-client-area .btn-group > .lk-domain-more-btn:hover {
    background: #6656ff !important;
    border-color: #6656ff !important;
    color: #ffffff !important;
    -webkit-text-fill-color: #ffffff !important;
}

/* ============================================================
   DATATABLES — Masquer le texte info "Affichage de X à Y"
   et aligner la barre de pagination en bas
   ============================================================ */
body.lk-client-area .lk-domains-section .dataTables_info,
body.lk-client-area .lk-invoices-section .dataTables_info,
body.lk-client-area .lk-tickets-section .dataTables_info,
body.lk-client-area .lk-services-section .dataTables_info {
    display: none !important;
}

/* Pagination bottom row — flex layout to match services page */
body.lk-client-area .lk-domains-section .lk-table-shell .dataTables_wrapper > .row:last-child,
body.lk-client-area .lk-invoices-section .lk-table-shell .dataTables_wrapper > .row:last-child,
body.lk-client-area .lk-tickets-section .lk-table-shell .dataTables_wrapper > .row:last-child {
    display: flex !important;
    align-items: center !important;
    justify-content: flex-end !important;
    padding: 10px 0 4px !important;
    flex-wrap: wrap !important;
    gap: 6px !important;
}

/* ── Emails + Quotes sections ─────────────────────────────── */
body.lk-client-area .lk-emails-section .dataTables_info,
body.lk-client-area .lk-quotes-section .dataTables_info,
body.lk-client-area .lk-emails-section .dataTables_length,
body.lk-client-area .lk-quotes-section .dataTables_length {
    display: none !important;
}
body.lk-client-area .lk-emails-section .lk-table-shell .dataTables_wrapper > .row:last-child,
body.lk-client-area .lk-quotes-section .lk-table-shell .dataTables_wrapper > .row:last-child {
    display: flex !important;
    align-items: center !important;
    justify-content: flex-end !important;
    padding: 10px 0 4px !important;
    flex-wrap: wrap !important;
    gap: 6px !important;
}

/* ============================================================
   SEARCH WRAP — icône + champ inline dans le header
   ============================================================ */
.lk-search-wrap {
    display: inline-flex !important;
    align-items: center !important;
    background: #ffffff !important;
    border: 1px solid #e4ebf5 !important;
    border-radius: 12px !important;
    padding: 5px 12px !important;
    gap: 6px !important;
}
.lk-search-icon {
    color: #8b97b4 !important;
    font-size: 14px !important;
    flex-shrink: 0 !important;
}
.lk-search-input {
    border: none !important;
    border-radius: 0 !important;
    background: transparent !important;
    outline: none !important;
    font-size: 13px !important;
    color: #22304d !important;
    width: 160px !important;
    height: auto !important;
    min-height: 0 !important;
    padding: 0 !important;
    box-shadow: none !important;
    line-height: 1.4 !important;
}
.lk-search-input::placeholder {
    color: #b0bbd4 !important;
}

/* ============================================================
   CHECKBOX COLUMN — alignement case à cocher header vs lignes
   ============================================================ */
body.lk-client-area .lk-table-shell table.table-list th:first-child,
body.lk-client-area .lk-table-shell table.table-list td:first-child {
    width: 38px !important;
    min-width: 38px !important;
    max-width: 38px !important;
    padding: 0 !important;
    text-align: center !important;
    vertical-align: middle !important;
}
body.lk-client-area .lk-table-shell table.table-list th:first-child input[type="checkbox"],
body.lk-client-area .lk-table-shell table.table-list td:first-child input[type="checkbox"] {
    margin: 0 !important;
    vertical-align: middle !important;
    cursor: pointer !important;
    accent-color: #6656ff !important;
    width: 15px !important;
    height: 15px !important;
    display: inline-block !important;
}

/* ============================================================
   DATATABLES PAGINATION — identique à lk-pagination-btn (Mes services)
   ============================================================ */

/* Conteneur pagination */
body.lk-client-area .dataTables_wrapper .dataTables_paginate {
    display: flex !important;
    justify-content: flex-end !important;
    align-items: center !important;
    padding: 12px 0 2px !important;
    border: none !important;
    background: none !important;
}

/* La <ul class="pagination"> Bootstrap → devient la "pill strip" */
body.lk-client-area .dataTables_wrapper .dataTables_paginate .pagination {
    display: inline-flex !important;
    align-items: center !important;
    gap: 4px !important;
    padding: 6px !important;
    border-radius: 16px !important;
    background: #f5f7fc !important;
    border: 1px solid #e4eaf4 !important;
    box-shadow: 0 8px 18px rgba(31,45,79,.04) !important;
    margin: 0 !important;
    list-style: none !important;
}

/* Chaque <li> */
body.lk-client-area .dataTables_wrapper .dataTables_paginate .paginate_button {
    border: none !important;
    background: none !important;
    padding: 0 !important;
    margin: 0 !important;
}

/* Le lien/bouton à l'intérieur */
body.lk-client-area .dataTables_wrapper .dataTables_paginate .paginate_button > a,
body.lk-client-area .dataTables_wrapper .dataTables_paginate .paginate_button > span {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    min-height: 36px !important;
    min-width: 36px !important;
    padding: 0 14px !important;
    border: none !important;
    border-radius: 12px !important;
    background: transparent !important;
    color: #7d88a6 !important;
    -webkit-text-fill-color: #7d88a6 !important;
    font-size: 13px !important;
    font-weight: 700 !important;
    cursor: pointer !important;
    transition: background .15s, color .15s !important;
    text-decoration: none !important;
    box-shadow: none !important;
    line-height: 1 !important;
}

/* Hover */
body.lk-client-area .dataTables_wrapper .dataTables_paginate .paginate_button:not(.disabled):hover > a,
body.lk-client-area .dataTables_wrapper .dataTables_paginate .paginate_button:not(.disabled):hover > span {
    background: #ffffff !important;
    color: #22304d !important;
    -webkit-text-fill-color: #22304d !important;
}

/* Page courante */
body.lk-client-area .dataTables_wrapper .dataTables_paginate .paginate_button.current > a,
body.lk-client-area .dataTables_wrapper .dataTables_paginate .paginate_button.current > span,
body.lk-client-area .dataTables_wrapper .dataTables_paginate .paginate_button.active > a,
body.lk-client-area .dataTables_wrapper .dataTables_paginate .paginate_button.active > span {
    background: linear-gradient(135deg,#7b6dff 0%,#6656ff 100%) !important;
    color: #ffffff !important;
    -webkit-text-fill-color: #ffffff !important;
    box-shadow: 0 4px 10px rgba(102,86,255,.30) !important;
}

/* Désactivé */
body.lk-client-area .dataTables_wrapper .dataTables_paginate .paginate_button.disabled > a,
body.lk-client-area .dataTables_wrapper .dataTables_paginate .paginate_button.disabled > span {
    opacity: 0.38 !important;
    cursor: not-allowed !important;
    pointer-events: none !important;
    color: #7d88a6 !important;
    -webkit-text-fill-color: #7d88a6 !important;
}

/* ============================================================
   DATATABLES HEADERS — alignement gauche + flèches comme Mes services
   ============================================================ */

/* Aligner tout à gauche */
body.lk-client-area .lk-table-shell table.dataTable thead th,
body.lk-client-area .lk-table-shell table.table-list thead th {
    text-align: left !important;
    vertical-align: middle !important;
}

/* Retirer les flèches natives DataTable (background-image) */
body.lk-client-area table.dataTable thead th.sorting,
body.lk-client-area table.dataTable thead th.sorting_asc,
body.lk-client-area table.dataTable thead th.sorting_desc,
body.lk-client-area table.dataTable thead th.sorting_asc_disabled,
body.lk-client-area table.dataTable thead th.sorting_desc_disabled {
    background-image: none !important;
    padding-right: 22px !important;
    position: relative !important;
    cursor: pointer !important;
}

/* Supprimer l'ancien ::after conflictuel et le remplacer proprement */
body.lk-client-area table.dataTable thead th.sorting::after,
body.lk-client-area table.dataTable thead th.sorting_asc::after,
body.lk-client-area table.dataTable thead th.sorting_desc::after,
body.lk-client-area table.dataTable thead th.sorting_asc_disabled::after,
body.lk-client-area table.dataTable thead th.sorting_desc_disabled::after {
    content: '' !important;
    position: absolute !important;
    right: 5px !important;
    top: 50% !important;
    transform: translateY(-50%) !important;
    width: 12px !important;
    height: 12px !important;
    background-image: none !important;
    border: none !important;
    opacity: 1 !important;
    font-size: 0 !important;
}

/* Flèche neutre ⇅ — SVG inline, même style que lk-sort-icon */
body.lk-client-area table.dataTable thead th.sorting::after {
    content: '' !important;
    display: inline-block !important;
    width: 10px !important;
    height: 14px !important;
    background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='14' viewBox='0 0 10 14' fill='none'%3E%3Cpath d='M5 1L2 4.5h6L5 1zm0 12l3-3.5H2L5 13z' fill='%23b0bbd4'/%3E%3C/svg%3E") center/contain no-repeat !important;
    opacity: .6 !important;
    font-size: 0 !important;
    border: none !important;
}

/* Flèche montante ↑ */
body.lk-client-area table.dataTable thead th.sorting_asc::after {
    content: '' !important;
    display: inline-block !important;
    width: 10px !important;
    height: 14px !important;
    background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='14' viewBox='0 0 10 14' fill='none'%3E%3Cpath d='M5 1L2 4.5h6L5 1z' fill='%236656ff'/%3E%3Cpath d='M5 13l3-3.5H2L5 13z' fill='%23b0bbd4'/%3E%3C/svg%3E") center/contain no-repeat !important;
    opacity: 1 !important;
    font-size: 0 !important;
    border: none !important;
}

/* Flèche descendante ↓ */
body.lk-client-area table.dataTable thead th.sorting_desc::after {
    content: '' !important;
    display: inline-block !important;
    width: 10px !important;
    height: 14px !important;
    background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='14' viewBox='0 0 10 14' fill='none'%3E%3Cpath d='M5 1L2 4.5h6L5 1z' fill='%23b0bbd4'/%3E%3Cpath d='M5 13l3-3.5H2L5 13z' fill='%236656ff'/%3E%3C/svg%3E") center/contain no-repeat !important;
    opacity: 1 !important;
    font-size: 0 !important;
    border: none !important;
}

/* th actif — texte en violet comme services */
body.lk-client-area table.dataTable thead th.sorting_asc,
body.lk-client-area table.dataTable thead th.sorting_desc {
    color: #6656ff !important;
}

/* ============================================================
   PAGINATION — Remplacer "Précédent"/"Suivant" par ‹ › comme
   la page Mes services (lk-pagination-btn)
   ============================================================ */
body.lk-client-area .dataTables_paginate li.paginate_button.previous > a,
body.lk-client-area .dataTables_paginate li.paginate_button.next > a {
    font-size: 0 !important;
    padding: 0 !important;
    width: 36px !important;
    min-width: 36px !important;
}
body.lk-client-area .dataTables_paginate li.paginate_button.previous > a::before {
    content: '\2039' !important; /* ‹ */
    font-size: 20px !important;
    font-weight: 400 !important;
    line-height: 1 !important;
    -webkit-text-fill-color: inherit !important;
}
body.lk-client-area .dataTables_paginate li.paginate_button.next > a::after {
    content: '\203A' !important; /* › */
    font-size: 20px !important;
    font-weight: 400 !important;
    line-height: 1 !important;
    -webkit-text-fill-color: inherit !important;
}
/* Disabled state — grisé comme services */
body.lk-client-area .dataTables_paginate li.paginate_button.previous.disabled > a,
body.lk-client-area .dataTables_paginate li.paginate_button.next.disabled > a {
    opacity: 0.35 !important;
    cursor: default !important;
    pointer-events: none !important;
}

/* ============================================================
   DATATABLES BOTTOM BAR — "Par page" à droite + pagination
   ============================================================ */
body.lk-client-area .lk-table-shell .dataTables_wrapper {
    display: flex !important;
    flex-wrap: wrap !important;
    align-items: center !important;
}
/* La table prend toute la largeur */
body.lk-client-area .lk-table-shell .dataTables_wrapper > .listtable.table-responsive {
    flex: 0 0 100% !important;
    width: 100% !important;
    max-width: 100% !important;
}
/* "Par page" pousse vers la droite grâce à margin-left: auto */
body.lk-client-area .lk-table-shell .dataTables_wrapper > .lk-per-page-wrap {
    margin-left: auto !important;
    margin-top: 10px !important;
    order: 2 !important;
}
/* Pagination suit le "Par page" */
body.lk-client-area .lk-table-shell .dataTables_wrapper > .dataTables_paginate {
    order: 3 !important;
    margin-left: 10px !important;
    padding-top: 0 !important;
    padding-bottom: 0 !important;
}
/* Masquer le sélecteur natif DataTables (on a le nôtre) */
body.lk-client-area .lk-table-shell .dataTables_wrapper > .dataTables_length {
    display: none !important;
}

/* ============================================================
   TABLE ROWS — style "carte" identique aux lignes Mes services
   ============================================================ */
/* Neutraliser la bordure/ombre ajoutée par .lk-account-page .listtable
   (les sections factures et tickets ont lk-account-page mais n'ont pas
   besoin de la mini-carte autour du tableau — elles sont déjà dans un lk-lpanel-library) */
body.lk-client-area .lk-invoices-section .lk-table-shell .listtable,
body.lk-client-area .lk-invoices-section .lk-table-shell .table-responsive,
body.lk-client-area .lk-tickets-section .lk-table-shell .listtable,
body.lk-client-area .lk-tickets-section .lk-table-shell .table-responsive {
    border: none !important;
    box-shadow: none !important;
    border-radius: 0 !important;
    background: transparent !important;
    padding: 0 !important;
}

/* Laisser de la place au box-shadow (1px) sur les côtés */
body.lk-client-area .lk-invoices-section .lk-table-shell .dataTables_wrapper > .listtable,
body.lk-client-area .lk-domains-section .lk-table-shell .dataTables_wrapper > .listtable {
    padding: 0 2px !important;
    overflow: visible !important;
    box-sizing: border-box !important;
}

/* border-collapse: separate pour que border-radius fonctionne sur <tr> */
body.lk-client-area .lk-invoices-section .lk-table-shell table.table-list,
body.lk-client-area .lk-domains-section .lk-table-shell table.table-list {
    border-collapse: separate !important;
    border-spacing: 0 8px !important;
    margin-top: -8px !important;
    width: 100% !important;
}

/* Chaque ligne tbody = une carte — box-shadow n'ajoute pas de largeur */
body.lk-client-area .lk-invoices-section .lk-table-shell table.table-list tbody tr,
body.lk-client-area .lk-domains-section .lk-table-shell table.table-list tbody tr {
    border-radius: 18px !important;
    box-shadow: 0 0 0 1px #e8edf7 !important;
    transition: box-shadow .15s, background .15s !important;
}

/* Fond blanc sur les cellules */
body.lk-client-area .lk-invoices-section .lk-table-shell table.table-list tbody tr td,
body.lk-client-area .lk-domains-section .lk-table-shell table.table-list tbody tr td {
    background: #ffffff !important;
    border-top: none !important;
    border-bottom: none !important;
}

/* Coins arrondis sur première/dernière cellule pour clipper le fond */
body.lk-client-area .lk-invoices-section .lk-table-shell table.table-list tbody tr td:first-child,
body.lk-client-area .lk-domains-section .lk-table-shell table.table-list tbody tr td:first-child {
    border-radius: 18px 0 0 18px !important;
}
body.lk-client-area .lk-invoices-section .lk-table-shell table.table-list tbody tr td:last-child,
body.lk-client-area .lk-domains-section .lk-table-shell table.table-list tbody tr td:last-child {
    border-radius: 0 18px 18px 0 !important;
}

/* Hover */
body.lk-client-area .lk-invoices-section .lk-table-shell table.table-list tbody tr:hover,
body.lk-client-area .lk-domains-section .lk-table-shell table.table-list tbody tr:hover {
    box-shadow: 0 0 0 1.5px #d4ccff !important;
}
body.lk-client-area .lk-invoices-section .lk-table-shell table.table-list tbody tr:hover td,
body.lk-client-area .lk-domains-section .lk-table-shell table.table-list tbody tr:hover td {
    background: #faf9ff !important;
}

/* Ligne sélectionnée */
body.lk-client-area .lk-invoices-section .lk-table-shell table.table-list tbody tr.lk-row-selected {
    box-shadow: 0 0 0 1.5px #c4b8ff !important;
}
body.lk-client-area .lk-invoices-section .lk-table-shell table.table-list tbody tr.lk-row-selected td {
    background: #f3f0ff !important;
}

/* ============================================================
   DOMAINES — boutons rapides en icône seulement dans le tableau
   (réduit la largeur de la dernière colonne)
   ============================================================ */
body.lk-client-area .lk-domains-section .lk-table-shell .lk-quick-btn {
    width: 34px !important;
    padding: 0 !important;
    justify-content: center !important;
    flex-shrink: 0 !important;
}
body.lk-client-area .lk-domains-section .lk-table-shell .lk-quick-btn span {
    display: none !important;
}
body.lk-client-area .lk-domains-section .lk-domain-actions-wrap {
    flex-wrap: nowrap !important;
    gap: 4px !important;
    justify-content: flex-end !important;
}
body.lk-client-area .lk-domains-section .lk-table-shell table.table-list tbody tr td:last-child {
    white-space: nowrap !important;
    padding-right: 14px !important;
}

/* ============================================================
   DOMAINES — masquer la colonne ENREGISTREMENT (moins utile)
   et réduire la colonne AUTO pour libérer la colonne action
   ============================================================ */

/* Masquer la colonne date d'enregistrement (4e colonne) */
body.lk-client-area .lk-domains-section #tableDomainsList th:nth-child(4),
body.lk-client-area .lk-domains-section #tableDomainsList td:nth-child(4) {
    display: none !important;
}

/* Réduire la colonne auto-renouvellement */
body.lk-client-area .lk-domains-section #tableDomainsList th:nth-child(6) {
    font-size: 0 !important;
    white-space: nowrap !important;
    width: 70px !important;
    max-width: 70px !important;
}
body.lk-client-area .lk-domains-section #tableDomainsList th:nth-child(6)::before {
    content: 'Auto' !important;
    font-size: 11px !important;
    font-weight: 700 !important;
    letter-spacing: 0.06em !important;
    color: #919cb5 !important;
}
body.lk-client-area .lk-domains-section #tableDomainsList td:nth-child(6) {
    max-width: 70px !important;
    white-space: nowrap !important;
    overflow: hidden !important;
}

/* ============================================================
   TICKETS — style carte identique à Factures / Domaines
   ============================================================ */
/* Laisser de la place au box-shadow */
body.lk-client-area .lk-tickets-section .lk-table-shell .dataTables_wrapper > .listtable {
    padding: 0 2px !important;
    overflow: visible !important;
    box-sizing: border-box !important;
}

/* border-collapse separate pour border-radius sur <tr> */
body.lk-client-area .lk-tickets-section .lk-table-shell table.table-list {
    border-collapse: separate !important;
    border-spacing: 0 8px !important;
    margin-top: -8px !important;
    width: 100% !important;
}

/* Ligne = carte */
body.lk-client-area .lk-tickets-section .lk-table-shell table.table-list tbody tr {
    border-radius: 18px !important;
    box-shadow: 0 0 0 1px #e8edf7 !important;
    transition: box-shadow .15s, background .15s !important;
}
body.lk-client-area .lk-tickets-section .lk-table-shell table.table-list tbody tr td {
    background: #ffffff !important;
    border-top: none !important;
    border-bottom: none !important;
}
body.lk-client-area .lk-tickets-section .lk-table-shell table.table-list tbody tr td:first-child {
    border-radius: 18px 0 0 18px !important;
    max-width: 130px !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    white-space: nowrap !important;
}
body.lk-client-area .lk-tickets-section .lk-table-shell table.table-list tbody tr td:last-child {
    border-radius: 0 18px 18px 0 !important;
    white-space: nowrap !important;
    padding-right: 14px !important;
}
body.lk-client-area .lk-tickets-section .lk-table-shell table.table-list tbody tr:hover {
    box-shadow: 0 0 0 1.5px #d4ccff !important;
}
body.lk-client-area .lk-tickets-section .lk-table-shell table.table-list tbody tr:hover td {
    background: #faf9ff !important;
}

/* ============================================================
   TICKETS — en-têtes de colonnes alignés à gauche
   + colonne Action sans texte (comme Factures)
   ============================================================ */
body.lk-client-area .lk-tickets-section .lk-table-shell table.table-list thead th {
    text-align: left !important;
}
/* Masquer le texte "Action" dans la dernière colonne des tickets et factures */
body.lk-client-area .lk-tickets-section .lk-table-shell table.table-list thead th:last-child,
body.lk-client-area .lk-invoices-section .lk-table-shell table.table-list thead th:last-child {
    font-size: 0 !important;
}

/* ============================================================
   SEARCH WRAP — assurer que l'input hérite bien de la hauteur
   ============================================================ */
.lk-section-head-right .lk-search-wrap .lk-search-input {
    height: 100% !important;
    border: none !important;
    outline: none !important;
    background: transparent !important;
    padding: 0 !important;
    font-size: 13px !important;
    min-width: 60px !important;
    width: 100% !important;
}

/* ============================================================
   DASHBOARD — tabs + search alignés à droite dans le header
   ============================================================ */
.lk-dash-head-right {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
    justify-content: flex-end;
}
.lk-dash-search-wrap {
    height: 38px !important;
    padding: 0 12px !important;
    box-sizing: border-box !important;
}
.lk-dash-search-wrap .lk-search-input {
    width: 160px !important;
}

/* ============================================================
   DASHBOARD — forcer la couleur des boutons Webmail / cPanel
   (créés dynamiquement par JS comme <a> tags)
   ============================================================ */
body.lk-client-area a.lk-quick-btn,
body.lk-client-area a.lk-quick-btn:link,
body.lk-client-area a.lk-quick-btn:visited {
    color: #55627f !important;
    -webkit-text-fill-color: #55627f !important;
    text-decoration: none !important;
}
body.lk-client-area a.lk-quick-btn:hover {
    color: #4a3fff !important;
    -webkit-text-fill-color: #4a3fff !important;
}

/* ============================================================
   BOUTONS D'ACTION — règle définitive haute spécificité
   Écrase toutes les règles conflictuelles dans tous les contextes
   ============================================================ */
body.lk-client-area .lk-invoices-section .lk-table-action-primary,
body.lk-client-area .lk-invoices-section .lk-table-action-primary:link,
body.lk-client-area .lk-invoices-section .lk-table-action-primary:visited,
body.lk-client-area .lk-invoices-section .lk-table-action-secondary,
body.lk-client-area .lk-invoices-section .lk-table-action-secondary:link,
body.lk-client-area .lk-invoices-section .lk-table-action-secondary:visited,
body.lk-client-area .lk-invoices-section .lk-lpanel-row-btn,
body.lk-client-area .lk-invoices-section .lk-lpanel-row-btn:link,
body.lk-client-area .lk-invoices-section .lk-lpanel-row-btn:visited,
body.lk-client-area .lk-domains-section .lk-table-action-primary,
body.lk-client-area .lk-domains-section .lk-table-action-primary:link,
body.lk-client-area .lk-domains-section .lk-table-action-primary:visited,
body.lk-client-area .lk-domains-section .lk-domain-manage-btn,
body.lk-client-area .lk-domains-section .lk-domain-manage-btn:link,
body.lk-client-area .lk-domains-section .lk-domain-manage-btn:visited,
body.lk-client-area .lk-domains-section .lk-lpanel-row-btn,
body.lk-client-area .lk-domains-section .lk-lpanel-row-btn:link,
body.lk-client-area .lk-domains-section .lk-lpanel-row-btn:visited,
body.lk-client-area .lk-tickets-section .lk-table-action-primary,
body.lk-client-area .lk-tickets-section .lk-table-action-primary:link,
body.lk-client-area .lk-tickets-section .lk-table-action-primary:visited,
body.lk-client-area .lk-tickets-section .lk-table-action-secondary,
body.lk-client-area .lk-tickets-section .lk-table-action-secondary:link,
body.lk-client-area .lk-tickets-section .lk-table-action-secondary:visited,
body.lk-client-area .lk-tickets-section .lk-lpanel-row-btn,
body.lk-client-area .lk-tickets-section .lk-lpanel-row-btn:link,
body.lk-client-area .lk-tickets-section .lk-lpanel-row-btn:visited,
body.lk-client-area .lk-lpanel-library .lk-lpanel-row-btn,
body.lk-client-area .lk-lpanel-library .lk-lpanel-row-btn:link,
body.lk-client-area .lk-lpanel-library .lk-lpanel-row-btn:visited,
body.lk-client-area .lk-lpanel-library .lk-table-action-primary,
body.lk-client-area .lk-lpanel-library .lk-table-action-secondary,
body.lk-client-area .lk-services-section .lk-lpanel-row-btn,
body.lk-client-area .lk-services-section .lk-lpanel-row-btn:link,
body.lk-client-area .lk-services-section .lk-lpanel-row-btn:visited {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    padding: 6px 14px !important;
    border-radius: 10px !important;
    font-size: 12px !important;
    font-weight: 600 !important;
    background: #f0eeff !important;
    background-image: none !important;
    color: #6656ff !important;
    -webkit-text-fill-color: #6656ff !important;
    border: 1px solid #d8d2ff !important;
    text-decoration: none !important;
    white-space: nowrap !important;
    transition: all .15s !important;
    box-shadow: none !important;
    min-height: unset !important;
}

body.lk-client-area .lk-invoices-section .lk-table-action-primary:hover,
body.lk-client-area .lk-invoices-section .lk-table-action-secondary:hover,
body.lk-client-area .lk-invoices-section .lk-lpanel-row-btn:hover,
body.lk-client-area .lk-domains-section .lk-table-action-primary:hover,
body.lk-client-area .lk-domains-section .lk-domain-manage-btn:hover,
body.lk-client-area .lk-domains-section .lk-lpanel-row-btn:hover,
body.lk-client-area .lk-tickets-section .lk-table-action-primary:hover,
body.lk-client-area .lk-tickets-section .lk-table-action-secondary:hover,
body.lk-client-area .lk-tickets-section .lk-lpanel-row-btn:hover,
body.lk-client-area .lk-lpanel-library .lk-lpanel-row-btn:hover,
body.lk-client-area .lk-lpanel-library .lk-table-action-primary:hover,
body.lk-client-area .lk-lpanel-library .lk-table-action-secondary:hover,
body.lk-client-area .lk-services-section .lk-lpanel-row-btn:hover {
    background: #6656ff !important;
    background-image: none !important;
    color: #ffffff !important;
    -webkit-text-fill-color: #ffffff !important;
    border-color: #6656ff !important;
    text-decoration: none !important;
    opacity: 1 !important;
}

/* ============================================================
   HOVER SUR LES LIGNES — mes services (mauve pâle comme les autres pages)
   ============================================================ */
body.lk-client-area .lk-services-section .lk-list-item:hover {
    background: #faf9ff !important;
    box-shadow: inset 0 0 0 1px #e0d9ff !important;
}


/* ============================================================
   INVOICE PAYMENT PAGE  (/invoice/:id/pay)
   ============================================================ */
.lk-invpay-section {
    max-width: 1264px;
    margin: 0 auto;
}
.lk-invpay-grid {
    display: grid;
    grid-template-columns: 1fr 340px;
    gap: 24px;
    align-items: start;
}
@media (max-width: 900px) {
    .lk-invpay-grid { grid-template-columns: 1fr; }
}

/* ── Form cards ─────────────────────────────────────────────── */
.lk-invpay-card {
    background: #fff;
    border: 1px solid var(--lk-border);
    border-radius: 16px;
    padding: 24px;
    margin-bottom: 16px;
    box-shadow: var(--lk-shadow);
}
.lk-invpay-card-title {
    font-size: 12px;
    font-weight: 700;
    color: #A3AED0;
    text-transform: uppercase;
    letter-spacing: .06em;
    margin-bottom: 18px;
    padding-bottom: 14px;
    border-bottom: 1px solid var(--lk-border);
}

/* ── Form fields ────────────────────────────────────────────── */
.lk-invpay-section .form-group {
    margin-bottom: 14px;
}
.lk-invpay-section .form-group.row {
    margin-left: 0 !important;
    margin-right: 0 !important;
    display: flex;
    align-items: flex-start;
    gap: 0;
}
.lk-invpay-section label.col-form-label,
.lk-invpay-section label.control-label,
.lk-invpay-section .col-sm-4.text-md-right {
    font-size: 13px !important;
    font-weight: 600 !important;
    color: #5B6FA6 !important;
    text-align: left !important;
    padding-top: 10px !important;
    flex: 0 0 40%;
    max-width: 40%;
}
.lk-invpay-section .col-sm-7,
.lk-invpay-section .col-sm-8,
.lk-invpay-section .col-sm-6 {
    flex: 1;
    max-width: 100%;
    padding: 0 !important;
}
.lk-invpay-section .form-control {
    border: 1.5px solid var(--lk-border) !important;
    border-radius: 10px !important;
    font-size: 14px !important;
    padding: 9px 14px !important;
    background: #fafbff !important;
    color: #1B254B !important;
    height: auto !important;
    transition: border-color .2s, box-shadow .2s;
    width: 100% !important;
}
.lk-invpay-section .form-control:focus {
    border-color: #6656ff !important;
    box-shadow: 0 0 0 3px rgba(102,86,255,.12) !important;
    outline: none !important;
    background: #fff !important;
}
.lk-invpay-section .field-error-msg {
    font-size: 12px;
    color: #e53e3e;
    margin-top: 4px;
    display: block;
}

/* ── Radio buttons ──────────────────────────────────────────── */
.lk-invpay-section .icheck-button {
    accent-color: #6656ff;
    width: 16px;
    height: 16px;
    cursor: pointer;
    margin-right: 6px;
    flex-shrink: 0;
}
.lk-invpay-section .form-check,
.lk-invpay-section .form-check-inline {
    display: inline-flex !important;
    align-items: center;
    gap: 6px;
    font-size: 14px;
    margin-right: 16px;
    color: #1B254B;
}
.lk-invpay-section .paymethod-info label,
.lk-invpay-section .billing-contact-0,
.lk-invpay-section .billing-contact-0 ~ label {
    display: flex;
    align-items: flex-start;
    gap: 8px;
    font-size: 13px;
    color: #1B254B;
    margin-bottom: 8px;
    line-height: 1.5;
}
.lk-invpay-section .two-column-grid {
    display: flex;
    flex-direction: column;
    gap: 6px;
    margin-bottom: 12px;
}
.lk-invpay-section #billingAddressChoice .col-sm-8 {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

/* ── Submit bar ─────────────────────────────────────────────── */
.lk-invpay-submit {
    display: flex;
    align-items: center;
    gap: 20px;
    margin-top: 8px;
}
.lk-invpay-submit-btn {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 13px 36px;
    background: linear-gradient(135deg, #7b6dff 0%, #6656ff 100%);
    color: #fff !important;
    -webkit-text-fill-color: #fff !important;
    font-size: 15px;
    font-weight: 700;
    border-radius: 12px;
    border: none;
    cursor: pointer;
    box-shadow: 0 4px 16px rgba(102,86,255,.35);
    transition: opacity .2s, transform .1s, box-shadow .2s;
}
.lk-invpay-submit-btn:hover {
    opacity: .9;
    transform: translateY(-1px);
    box-shadow: 0 6px 20px rgba(102,86,255,.45);
}
.lk-invpay-back {
    font-size: 13px;
    color: #A3AED0;
    text-decoration: none !important;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    transition: color .2s;
}
.lk-invpay-back:hover {
    color: #6656ff;
}

/* ── Alert ──────────────────────────────────────────────────── */
.lk-invpay-alert {
    padding: 12px 16px;
    border-radius: 10px;
    font-size: 14px;
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 16px;
}
.lk-invpay-alert.is-error {
    background: #fff5f5;
    border: 1px solid #fed7d7;
    color: #c53030;
}

/* ── Invoice summary card (right column) ───────────────────── */
.lk-invpay-summary-card {
    background: #fff;
    border: 1px solid var(--lk-border);
    border-radius: 16px;
    padding: 24px;
    box-shadow: var(--lk-shadow);
    position: sticky;
    top: 24px;
}
.lk-invpay-summary-title {
    font-size: 17px;
    font-weight: 700;
    color: #1B254B;
    margin-bottom: 18px;
    padding-bottom: 14px;
    border-bottom: 1px solid var(--lk-border);
}
.lk-invpay-summary-lines {
    display: flex;
    flex-direction: column;
    gap: 10px;
    margin-bottom: 16px;
    padding-bottom: 16px;
    border-bottom: 1px solid var(--lk-border);
}
.lk-invpay-summary-line {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 12px;
    font-size: 13px;
    color: #4A5568;
}
.lk-invpay-summary-desc {
    flex: 1;
    min-width: 0;
    line-height: 1.4;
}
.lk-invpay-summary-amt {
    font-weight: 600;
    white-space: nowrap;
    color: #1B254B;
}
.lk-invpay-summary-totals {
    display: flex;
    flex-direction: column;
    gap: 8px;
    margin-bottom: 12px;
    padding-bottom: 12px;
    border-bottom: 1px solid var(--lk-border);
}
.lk-invpay-summary-row {
    display: flex;
    justify-content: space-between;
    font-size: 13px;
    color: #5B6FA6;
}
.lk-invpay-summary-paid {
    display: flex;
    justify-content: space-between;
    font-size: 13px;
    color: #5B6FA6;
    margin-bottom: 14px;
    padding-bottom: 14px;
    border-bottom: 1px solid var(--lk-border);
}
.lk-invpay-summary-total {
    display: flex;
    justify-content: space-between;
    align-items: center;
    background: linear-gradient(135deg, #f0eeff 0%, #e8e4ff 100%);
    border-radius: 10px;
    padding: 14px 16px;
    font-size: 16px;
    font-weight: 700;
    color: #1B254B;
}

/* ── Security notice ────────────────────────────────────────── */
.lk-invpay-security {
    text-align: center;
    font-size: 13px;
    color: #A3AED0;
    margin-top: 24px;
    padding: 14px 16px;
    border: 1px solid var(--lk-border);
    border-radius: 10px;
    background: #fafbff;
}


/* ============================================================
   ACCOUNT PAGES GLOBAL
   ============================================================ */
.lk-account-page .bg-seccolorstyle.bg-white,
.lk-account-page .bg-seccolorstyle.noshadow {
    background: #fff !important;
    border: 1px solid var(--lk-border) !important;
    border-radius: 16px !important;
    box-shadow: var(--lk-shadow) !important;
    padding: 24px !important;
    margin-bottom: 20px;
}
.lk-account-page .bg-seccolorstyle h2,.lk-account-page .bg-seccolorstyle h3 {
    font-size: 14px !important; font-weight: 700 !important;
    color: #1B254B !important; padding-bottom: 14px;
    border-bottom: 1px solid var(--lk-border);
    margin-bottom: 18px !important; text-align: left !important;
}
.lk-account-page label.control-label,.lk-account-page .form-group label {
    font-size: 13px !important; font-weight: 600 !important;
    color: #5B6FA6 !important; -webkit-text-fill-color: #5B6FA6 !important;
    margin-bottom: 6px; display: block;
}
.lk-account-page .form-control {
    border: 1.5px solid var(--lk-border) !important;
    border-radius: 10px !important; font-size: 14px !important;
    padding: 9px 14px !important; background: #fafbff !important;
    color: #1B254B !important; -webkit-text-fill-color: #1B254B !important;
    height: auto !important; width: 100%;
}
.lk-account-page .form-control:focus {
    border-color: #6656ff !important;
    box-shadow: 0 0 0 3px rgba(102,86,255,.12) !important;
    outline: none !important; background: #fff !important;
}
.lk-account-page .btn.btn-primary,
.lk-account-page .btn.btn-default-yellow-fill {
    background: linear-gradient(135deg, #7b6dff 0%, #6656ff 100%) !important;
    color: #fff !important; -webkit-text-fill-color: #fff !important;
    border: none !important; border-radius: 10px !important;
    padding: 9px 22px !important; font-size: 14px !important;
    font-weight: 600 !important;
    box-shadow: 0 4px 14px rgba(102,86,255,.3) !important; cursor: pointer;
}
.lk-account-page .btn.btn-primary:hover { opacity: .9 !important; }
.lk-account-page .btn.btn-default,
.lk-account-page a.btn.btn-default {
    background: transparent !important; color: #6656ff !important;
    -webkit-text-fill-color: #6656ff !important;
    border: 1.5px solid #d8d2ff !important;
    border-radius: 10px !important; padding: 9px 22px !important;
    font-size: 14px !important; font-weight: 600 !important; box-shadow: none !important;
}
.lk-account-page .btn.btn-default:hover { background: #f0eeff !important; }
.lk-account-page .btn.btn-sm { padding: 6px 14px !important; font-size: 12px !important; border-radius: 8px !important; }
.lk-account-page .btn.btn-danger {
    background: linear-gradient(135deg, #ff6b6b 0%, #e53e3e 100%) !important;
    color: #fff !important; -webkit-text-fill-color: #fff !important;
    border: none !important; border-radius: 10px !important;
}
.lk-account-page .btn.btn-success {
    background: linear-gradient(135deg, #48bb78 0%, #38a169 100%) !important;
    color: #fff !important; -webkit-text-fill-color: #fff !important;
    border: none !important; border-radius: 10px !important;
}
.lk-account-page .table.table-list thead th,
.lk-account-page table.table thead th {
    background: #f8f9ff !important; color: #A3AED0 !important;
    font-size: 11px !important; font-weight: 700 !important;
    text-transform: uppercase !important; letter-spacing: .06em !important;
    border-bottom: 1px solid var(--lk-border) !important; border-top: none !important;
    padding: 10px 16px !important;
}
.lk-account-page .table.table-list tbody td,
.lk-account-page table.table tbody td {
    padding: 14px 16px !important; font-size: 14px !important;
    color: #1B254B !important; border-top: 1px solid var(--lk-border) !important;
    vertical-align: middle !important; background: #fff !important;
}
.lk-account-page .table.table-list tbody tr:hover td,
.lk-account-page table.table tbody tr:hover td { background: #faf9ff !important; }
.lk-account-page .table-responsive,.lk-account-page .listtable {
    border: 1px solid var(--lk-border) !important;
    border-radius: 14px !important; overflow: hidden !important;
    margin-bottom: 24px !important;
}
.lk-account-page .label.label-success {
    background: #dcfce7 !important; color: #15803d !important;
    border-radius: 6px !important; font-size: 11px !important;
    padding: 3px 8px !important; font-weight: 600 !important;
}
.lk-account-page .alert.alert-block.alert-info {
    background: #f0eeff !important; border: 1px solid #d8d2ff !important;
    border-radius: 12px !important; color: #1B254B !important;
    padding: 14px 18px !important; margin-bottom: 20px !important;
}
.lk-account-page .alert.alert-warning {
    background: #fffbeb !important; border: 1px solid #fde68a !important;
    border-radius: 12px !important; color: #92400e !important; padding: 14px 18px !important;
}
.lk-account-page .alert.alert-danger {
    background: #fff0f0 !important; border: 1px solid #fca5a5 !important;
    border-radius: 12px !important; color: #c53030 !important; padding: 14px 18px !important;
}
.lk-account-page input[type=checkbox],.lk-account-page input[type=radio] { accent-color: #6656ff; }
.lk-account-page .radio-inline {
    display: inline-flex; align-items: center; gap: 8px;
    font-size: 14px; color: #1B254B !important; -webkit-text-fill-color: #1B254B !important;
}
.lk-account-page .section-subheading {
    font-size: 14px; color: #A3AED0 !important;
    -webkit-text-fill-color: #A3AED0 !important; text-align: center; margin-bottom: 16px;
}
.lk-account-page .c-black { color: #1B254B !important; -webkit-text-fill-color: #1B254B !important; }
.lk-account-page--paymentmethods .pay-method {
    background: #fff !important; border: 1px solid var(--lk-border) !important;
    border-radius: 16px !important; padding: 24px !important;
    margin-top: 0 !important; box-shadow: var(--lk-shadow) !important;
}
.lk-account-page--paymentmethods .pay-method > p { display: none; }
.lk-pw-grid { display: grid; grid-template-columns: repeat(3,1fr); gap: 16px; }
@media (max-width: 768px) { .lk-pw-grid { grid-template-columns: 1fr; } }
.lk-permissions-grid { display: grid; grid-template-columns: repeat(auto-fill,minmax(280px,1fr)); gap: 10px; }
.lk-permission-item {
    display: flex; align-items: flex-start; gap: 10px; padding: 10px 12px;
    background: #fafbff; border: 1px solid var(--lk-border); border-radius: 10px; cursor: pointer;
}
.lk-permission-item:hover { background: #f0eeff; border-color: #d8d2ff; }
.lk-permission-title { display: block; font-size: 13px; font-weight: 600; color: #1B254B; }
.lk-permission-desc { display: block; font-size: 12px; color: #A3AED0; margin-top: 2px; }
.lk-contact-selector-form { display: flex; align-items: center; gap: 8px; }
.lk-contact-selector-wrap { display: flex; align-items: center; gap: 8px; }
.lk-contact-selector-label { font-size: 13px; font-weight: 600; color: #5B6FA6; white-space: nowrap; margin: 0; }
.lk-contact-selector-select {
    border: 1.5px solid var(--lk-border) !important; border-radius: 10px !important;
    font-size: 13px !important; padding: 7px 32px 7px 12px !important;
    background: #fafbff !important; color: #1B254B !important;
    -webkit-text-fill-color: #1B254B !important; height: auto !important; min-width: 200px;
}
.lk-contacts-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 32px; }
@media (max-width: 768px) { .lk-contacts-grid { grid-template-columns: 1fr; } }
.lk-email-prefs-grid { display: grid; grid-template-columns: repeat(auto-fill,minmax(200px,1fr)); gap: 8px; margin-top: 10px; }
.lk-email-pref-item {
    display: flex; align-items: center; gap: 8px; font-size: 13px; color: #4A5568;
    padding: 8px 10px; background: #fafbff; border: 1px solid var(--lk-border); border-radius: 8px; cursor: pointer;
}
.lk-email-pref-item:hover { background: #f0eeff; border-color: #d8d2ff; }

/* ============================================================
   VIEWTICKET PAGE
   ============================================================ */
body.lk-client-area .lk-ticket-section { max-width: 1264px; margin: 0 auto; }
.lk-ticket-status { display: inline-flex; align-items: center; padding: 2px 8px; border-radius: 6px; font-size: 12px; font-weight: 700; }
.lk-ticket-status.is-open { background: #dcfce7; color: #15803d; }
.lk-ticket-status.is-closed { background: #f3f4f6; color: #6b7280; }
.lk-ticket-dept-badge { display: inline-flex; align-items: center; gap: 5px; }
.lk-ticket-timeline { display: flex; flex-direction: column; gap: 16px; margin-bottom: 24px; }
.lk-ticket-msg { display: flex; gap: 16px; align-items: flex-start; }
.lk-ticket-msg.is-staff { flex-direction: row-reverse; }
.lk-ticket-msg-avatar {
    width: 40px; height: 40px; border-radius: 50%; background: #f0eeff;
    border: 2px solid #d8d2ff; display: flex; align-items: center; justify-content: center;
    flex-shrink: 0; color: #6656ff; font-size: 16px;
}
.lk-ticket-msg.is-staff .lk-ticket-msg-avatar { background: #eff6ff; border-color: #bfdbfe; color: #2563eb; }
.lk-ticket-msg-body { flex: 1; min-width: 0; }
.lk-ticket-msg-head { display: flex; align-items: center; gap: 8px; margin-bottom: 8px; flex-wrap: wrap; }
.lk-ticket-msg-name { font-weight: 700; font-size: 14px; color: #1B254B; }
.lk-ticket-msg-role { padding: 2px 8px; border-radius: 6px; font-size: 11px; font-weight: 700; }
.lk-ticket-msg-role.is-staff { background: #eff6ff; color: #2563eb; }
.lk-ticket-msg-role.is-client { background: #f0eeff; color: #6656ff; }
.lk-ticket-msg-date { font-size: 12px; color: #A3AED0; display: flex; align-items: center; gap: 4px; margin-left: auto; }
.lk-ticket-msg-content {
    background: #fff; border: 1px solid var(--lk-border); border-radius: 14px;
    padding: 16px 20px; font-size: 14px; color: #4A5568; line-height: 1.6; box-shadow: var(--lk-shadow);
}
.lk-ticket-msg.is-staff .lk-ticket-msg-content { background: #f8f9ff; }
.lk-ticket-msg-attachments { margin-top: 10px; padding: 10px 14px; background: #f8f9ff; border-radius: 8px; border: 1px solid var(--lk-border); }
.lk-ticket-msg-att-title { font-size: 12px; font-weight: 700; color: #A3AED0; margin-bottom: 6px; display: flex; align-items: center; gap: 5px; }
.lk-ticket-msg-att-link { display: inline-flex; align-items: center; gap: 5px; font-size: 13px; color: #6656ff; text-decoration: none; margin-right: 10px; }
.lk-ticket-msg-att-link:hover { text-decoration: underline; }
.lk-ticket-reply-card { background: #fff; border: 1px solid var(--lk-border); border-radius: 16px; overflow: hidden; box-shadow: var(--lk-shadow); margin-bottom: 24px; }
.lk-ticket-reply-head { display: flex; align-items: center; justify-content: space-between; padding: 16px 20px; cursor: pointer; background: linear-gradient(135deg, #f8f7ff 0%, #f0eeff 100%); user-select: none; }
.lk-ticket-reply-head:hover { background: linear-gradient(135deg, #f0eeff 0%, #e8e4ff 100%); }
.lk-ticket-reply-head-left { display: flex; align-items: center; gap: 8px; font-size: 14px; font-weight: 700; color: #6656ff; }
.lk-ticket-reply-body { padding: 20px; border-top: 1px solid var(--lk-border); }
.lk-ticket-reply-body.is-hidden { display: none; }
.lk-ticket-section .form-control {
    border: 1.5px solid var(--lk-border) !important; border-radius: 10px !important;
    font-size: 14px !important; padding: 9px 14px !important;
    background: #fafbff !important; color: #1B254B !important; height: auto !important;
}
.lk-ticket-section .form-control:focus { border-color: #6656ff !important; box-shadow: 0 0 0 3px rgba(102,86,255,.12) !important; outline: none !important; }
.lk-ticket-section label { font-size: 13px; font-weight: 600; color: #5B6FA6; margin-bottom: 6px; display: block; }
.lk-ticket-reply-row-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; margin-bottom: 16px; }
.lk-ticket-reply-actions { display: flex; align-items: center; gap: 16px; margin-top: 16px; }
.lk-ticket-more-att { display: inline-flex; align-items: center; gap: 6px; font-size: 13px; color: #6656ff; background: #f0eeff; border: 1px solid #d8d2ff; border-radius: 8px; padding: 5px 12px; margin-top: 8px; cursor: pointer; }
.lk-ticket-att-info { font-size: 12px; color: #A3AED0; margin-top: 6px; }
@media print { .lk-ticket-reply-card { display: none; } }

/* ============================================================
   ACCOUNT SUB-NAV
   ============================================================ */
.lk-account-subnav {
    display: flex; gap: 4px; flex-wrap: wrap;
    background: #fff; border: 1px solid var(--lk-border);
    border-radius: 14px; padding: 6px; margin-bottom: 20px; box-shadow: var(--lk-shadow);
}
.lk-account-subnav-link {
    display: inline-flex; align-items: center; gap: 6px;
    padding: 7px 14px; border-radius: 10px; font-size: 13px; font-weight: 500;
    color: #5B6FA6 !important; -webkit-text-fill-color: #5B6FA6 !important;
    text-decoration: none !important; transition: background .15s, color .15s; white-space: nowrap;
}
.lk-account-subnav-link:hover {
    background: #f0eeff;
    color: #6656ff !important; -webkit-text-fill-color: #6656ff !important;
}
.lk-account-subnav-link.is-active {
    background: linear-gradient(135deg, #7b6dff 0%, #6656ff 100%);
    color: #fff !important; -webkit-text-fill-color: #fff !important; font-weight: 600;
}


/* ============================================================
   DETAILS PAGE (clientareadetails)
   ============================================================ */
.lk-account-page--details {
    max-width: 1264px;
    margin: 0 auto;
}
.lk-details-section {
    background: #fff;
    border: 1px solid var(--lk-border);
    border-radius: 16px;
    padding: 24px 28px;
    margin-bottom: 20px;
    box-shadow: var(--lk-shadow);
}
.lk-details-section-title {
    font-size: 13px;
    font-weight: 700;
    color: #6656ff;
    text-transform: uppercase;
    letter-spacing: .06em;
    display: flex;
    align-items: center;
    gap: 7px;
    margin-bottom: 20px;
    padding-bottom: 14px;
    border-bottom: 1px solid var(--lk-border);
}
.lk-details-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 16px 24px;
}
@media (max-width: 768px) { .lk-details-grid { grid-template-columns: 1fr; } }
.lk-details-field { display: flex; flex-direction: column; }
.lk-details-field--full { grid-column: 1 / -1; }
.lk-details-field label {
    font-size: 12px !important;
    font-weight: 600 !important;
    color: #A3AED0 !important;
    -webkit-text-fill-color: #A3AED0 !important;
    text-transform: uppercase;
    letter-spacing: .05em;
    margin-bottom: 6px;
}
.lk-details-field .form-control,
.lk-details-field select.form-control {
    border: 1.5px solid var(--lk-border) !important;
    border-radius: 10px !important;
    font-size: 14px !important;
    padding: 10px 14px !important;
    background: #fafbff !important;
    color: #1B254B !important;
    -webkit-text-fill-color: #1B254B !important;
    height: auto !important;
    width: 100%;
    transition: border-color .15s, box-shadow .15s;
}
.lk-details-field .form-control:focus {
    border-color: #6656ff !important;
    box-shadow: 0 0 0 3px rgba(102,86,255,.12) !important;
    outline: none !important;
    background: #fff !important;
}
.lk-details-field select.form-control { appearance: auto; }
/* country dropdown generated by WHMCS */
.lk-details-field select { width: 100%; }
.lk-details-marketing-sub { font-size: 13px; color: #5B6FA6; margin-bottom: 12px; }
.lk-details-actions {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 20px 28px;
    background: #fff;
    border: 1px solid var(--lk-border);
    border-radius: 16px;
    box-shadow: var(--lk-shadow);
    margin-bottom: 24px;
}
.lk-details-save-btn {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 10px 26px;
    background: linear-gradient(135deg, #7b6dff 0%, #6656ff 100%);
    color: #fff !important;
    -webkit-text-fill-color: #fff !important;
    border: none;
    border-radius: 10px;
    font-size: 14px;
    font-weight: 600;
    box-shadow: 0 4px 14px rgba(102,86,255,.3);
    cursor: pointer;
    transition: opacity .15s;
}
.lk-details-save-btn:hover { opacity: .9; }
.lk-details-cancel-btn {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 10px 22px;
    background: transparent;
    color: #6656ff !important;
    -webkit-text-fill-color: #6656ff !important;
    border: 1.5px solid #d8d2ff;
    border-radius: 10px;
    font-size: 14px;
    font-weight: 600;
    cursor: pointer;
    transition: background .15s;
}
.lk-details-cancel-btn:hover { background: #f0eeff; }


/* ============================================================
   DETAILS PAGE — single card pattern (v97)
   ============================================================ */
.lk-details-card { max-width: 1264px; margin: 0 auto; }
.lk-form-divider {
    border: none; border-top: 1px solid var(--lk-border);
    margin: 28px 0;
}
.lk-form-group-label {
    display: flex; align-items: center; gap: 7px;
    font-size: 12px; font-weight: 700; color: #6656ff;
    text-transform: uppercase; letter-spacing: .06em;
    margin-bottom: 18px;
}
.lk-details-grid {
    display: grid; grid-template-columns: 1fr 1fr; gap: 16px 24px;
}
@media (max-width: 768px) { .lk-details-grid { grid-template-columns: 1fr; } }
.lk-details-field { display: flex; flex-direction: column; }
.lk-details-field--full { grid-column: 1 / -1; }
.lk-details-field label,
.lk-details-card label {
    font-size: 12px !important; font-weight: 600 !important;
    color: #A3AED0 !important; -webkit-text-fill-color: #A3AED0 !important;
    text-transform: uppercase; letter-spacing: .05em; margin-bottom: 6px; display: block;
}
.lk-details-field .form-control,
.lk-details-card .form-control,
.lk-details-card select {
    border: 1.5px solid var(--lk-border) !important; border-radius: 10px !important;
    font-size: 14px !important; padding: 10px 14px !important;
    background: #fafbff !important; color: #1B254B !important;
    -webkit-text-fill-color: #1B254B !important; height: auto !important; width: 100%;
    transition: border-color .15s, box-shadow .15s;
}
.lk-details-field .form-control:focus,
.lk-details-card .form-control:focus {
    border-color: #6656ff !important;
    box-shadow: 0 0 0 3px rgba(102,86,255,.12) !important;
    outline: none !important; background: #fff !important;
}
.lk-details-marketing-sub { font-size: 13px; color: #5B6FA6; margin-bottom: 12px; }
.lk-details-actions { display: flex; align-items: center; gap: 12px; margin-top: 4px; }
.lk-details-save-btn {
    display: inline-flex; align-items: center; gap: 8px;
    padding: 10px 26px;
    background: linear-gradient(135deg, #7b6dff 0%, #6656ff 100%);
    color: #fff !important; -webkit-text-fill-color: #fff !important;
    border: none; border-radius: 10px; font-size: 14px; font-weight: 600;
    box-shadow: 0 4px 14px rgba(102,86,255,.3); cursor: pointer; transition: opacity .15s;
}
.lk-details-save-btn:hover { opacity: .9; }
.lk-details-cancel-btn {
    display: inline-flex; align-items: center; gap: 8px;
    padding: 10px 22px; background: transparent;
    color: #6656ff !important; -webkit-text-fill-color: #6656ff !important;
    border: 1.5px solid #d8d2ff; border-radius: 10px;
    font-size: 14px; font-weight: 600; cursor: pointer; transition: background .15s;
}
.lk-details-cancel-btn:hover { background: #f0eeff; }


/* ============================================================
   EMAIL PREFS — fix uppercase (v98)
   ============================================================ */
.lk-email-pref-label {
    font-size: 13px !important;
    font-weight: 500 !important;
    color: #1B254B !important;
    -webkit-text-fill-color: #1B254B !important;
    text-transform: none !important;
    letter-spacing: 0 !important;
    line-height: 1.4;
}
.lk-email-pref-item {
    align-items: flex-start;
    padding: 10px 12px;
}
.lk-email-pref-cb {
    margin-top: 2px;
    flex-shrink: 0;
}


/* ============================================================
   EMAIL PREFS — sans boites, liste simple (v99)
   ============================================================ */
.lk-email-prefs-grid {
    display: flex !important;
    flex-direction: column !important;
    gap: 10px !important;
}
.lk-email-pref-item {
    display: flex !important;
    align-items: center !important;
    gap: 10px !important;
    padding: 0 !important;
    background: none !important;
    border: none !important;
    border-radius: 0 !important;
    cursor: pointer;
}
.lk-email-pref-item:hover { background: none !important; }
.lk-email-pref-label {
    font-size: 14px !important;
    font-weight: 400 !important;
    color: #4A5568 !important;
    -webkit-text-fill-color: #4A5568 !important;
    text-transform: none !important;
    letter-spacing: 0 !important;
    line-height: 1.4;
}
.lk-email-pref-cb { flex-shrink: 0; accent-color: #6656ff; width: 15px; height: 15px; }


/* ============================================================
   v100 — Fix inner cards dans lk-lpanel-library
   ============================================================ */

/* Les actions (Save/Cancel) ne doivent PAS être une carte,
   juste une barre avec un séparateur */
.lk-lpanel-library .lk-details-actions {
    background: transparent !important;
    border: none !important;
    border-top: 1px solid var(--lk-border) !important;
    border-radius: 0 !important;
    box-shadow: none !important;
    padding: 20px 0 0 0 !important;
    margin-top: 24px;
    margin-bottom: 0;
}

/* Neutraliser les inner-cards que le thème Antler applique
   aux forms et divs directs dans lk-lpanel-library */
.lk-lpanel-library form,
.lk-lpanel-library form.form-horizontal {
    background: transparent !important;
    border: none !important;
    box-shadow: none !important;
    padding: 0 !important;
    margin: 0 !important;
}

/* S'assurer que les inputs sont visibles dans lk-account-page */
.lk-account-page .form-control,
.lk-lpanel-library .form-control {
    border: 1.5px solid #dde2f0 !important;
    border-radius: 10px !important;
    font-size: 14px !important;
    padding: 10px 14px !important;
    background: #fafbff !important;
    color: #1B254B !important;
    -webkit-text-fill-color: #1B254B !important;
    height: auto !important;
    width: 100%;
    box-shadow: none !important;
}
.lk-account-page .form-control:focus,
.lk-lpanel-library .form-control:focus {
    border-color: #6656ff !important;
    box-shadow: 0 0 0 3px rgba(102,86,255,.12) !important;
    outline: none !important;
    background: #fff !important;
}

/* Labels dans lk-lpanel-library */
.lk-lpanel-library label.control-label,
.lk-lpanel-library .form-group label {
    font-size: 12px !important;
    font-weight: 600 !important;
    color: #A3AED0 !important;
    -webkit-text-fill-color: #A3AED0 !important;
    text-transform: uppercase;
    letter-spacing: .05em;
    margin-bottom: 6px;
    display: block;
}

/* Bouton primaire dans lk-lpanel-library */
.lk-lpanel-library .btn.btn-primary {
    background: linear-gradient(135deg, #7b6dff 0%, #6656ff 100%) !important;
    color: #fff !important; -webkit-text-fill-color: #fff !important;
    border: none !important; border-radius: 10px !important;
    padding: 9px 22px !important; font-size: 14px !important;
    font-weight: 600 !important;
    box-shadow: 0 4px 14px rgba(102,86,255,.3) !important;
}
.lk-lpanel-library .btn.btn-default {
    background: transparent !important;
    color: #6656ff !important; -webkit-text-fill-color: #6656ff !important;
    border: 1.5px solid #d8d2ff !important;
    border-radius: 10px !important;
    padding: 9px 22px !important; font-size: 14px !important; font-weight: 600 !important;
    box-shadow: none !important;
}

/* lk-details-save-btn / cancel dans lk-lpanel-library — s'assurer qu'ils ont le bon cursor */
.lk-lpanel-library .lk-details-save-btn,
.lk-lpanel-library input.lk-details-save-btn {
    cursor: pointer;
}
.lk-lpanel-library .lk-details-cancel-btn,
.lk-lpanel-library input.lk-details-cancel-btn {
    cursor: pointer;
}


/* ============================================================
   v101 — Fix boutons table lk-lpanel-library
   ============================================================ */

/* btn-default : texte bleu visible, fond blanc, bordure légère */
.lk-lpanel-library .btn.btn-default,
.lk-lpanel-library a.btn.btn-default,
.lk-lpanel-library .btn.btn-default.btn-sm,
.lk-lpanel-library a.btn.btn-default.btn-sm {
    background: #fff !important;
    color: #5B6FA6 !important;
    -webkit-text-fill-color: #5B6FA6 !important;
    border: 1.5px solid #dde2f0 !important;
    border-radius: 8px !important;
    box-shadow: none !important;
    font-size: 12px !important;
    font-weight: 500 !important;
    padding: 5px 12px !important;
}
.lk-lpanel-library .btn.btn-default:hover,
.lk-lpanel-library a.btn.btn-default:hover {
    background: #f0eeff !important;
    color: #6656ff !important;
    -webkit-text-fill-color: #6656ff !important;
    border-color: #d8d2ff !important;
}

/* btn-danger : rouge sobre, pas de jaune au hover */
.lk-lpanel-library .btn.btn-danger,
.lk-lpanel-library a.btn.btn-danger,
.lk-lpanel-library .btn.btn-danger.btn-sm {
    background: #fff0f0 !important;
    color: #e53e3e !important;
    -webkit-text-fill-color: #e53e3e !important;
    border: 1.5px solid #fed7d7 !important;
    border-radius: 8px !important;
    box-shadow: none !important;
    font-size: 12px !important;
    font-weight: 500 !important;
    padding: 5px 12px !important;
}
.lk-lpanel-library .btn.btn-danger:hover,
.lk-lpanel-library a.btn.btn-danger:hover {
    background: #ffe4e4 !important;
    color: #c53030 !important;
    -webkit-text-fill-color: #c53030 !important;
    border-color: #fc8181 !important;
}

/* disabled */
.lk-lpanel-library .btn[disabled],
.lk-lpanel-library .btn.disabled {
    opacity: .4 !important;
    pointer-events: none !important;
}


/* ============================================================
   v102 — Fix titre + sous-cartes dans lk-lpanel-library
   ============================================================ */

/* 1. Titre h2 invisible (texte blanc sur fond blanc) */
.lk-lpanel-library .lk-page-hero-title,
.lk-lpanel-library h2.lk-page-hero-title {
    color: #1B254B !important;
    -webkit-text-fill-color: #1B254B !important;
    font-size: 20px !important;
    font-weight: 700 !important;
    margin: 0 0 4px !important;
    display: flex;
    align-items: center;
}
.lk-lpanel-library .lk-page-hero-sub {
    color: #A3AED0 !important;
    -webkit-text-fill-color: #A3AED0 !important;
    font-size: 14px !important;
    margin: 0 !important;
}

/* 2. Neutraliser les sous-cartes que le thème Antler ajoute
      aux div/section directs à l'intérieur de lk-lpanel-library */
.lk-lpanel-library > form,
.lk-lpanel-library > div:not(.lk-lpanel-library-head):not(.listtable):not(.table-responsive),
.lk-lpanel-library form > div:not(.lk-details-grid):not(.lk-pw-grid):not(.lk-form-divider):not(.well):not(.lk-permissions-grid):not(.lk-email-prefs-grid):not([id*="modal"]) {
    background: transparent !important;
    border: none !important;
    box-shadow: none !important;
    padding: 0 !important;
}

/* 3. lk-pw-grid et lk-details-grid : jamais de carte */
.lk-lpanel-library .lk-pw-grid,
.lk-lpanel-library .lk-details-grid {
    background: transparent !important;
    border: none !important;
    box-shadow: none !important;
    padding: 0 !important;
}

/* 4. lk-details-actions : séparateur seulement, jamais de carte */
.lk-lpanel-library .lk-details-actions,
.lk-account-page .lk-details-actions {
    background: transparent !important;
    border: none !important;
    border-top: 1px solid #dde2f0 !important;
    border-radius: 0 !important;
    box-shadow: none !important;
    padding: 20px 0 4px !important;
    margin-top: 24px !important;
    margin-bottom: 0 !important;
}

/* 5. form-group : pas de fond ajouté */
.lk-lpanel-library .form-group {
    background: transparent !important;
    border: none !important;
    box-shadow: none !important;
}

/* 6. Paragraphe section-subheading souvent inutile */
.lk-lpanel-library .section-subheading {
    display: none;
}


/* ============================================================
   v103 — Boutons input[type=submit/reset] dans lpanel
   ============================================================ */

/* Save button (aussi bien <button> que <input type=submit>) */
.lk-lpanel-library input.lk-details-save-btn,
.lk-lpanel-library button.lk-details-save-btn,
input.lk-details-save-btn,
button.lk-details-save-btn {
    display: inline-block !important;
    padding: 10px 26px !important;
    background: linear-gradient(135deg, #7b6dff 0%, #6656ff 100%) !important;
    color: #fff !important;
    -webkit-text-fill-color: #fff !important;
    border: none !important;
    border-radius: 10px !important;
    font-size: 14px !important;
    font-weight: 600 !important;
    box-shadow: 0 4px 14px rgba(102,86,255,.3) !important;
    cursor: pointer !important;
    text-decoration: none !important;
}
.lk-lpanel-library input.lk-details-save-btn:hover,
.lk-lpanel-library button.lk-details-save-btn:hover,
input.lk-details-save-btn:hover,
button.lk-details-save-btn:hover {
    opacity: .9 !important;
    color: #fff !important;
    -webkit-text-fill-color: #fff !important;
}

/* Cancel button */
.lk-lpanel-library input.lk-details-cancel-btn,
.lk-lpanel-library button.lk-details-cancel-btn,
input.lk-details-cancel-btn,
button.lk-details-cancel-btn {
    display: inline-block !important;
    padding: 10px 22px !important;
    background: transparent !important;
    color: #6656ff !important;
    -webkit-text-fill-color: #6656ff !important;
    border: 1.5px solid #d8d2ff !important;
    border-radius: 10px !important;
    font-size: 14px !important;
    font-weight: 600 !important;
    box-shadow: none !important;
    cursor: pointer !important;
    text-decoration: none !important;
}
.lk-lpanel-library input.lk-details-cancel-btn:hover,
.lk-lpanel-library button.lk-details-cancel-btn:hover,
input.lk-details-cancel-btn:hover,
button.lk-details-cancel-btn:hover {
    background: #f0eeff !important;
    color: #6656ff !important;
    -webkit-text-fill-color: #6656ff !important;
}

/* ============================================================
   v104 — Boutons rouge danger (supprimer / retirer accès)
   ============================================================ */
.btn-delete,
.btn-delete:link,
.btn-delete:visited,
.btn-delete:hover,
.btn-delete:focus,
.btn-remove-user,
.btn-remove-user:link,
.btn-remove-user:visited,
.btn-remove-user:hover,
.btn-remove-user:focus,
.btn-cancel-invite,
.btn-cancel-invite:link,
.btn-cancel-invite:visited,
.btn-cancel-invite:hover,
.btn-cancel-invite:focus {
    background: #e53e3e !important;
    background-color: #e53e3e !important;
    background-image: none !important;
    color: #ffffff !important;
    -webkit-text-fill-color: #ffffff !important;
    border-color: #e53e3e !important;
    text-decoration: none !important;
}
.btn-delete:hover,
.btn-remove-user:hover,
.btn-cancel-invite:hover {
    background: #c53030 !important;
    background-color: #c53030 !important;
    border-color: #c53030 !important;
}

/* ============================================================
   v104b — Fix boutons table paiement (spécificité haute)
   ============================================================ */
body.lk-client-area .table.table-list .btn.btn-delete,
body.lk-client-area .table.table-list .btn.btn-delete:link,
body.lk-client-area .table.table-list .btn.btn-delete:visited,
body.lk-client-area .table.table-list .btn.btn-delete:hover,
body.lk-client-area .lk-lpanel-library .btn.btn-delete,
body.lk-client-area .lk-lpanel-library .btn.btn-delete:hover {
    background: #e53e3e !important;
    background-color: #e53e3e !important;
    background-image: none !important;
    color: #ffffff !important;
    -webkit-text-fill-color: #ffffff !important;
    border-color: #e53e3e !important;
    text-decoration: none !important;
}
body.lk-client-area .table.table-list .btn.btn-set-default,
body.lk-client-area .table.table-list .btn.btn-set-default:link,
body.lk-client-area .table.table-list .btn.btn-set-default:visited,
body.lk-client-area .table.table-list a.btn[data-role=edit-payment-method],
body.lk-client-area .table.table-list a.btn[data-role=edit-payment-method]:visited {
    background: #ffffff !important;
    background-color: #ffffff !important;
    background-image: none !important;
    color: #6656ff !important;
    -webkit-text-fill-color: #6656ff !important;
    border: 1.5px solid #d8d2ff !important;
    text-decoration: none !important;
}

/* ============================================================
   SPINNER DE CHARGEMENT — pages liste
   Classe lk-list-loading ajoutée sur <html> avant le rendu du body.
   Retirée sur window.load via JS dans head.tpl.
   ============================================================ */
html.lk-list-loading body::before {
    content: '';
    position: fixed;
    top: 0; left: 0; right: 0; bottom: 0;
    background: rgba(241, 244, 251, 0.90);
    z-index: 99998;
    pointer-events: none;
}
html.lk-list-loading body::after {
    content: '';
    position: fixed;
    top: 50%;
    left: 50%;
    width: 52px;
    height: 52px;
    margin-top: -26px;
    margin-left: -26px;
    border: 4px solid #e0e6f0;
    border-top-color: #6656ff;
    border-radius: 50%;
    animation: lkSpinnerRot .72s linear infinite;
    z-index: 99999;
    pointer-events: none;
}
@keyframes lkSpinnerRot {
    to { transform: rotate(360deg); }
}
/* Fade-out avant suppression de la classe */
html.lk-list-loading-done body::before,
html.lk-list-loading-done body::after {
    opacity: 0;
    transition: opacity .3s ease;
}

/* ── Bouton action danger dans les tables (ex: Fermer ticket) ── */
body.lk-client-area .lk-table-action-danger {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 38px;
    padding: 0 14px;
    border-radius: 12px;
    border: 1px solid #fca5a5;
    background: #fff0f0;
    color: #c53030 !important;
    -webkit-text-fill-color: #c53030 !important;
    text-decoration: none !important;
    font-size: 12px;
    font-weight: 700;
    cursor: pointer;
    white-space: nowrap;
    line-height: 1;
}
body.lk-client-area .lk-table-action-danger:hover {
    background: #fde8e8;
    border-color: #f87171;
    color: #991b1b !important;
    -webkit-text-fill-color: #991b1b !important;
}

/* ============================================================
   DATATABLES — suppression des flèches natives + style Likuid
   ============================================================ */
/* Masquer les flèches double (before/after) et bg-image de DataTables */
body.lk-client-area table.dataTable thead th::before,
body.lk-client-area table.dataTable thead th::after {
    display: none !important;
    content: '' !important;
}
body.lk-client-area table.dataTable thead th {
    background-image: none !important;
}

/* Notre chevron : transitions */
body.lk-client-area table.dataTable thead th .lk-sort-icon {
    display: inline-block;
    transition: transform .2s ease, color .15s;
    font-size: 11px;
    margin-left: 4px;
    vertical-align: middle;
    color: #b0b8d0;
}

/* Colonne triée ASC → chevron pointe vers le haut */
body.lk-client-area table.dataTable thead th.sorting_asc .lk-sort-icon {
    transform: rotate(180deg);
    color: #6656ff !important;
}

/* Colonne triée DESC → chevron pointe vers le bas (position normale) */
body.lk-client-area table.dataTable thead th.sorting_desc .lk-sort-icon {
    transform: rotate(0deg);
    color: #6656ff !important;
}

/* Colonne non triée → chevron discret */
body.lk-client-area table.dataTable thead th.sorting .lk-sort-icon {
    opacity: 0.45;
}

/* Highlight du header actif */
body.lk-client-area table.dataTable thead th.sorting_asc .lk-svc-sort-btn,
body.lk-client-area table.dataTable thead th.sorting_desc .lk-svc-sort-btn {
    color: #6656ff;
}

/* ── FIX v2 — Suppression agressive flèches DataTables ── */
body.lk-client-area .table thead th::before,
body.lk-client-area .table thead th::after,
body.lk-client-area table thead th.sorting::before,
body.lk-client-area table thead th.sorting::after,
body.lk-client-area table thead th.sorting_asc::before,
body.lk-client-area table thead th.sorting_asc::after,
body.lk-client-area table thead th.sorting_desc::before,
body.lk-client-area table thead th.sorting_desc::after,
body.lk-client-area table thead th.sorting_asc_disabled::before,
body.lk-client-area table thead th.sorting_asc_disabled::after,
body.lk-client-area table thead th.sorting_desc_disabled::before,
body.lk-client-area table thead th.sorting_desc_disabled::after {
    display: none !important;
    content: none !important;
    opacity: 0 !important;
    visibility: hidden !important;
}
body.lk-client-area table thead th.sorting,
body.lk-client-area table thead th.sorting_asc,
body.lk-client-area table thead th.sorting_desc {
    background-image: none !important;
    padding-right: 8px !important;
}

/* ── FIX — Bouton Fermer même taille que Voir / Répondre ── */
body.lk-client-area .lk-table-action-danger {
    min-height: 38px !important;
    height: 38px !important;
    padding: 0 14px !important;
    font-size: 12px !important;
    border-radius: 12px !important;
    border: 1px solid #fca5a5 !important;
    background: #fff0f0 !important;
    color: #c53030 !important;
    -webkit-text-fill-color: #c53030 !important;
    box-shadow: none !important;
    font-weight: 700 !important;
    line-height: 1 !important;
}
body.lk-client-area .lk-table-action-danger:hover {
    background: #fde8e8 !important;
    border-color: #f87171 !important;
    color: #991b1b !important;
    -webkit-text-fill-color: #991b1b !important;
}
body.lk-client-area .lk-table-action-danger i {
    color: #c53030 !important;
    -webkit-text-fill-color: #c53030 !important;
}

/* ── FIX v4 — Fermer même hauteur que Voir/Répondre dans tickets ── */
body.lk-client-area .lk-tickets-section .lk-table-action-danger {
    height: auto !important;
    min-height: unset !important;
    padding: 6px 14px !important;
    font-size: 12px !important;
}

/* ── FIX v3 — bouton Fermer standalone (sans class btn) ── */
body.lk-client-area .lk-table-action-danger {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 5px !important;
    height: 38px !important;
    padding: 0 14px !important;
    border-radius: 12px !important;
    border: 1px solid #fca5a5 !important;
    background: #fff0f0 !important;
    background-image: none !important;
    color: #c53030 !important;
    -webkit-text-fill-color: #c53030 !important;
    font-size: 12px !important;
    font-weight: 700 !important;
    font-family: inherit !important;
    line-height: 1 !important;
    box-sizing: border-box !important;
    box-shadow: none !important;
    text-decoration: none !important;
    cursor: pointer !important;
    white-space: nowrap !important;
    vertical-align: middle !important;
}
body.lk-client-area .lk-table-action-danger i,
body.lk-client-area .lk-table-action-danger span {
    color: #c53030 !important;
    -webkit-text-fill-color: #c53030 !important;
    font-size: 11px !important;
}
body.lk-client-area .lk-table-action-danger:hover {
    background: #fde8e8 !important;
    border-color: #f87171 !important;
    color: #991b1b !important;
    -webkit-text-fill-color: #991b1b !important;
}
body.lk-client-area .lk-table-action-danger:hover i,
body.lk-client-area .lk-table-action-danger:hover span {
    color: #991b1b !important;
    -webkit-text-fill-color: #991b1b !important;
}


/* ============================================================
   SERVICES PAGE — Mobile layout (max-width: 767px)
   Breakpoint aligné avec la disparition du col-head
   ============================================================ */
@media (max-width: 767px) {

    /* Chaque rangée devient une mini-carte en 2 zones :
       [icon + nom/domaine] en haut, puis une grille 2×2
       pour prix/plan/date/statut, et les boutons en bas. */
    body.lk-client-area .lk-services-list .lk-list-item {
        flex-wrap: wrap;
        gap: 10px 12px;
        padding: 14px 14px;
        align-items: flex-start;
    }

    /* L'icône reste à sa taille fixe */
    body.lk-client-area .lk-services-list .lk-list-icon {
        flex: 0 0 38px;
        align-self: flex-start;
    }

    /* Le nom/domaine prend toute la largeur restante sur la 1ère ligne */
    body.lk-client-area .lk-services-list .lk-list-main {
        flex: 1 1 0;
        min-width: 0;
    }

    /* Forcer le nom à ne pas déborder */
    body.lk-client-area .lk-services-list .lk-list-name {
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
    }

    /* Prix et Plan : petits blocs côte-à-côte, en dessous du nom */
    body.lk-client-area .lk-services-list .lk-list-prix {
        flex: 0 0 auto;
        min-width: 0;
        width: calc(50% - 6px);
    }

    body.lk-client-area .lk-services-list .lk-list-plan {
        flex: 0 0 auto;
        min-width: 0;
        width: calc(50% - 6px);
    }

    /* Date de renouvellement : pleine largeur */
    body.lk-client-area .lk-services-list .lk-list-due {
        flex: 1 1 100%;
        min-width: 0;
        text-align: left;
    }

    /* Statut : pleine largeur, aligné à gauche */
    body.lk-client-area .lk-services-list .lk-list-status {
        flex: 1 1 100%;
        min-width: 0;
    }

    /* Zone d'action : pleine largeur, boutons qui wrappent proprement */
    body.lk-client-area .lk-services-list .lk-list-action,
    body.lk-client-area .lk-services-list .lk-list-action--with-quick {
        flex: 1 1 100%;
        min-width: 0;
        display: flex;
        flex-wrap: wrap;
        gap: 6px;
        justify-content: flex-start;
    }

    /* Les quick-btns (Webmail, cPanel) occupent leur espace naturel */
    body.lk-client-area .lk-services-list .lk-quick-btn {
        flex: 0 0 auto;
        white-space: nowrap;
    }

    /* Le bouton Gérer prend toute la largeur restante */
    body.lk-client-area .lk-services-list .lk-list-action--with-quick .lk-lpanel-row-btn {
        flex: 1 1 100%;
        text-align: center;
    }

    /* Header section : empiler gauche/droite verticalement */
    body.lk-client-area .lk-services-section .lk-lpanel-library-head {
        flex-direction: column !important;
        align-items: flex-start !important;
        gap: 12px !important;
    }

    /* Côté droit : pills + search + CTA en colonne ou en ligne étroite */
    body.lk-client-area .lk-services-section .lk-section-head-right {
        width: 100%;
        justify-content: flex-start;
        flex-wrap: wrap;
        gap: 8px;
    }

    /* Le champ de recherche prend toute la largeur disponible */
    body.lk-client-area .lk-services-section .lk-section-search {
        width: 100% !important;
        flex: 1 1 100% !important;
    }

    /* Le bouton Commander prend toute la largeur */
    body.lk-client-area .lk-services-section .lk-section-cta {
        width: 100%;
        justify-content: center;
    }

    /* Pills de statut : scroll horizontal si trop larges */
    body.lk-client-area .lk-services-section .lk-lpanel-tabs {
        overflow-x: auto;
        flex-wrap: nowrap;
        max-width: 100%;
    }
}


/* ============================================================
   v108 — Page Mes domaines : responsive mobile
   Table DataTable ne déborde plus de la carte
   ============================================================ */

/* Scroll horizontal sur la table au lieu de déborder */
body.lk-client-area .lk-table-shell {
    overflow-x: auto !important;
    -webkit-overflow-scrolling: touch;
    max-width: 100%;
}

/* Sur mobile : masquer colonnes non-essentielles */
@media (max-width: 767px) {

    /* Colonne SSL icon (col 2) — masquée */
    #tableDomainsList thead th:nth-child(2),
    #tableDomainsList tbody td:nth-child(2) {
        display: none !important;
    }

    /* Colonne Renouvellement auto/manuel (col 6) — masquée */
    #tableDomainsList thead th:nth-child(6),
    #tableDomainsList tbody td:nth-child(6) {
        display: none !important;
    }

    /* Colonne État (col 7) — masquée (info déjà dans les badges sous le nom) */
    #tableDomainsList thead th:nth-child(7),
    #tableDomainsList tbody td:nth-child(7) {
        display: none !important;
    }

    /* Colonne Actions (col 8) : réduire */
    #tableDomainsList thead th:nth-child(8),
    #tableDomainsList tbody td:nth-child(8) {
        min-width: 80px !important;
        width: 80px !important;
    }

    /* Cacher les boutons icônes et dropdown, garder seulement "Gérer" */
    #tableDomainsList tbody td:nth-child(8) a[title]:not(.lk-lpanel-row-btn),
    #tableDomainsList tbody td:nth-child(8) .dropdown-toggle,
    #tableDomainsList tbody td:nth-child(8) .btn-group > a:not(.lk-lpanel-row-btn) {
        display: none !important;
    }

    /* Nom de domaine : plus de place */
    #tableDomainsList thead th:nth-child(3),
    #tableDomainsList tbody td:nth-child(3) {
        min-width: 130px !important;
    }

    /* Date échéance : compacte */
    #tableDomainsList thead th:nth-child(5),
    #tableDomainsList tbody td:nth-child(5) {
        min-width: 85px !important;
        font-size: 12px !important;
        white-space: nowrap !important;
    }

    /* Checkbox : compacte */
    #tableDomainsList thead th:nth-child(1),
    #tableDomainsList tbody td:nth-child(1) {
        width: 32px !important;
        min-width: 32px !important;
        padding-left: 8px !important;
        padding-right: 4px !important;
    }
}


/* ============================================================
   v109 — Mobile : pleine largeur pour tous les écrans < 768px
   ============================================================ */

@media (max-width: 767px) {

    /* ── Wrapper : enlever le décalage de la sidebar ── */
    body.lk-client-area .wrapper.sec-normal.lk-has-sidebar {
        margin-left: 0 !important;
        padding-top: 56px !important;
    }

    /* ── Colonne Bootstrap : supprimer les paddings latéraux ── */
    body.lk-client-area .main-content > .row > [class*="col-"] {
        padding-left: 0 !important;
        padding-right: 0 !important;
    }

    /* ── Carte principale (lpanel-library) : pleine largeur ── */
    body.lk-client-area .lk-lpanel-library {
        max-width: 100% !important;
        margin-left: 0 !important;
        margin-right: 0 !important;
        border-radius: 0 !important;
        padding-left: 12px !important;
        padding-right: 12px !important;
    }

    /* ── Sections spécifiques : pleine largeur ── */
    body.lk-client-area .lk-content-width,
    body.lk-client-area .lk-lpanel-home,
    body.lk-client-area .lk-services-toolbar,
    body.lk-client-area .lk-services-list,
    body.lk-client-area .lk-domains-section,
    body.lk-client-area .lk-invoices-section,
    body.lk-client-area .lk-tickets-section {
        max-width: 100% !important;
        margin-left: 0 !important;
        margin-right: 0 !important;
    }

    /* ── Header de la carte (titre + pills) : padding réduit ── */
    body.lk-client-area .lk-lpanel-library-head {
        padding-left: 4px !important;
        padding-right: 4px !important;
    }

    /* ── Table shell : pleine largeur ── */
    body.lk-client-area .lk-table-shell,
    body.lk-client-area .table-container {
        margin-left: -12px !important;
        margin-right: -12px !important;
        border-radius: 0 !important;
    }
}


/* ============================================================
   v110 — Mes domaines : look app-native mobile
   ============================================================ */

@media (max-width: 767px) {

    /* ══ HEADER ══════════════════════════════════════════════ */

    /* Container header: colonne */
    body.lk-client-area .lk-domains-section .lk-lpanel-library-head {
        flex-direction: column !important;
        gap: 0 !important;
        padding: 16px 16px 0 16px !important;
        align-items: stretch !important;
    }

    body.lk-client-area .lk-domains-section .lk-section-head-left {
        margin-bottom: 10px !important;
    }

    /* Section droite : row avec wrap */
    body.lk-client-area .lk-domains-section .lk-section-head-right {
        flex-direction: row !important;
        flex-wrap: wrap !important;
        width: 100% !important;
        gap: 8px !important;
        align-items: center !important;
    }

    /* Pills : ordre 1 — pleine largeur, scroll horizontal sans scrollbar visible */
    body.lk-client-area .lk-domains-section .lk-lpanel-tabs {
        order: 1 !important;
        flex: 0 0 100% !important;
        overflow-x: auto !important;
        flex-wrap: nowrap !important;
        -webkit-overflow-scrolling: touch;
        scrollbar-width: none;
        padding-bottom: 8px !important;
    }
    body.lk-client-area .lk-domains-section .lk-lpanel-tabs::-webkit-scrollbar { display: none; }

    /* Champ de recherche : ordre 2, flex-grow */
    body.lk-client-area .lk-domains-section .lk-domains-search {
        order: 2 !important;
        flex: 1 1 auto !important;
        min-width: 0 !important;
    }

    /* Bouton + Enregistrer : ordre 3, compact */
    body.lk-client-area .lk-domains-section .lk-section-cta {
        order: 3 !important;
        flex: 0 0 auto !important;
        white-space: nowrap !important;
        padding: 8px 14px !important;
        font-size: 13px !important;
    }

    /* ══ TABLE → LISTE DE CARTES ═══════════════════════════════ */

    /* Convertir en blocs */
    body.lk-client-area #tableDomainsList,
    body.lk-client-area #tableDomainsList tbody {
        display: block !important;
        width: 100% !important;
    }

    /* Cacher l'entête de table */
    body.lk-client-area #tableDomainsList thead {
        display: none !important;
    }

    /* Chaque ligne = item de liste */
    body.lk-client-area #tableDomainsList tbody tr {
        display: flex !important;
        flex-wrap: nowrap !important;
        align-items: flex-start !important;
        padding: 14px 16px !important;
        border-top: none !important;
        border-bottom: 1px solid #f0f2f7 !important;
        transition: background 0.12s !important;
    }

    body.lk-client-area #tableDomainsList tbody tr:last-child {
        border-bottom: none !important;
    }

    body.lk-client-area #tableDomainsList tbody tr:active {
        background: #f5f6ff !important;
    }

    /* Reset cellules */
    body.lk-client-area #tableDomainsList tbody td {
        display: block !important;
        border: none !important;
        padding: 0 !important;
        background: transparent !important;
    }

    /* Col 1 — Checkbox */
    body.lk-client-area #tableDomainsList tbody td:nth-child(1) {
        flex: 0 0 auto !important;
        padding-right: 12px !important;
        padding-top: 4px !important;
        align-self: flex-start !important;
    }

    /* Col 2 — SSL: masqué */
    body.lk-client-area #tableDomainsList tbody td:nth-child(2) { display: none !important; }

    /* Col 3 — Nom de domaine (flex-grow, contient aussi le .lk-mob-meta) */
    body.lk-client-area #tableDomainsList tbody td:nth-child(3) {
        flex: 1 1 0 !important;
        min-width: 0 !important;
        align-self: flex-start !important;
    }

    /* Col 4 — Date d'enregistrement: masqué */
    body.lk-client-area #tableDomainsList tbody td:nth-child(4) { display: none !important; }

    /* Col 5 — Échéance: masqué (contenu fusionné dans .lk-mob-meta via JS) */
    body.lk-client-area #tableDomainsList tbody td:nth-child(5) { display: none !important; }

    /* Col 6 — Renouvellement: masqué */
    body.lk-client-area #tableDomainsList tbody td:nth-child(6) { display: none !important; }

    /* Col 7 — État: masqué (info dans les badges) */
    body.lk-client-area #tableDomainsList tbody td:nth-child(7) { display: none !important; }

    /* Col 8 — Actions: bouton Gérer seulement */
    body.lk-client-area #tableDomainsList tbody td:nth-child(8) {
        flex: 0 0 auto !important;
        padding-left: 12px !important;
        align-self: flex-start !important;
    }

    /* Cacher DNS, Email, dropdown chevron */
    body.lk-client-area #tableDomainsList td:nth-child(8) .lk-quick-btn,
    body.lk-client-area #tableDomainsList td:nth-child(8) .lk-table-action-chevron {
        display: none !important;
    }

    /* Bouton Gérer : style compact */
    body.lk-client-area #tableDomainsList td:nth-child(8) .lk-domain-manage-btn {
        padding: 6px 14px !important;
        font-size: 13px !important;
        white-space: nowrap !important;
        border-radius: 8px !important;
    }

    /* ══ TYPOGRAPHIE DOM ════════════════════════════════════════ */

    /* Lien de domaine : gras + ellipsis */
    body.lk-client-area #tableDomainsList .lk-domain-link {
        display: block !important;
        font-weight: 600 !important;
        font-size: 14px !important;
        overflow: hidden !important;
        text-overflow: ellipsis !important;
        white-space: nowrap !important;
        color: #1a1d2b !important;
        line-height: 1.4 !important;
    }

    /* ══ META MOBILE (badge + date sur même ligne) ═══════════════ */

    body.lk-client-area .lk-mob-meta {
        display: flex !important;
        align-items: center !important;
        justify-content: space-between !important;
        margin-top: 5px !important;
        gap: 6px !important;
        min-width: 0 !important;
    }

    /* Badge dans le meta : reset margin-top */
    body.lk-client-area .lk-mob-meta .lk-dom-warning {
        margin-top: 0 !important;
        flex-shrink: 1 !important;
        min-width: 0 !important;
    }

    /* Date : gris, petit, pas de retour à la ligne */
    body.lk-client-area .lk-mob-date {
        font-size: 11px !important;
        color: #9ba5b5 !important;
        white-space: nowrap !important;
        flex-shrink: 0 !important;
        font-weight: 500 !important;
    }

    /* Si aucun badge (domaine sain) : afficher quand même la date */
    body.lk-client-area .lk-mob-meta:empty {
        display: none !important;
    }
}


/* ============================================================
   v111 — Mobile app-native : Factures + Tickets + Services
   ============================================================ */

@media (max-width: 767px) {

    /* ══════════════════════════════════════════════════════════
       HEADER GÉNÉRIQUE — s'applique à toutes les pages lk-lpanel
       ══════════════════════════════════════════════════════════ */

    /* Container header : colonne */
    body.lk-client-area .lk-lpanel-library-head {
        flex-direction: column !important;
        align-items: stretch !important;
        gap: 0 !important;
        padding: 16px 16px 0 16px !important;
    }

    body.lk-client-area .lk-section-head-left {
        margin-bottom: 10px !important;
    }

    /* Section droite : row avec wrap */
    body.lk-client-area .lk-section-head-right {
        flex-direction: row !important;
        flex-wrap: wrap !important;
        width: 100% !important;
        gap: 8px !important;
        align-items: center !important;
    }

    /* Pills (tous types) : ordre 1, scroll horizontal */
    body.lk-client-area .lk-section-head-right .lk-lpanel-tabs {
        order: 1 !important;
        flex: 0 0 100% !important;
        overflow-x: auto !important;
        flex-wrap: nowrap !important;
        -webkit-overflow-scrolling: touch;
        scrollbar-width: none;
        padding-bottom: 4px !important;
    }
    body.lk-client-area .lk-section-head-right .lk-lpanel-tabs::-webkit-scrollbar { display: none; }

    /* Deuxième rangée de pills (factures : années) */
    body.lk-client-area .lk-section-head-right .lk-lpanel-tabs + .lk-lpanel-tabs {
        order: 2 !important;
        margin-top: -4px !important;
    }

    /* Champ de recherche : flex-grow, ordre 10 */
    body.lk-client-area .lk-section-head-right .lk-section-search {
        order: 10 !important;
        flex: 1 1 auto !important;
        min-width: 0 !important;
    }

    /* Boutons CTA : ordre 11, compact */
    body.lk-client-area .lk-section-head-right .lk-section-cta {
        order: 11 !important;
        flex: 0 0 auto !important;
        white-space: nowrap !important;
        padding: 8px 14px !important;
        font-size: 13px !important;
    }

    /* ══════════════════════════════════════════════════════════
       FACTURES — #tableInvoicesList
       Layout 2 lignes :
       L1 : [☐] [Facture #N]              [Voir][Payer]
       L2 : [Status]  [Total]   [Éch. date]
       ══════════════════════════════════════════════════════════ */

    body.lk-client-area #tableInvoicesList,
    body.lk-client-area #tableInvoicesList tbody {
        display: block !important;
        width: 100% !important;
    }

    body.lk-client-area #tableInvoicesList thead { display: none !important; }

    body.lk-client-area #tableInvoicesList tbody tr {
        display: flex !important;
        flex-wrap: wrap !important;
        align-items: flex-start !important;
        padding: 14px 16px !important;
        border-top: none !important;
        border-bottom: 1px solid #f0f2f7 !important;
    }

    body.lk-client-area #tableInvoicesList tbody tr:last-child { border-bottom: none !important; }

    body.lk-client-area #tableInvoicesList tbody td {
        display: block !important;
        border: none !important;
        padding: 0 !important;
        background: transparent !important;
    }

    /* Saut de ligne entre L1 et L2 */
    body.lk-client-area #tableInvoicesList tbody tr::after {
        content: '';
        display: block;
        flex: 0 0 100%;
        height: 0;
        order: 4;
    }

    /* Col 1 : Checkbox — L1 gauche */
    body.lk-client-area #tableInvoicesList tbody td:nth-child(1) {
        order: 1 !important;
        flex: 0 0 auto !important;
        padding-right: 12px !important;
        padding-top: 3px !important;
        align-self: flex-start !important;
    }

    /* Col 2 : Facture # — L1 milieu, bold, flex-grow */
    body.lk-client-area #tableInvoicesList tbody td:nth-child(2) {
        order: 2 !important;
        flex: 1 1 auto !important;
        min-width: 0 !important;
        font-weight: 700 !important;
        font-size: 14px !important;
        color: #1a1d2b !important;
        align-self: center !important;
    }

    /* Col 3 : Date facturation — masqué */
    body.lk-client-area #tableInvoicesList tbody td:nth-child(3) { display: none !important; }

    /* Col 4 : Date échéance — L2 droite, gris */
    body.lk-client-area #tableInvoicesList tbody td:nth-child(4) {
        order: 7 !important;
        flex: 0 0 auto !important;
        font-size: 11px !important;
        color: #9ba5b5 !important;
        white-space: nowrap !important;
        margin-left: auto !important;
        padding-top: 5px !important;
    }

    /* Col 5 : Total — L2 après status */
    body.lk-client-area #tableInvoicesList tbody td:nth-child(5) {
        order: 6 !important;
        flex: 0 0 auto !important;
        font-weight: 600 !important;
        font-size: 13px !important;
        padding-top: 5px !important;
        padding-right: 10px !important;
        color: #1a1d2b !important;
    }

    /* Col 6 : État — L2 gauche */
    body.lk-client-area #tableInvoicesList tbody td:nth-child(6) {
        order: 5 !important;
        flex: 0 0 auto !important;
        padding-top: 5px !important;
        padding-right: 8px !important;
    }

    /* Col 7 : Actions — L1 droite */
    body.lk-client-area #tableInvoicesList tbody td:nth-child(7) {
        order: 3 !important;
        flex: 0 0 auto !important;
        padding-left: 12px !important;
        align-self: flex-start !important;
    }

    /* Boutons action : compact */
    body.lk-client-area #tableInvoicesList td:nth-child(7) .lk-lpanel-row-btn,
    body.lk-client-area #tableInvoicesList td:nth-child(7) .lk-table-action-pay {
        padding: 6px 12px !important;
        font-size: 12px !important;
        white-space: nowrap !important;
    }

    /* ══════════════════════════════════════════════════════════
       TICKETS — #tableTicketsList
       Layout 2 lignes :
       L1 : [Objet du ticket (tronqué)]    [Voir]
       L2 : [Département] [Status]  [Date]
       ══════════════════════════════════════════════════════════ */

    body.lk-client-area #tableTicketsList,
    body.lk-client-area #tableTicketsList tbody {
        display: block !important;
        width: 100% !important;
    }

    body.lk-client-area #tableTicketsList thead { display: none !important; }

    body.lk-client-area #tableTicketsList tbody tr {
        display: flex !important;
        flex-wrap: wrap !important;
        align-items: flex-start !important;
        padding: 14px 16px !important;
        border-top: none !important;
        border-bottom: 1px solid #f0f2f7 !important;
    }

    body.lk-client-area #tableTicketsList tbody tr:last-child { border-bottom: none !important; }

    body.lk-client-area #tableTicketsList tbody td {
        display: block !important;
        border: none !important;
        padding: 0 !important;
        background: transparent !important;
    }

    /* Saut de ligne entre L1 et L2 */
    body.lk-client-area #tableTicketsList tbody tr::after {
        content: '';
        display: block;
        flex: 0 0 100%;
        height: 0;
        order: 3;
    }

    /* Col 1 : Département — L2 début, gris */
    body.lk-client-area #tableTicketsList tbody td:nth-child(1) {
        order: 4 !important;
        flex: 0 0 auto !important;
        font-size: 11px !important;
        color: #9ba5b5 !important;
        padding-top: 5px !important;
        padding-right: 8px !important;
        font-weight: 500 !important;
    }

    /* Col 2 : Objet — L1 main, bold, tronqué */
    body.lk-client-area #tableTicketsList tbody td:nth-child(2) {
        order: 1 !important;
        flex: 1 1 0 !important;
        min-width: 0 !important;
        font-weight: 600 !important;
        font-size: 14px !important;
        color: #1a1d2b !important;
        overflow: hidden !important;
        text-overflow: ellipsis !important;
        white-space: nowrap !important;
        align-self: center !important;
    }

    body.lk-client-area #tableTicketsList tbody td:nth-child(2) a {
        display: block !important;
        overflow: hidden !important;
        text-overflow: ellipsis !important;
        white-space: nowrap !important;
        color: inherit !important;
        font-weight: inherit !important;
    }

    /* Col 3 : État — L2 milieu */
    body.lk-client-area #tableTicketsList tbody td:nth-child(3) {
        order: 5 !important;
        flex: 0 0 auto !important;
        padding-top: 5px !important;
        padding-right: 8px !important;
    }

    /* Col 4 : Date — L2 droite, gris, margin-left auto */
    body.lk-client-area #tableTicketsList tbody td:nth-child(4) {
        order: 6 !important;
        flex: 0 0 auto !important;
        font-size: 11px !important;
        color: #9ba5b5 !important;
        white-space: nowrap !important;
        padding-top: 5px !important;
        margin-left: auto !important;
    }

    /* Col 5 : Actions — L1 droite, seulement Voir */
    body.lk-client-area #tableTicketsList tbody td:nth-child(5) {
        order: 2 !important;
        flex: 0 0 auto !important;
        padding-left: 12px !important;
        align-self: flex-start !important;
    }

    /* Cacher Répondre et Fermer sur mobile */
    body.lk-client-area #tableTicketsList td:nth-child(5) .lk-table-action-secondary,
    body.lk-client-area #tableTicketsList td:nth-child(5) .lk-table-action-danger {
        display: none !important;
    }

    body.lk-client-area #tableTicketsList td:nth-child(5) .lk-lpanel-row-btn {
        padding: 6px 14px !important;
        font-size: 13px !important;
        white-space: nowrap !important;
        border-radius: 8px !important;
    }

    /* ══════════════════════════════════════════════════════════
       SERVICES — .lk-services-list / .lk-services-section
       Header déjà géré, refinements items
       ══════════════════════════════════════════════════════════ */

    /* Header services : même pattern que les autres pages */
    body.lk-client-area .lk-services-section .lk-lpanel-library-head {
        flex-direction: column !important;
        align-items: stretch !important;
        padding: 16px 16px 0 16px !important;
        gap: 0 !important;
    }

    body.lk-client-area .lk-services-section .lk-section-head-left {
        margin-bottom: 10px !important;
    }

    body.lk-client-area .lk-services-section .lk-section-head-right {
        flex-direction: row !important;
        flex-wrap: wrap !important;
        width: 100% !important;
        gap: 8px !important;
        align-items: center !important;
    }

    body.lk-client-area .lk-services-section .lk-lpanel-tabs {
        order: 1 !important;
        flex: 0 0 100% !important;
        overflow-x: auto !important;
        flex-wrap: nowrap !important;
        -webkit-overflow-scrolling: touch;
        scrollbar-width: none;
        padding-bottom: 4px !important;
    }
    body.lk-client-area .lk-services-section .lk-lpanel-tabs::-webkit-scrollbar { display: none; }

    body.lk-client-area .lk-services-section .lk-section-search {
        order: 10 !important;
        flex: 1 1 auto !important;
        min-width: 0 !important;
    }

    body.lk-client-area .lk-services-section .lk-section-cta {
        order: 11 !important;
        flex: 0 0 auto !important;
        white-space: nowrap !important;
        padding: 8px 14px !important;
        font-size: 13px !important;
    }

    /* Items services : plan cycle "Annuel/Mensuel" → inline avec le prix */
    body.lk-client-area .lk-services-list .lk-list-prix,
    body.lk-client-area .lk-services-list .lk-list-plan {
        display: flex !important;
        align-items: baseline !important;
        gap: 4px !important;
    }

    /* Réduire le plan label sur mobile */
    body.lk-client-area .lk-services-list .lk-list-plan {
        font-size: 11px !important;
        color: #9ba5b5 !important;
    }

    /* Boutons d'action services : flex-wrap pour ne pas déborder */
    body.lk-client-area .lk-services-list .lk-list-action {
        display: flex !important;
        flex-wrap: wrap !important;
        gap: 6px !important;
    }
}


/* ── Toggle marketing opt-in (pill OUI / NON) ───────────────── */
.lk-pill-toggle { display: inline-flex; cursor: pointer; user-select: none; width: fit-content; }
.lk-pill-toggle-cb { display: none; }
.lk-pill-on, .lk-pill-off {
    padding: 5px 16px; font-size: 13px; font-weight: 600;
    transition: background .15s, color .15s, border-color .15s;
}
.lk-pill-on {
    background: #f3f4f6; color: #9ca3af;
    border: 1px solid #d1d5db; border-right: none;
    border-radius: 6px 0 0 6px;
}
.lk-pill-off {
    background: #6656ff; color: #fff;
    border: 1px solid #6656ff;
    border-radius: 0 6px 6px 0;
    margin-left: -1px;
}
.lk-pill-toggle-cb:checked ~ .lk-pill-on  { background: #6656ff; color: #fff; border-color: #6656ff; }
.lk-pill-toggle-cb:checked ~ .lk-pill-off { background: #f3f4f6; color: #9ca3af; border-color: #d1d5db; border-left: none; }

/* ============================================================
   v112 — SSL badge inline dans la colonne domaine
   ============================================================ */

/* Masquer la colonne SSL dans l'entête ET dans les lignes */
body.lk-client-area #tableDomainsList thead th:nth-child(2),
body.lk-client-area #tableDomainsList tbody td.ssl-info {
    display: none !important;
}