@charset "UTF-8";
/*!
 * Twenty-One — Skin "Level7"
 * Camada puramente visual sobre o tema oficial Twenty-One do WHMCS.
 * Carregada depois de theme.min.css (ver includes/head.tpl), portanto
 * sobrescreve o tema sem que nenhum arquivo original de CSS seja alterado.
 *
 * Nenhuma regra aqui altera comportamento, rotas ou JavaScript.
 */

/* =========================================================================
   1. Tokens
   ========================================================================= */
:root {
    /* Marca */
    --l7-primary: #17a1dc;
    --l7-primary-600: #1290c7;
    --l7-primary-700: #0d7aab;
    --l7-primary-050: #eaf6fd;
    --l7-primary-100: #d4edfa;

    /* Superfícies */
    --l7-bg: #f4f7fb;
    --l7-surface: #ffffff;
    --l7-surface-alt: #fbfcfe;

    /* Texto */
    --l7-heading: #16212e;
    --l7-text: #2c3a49;
    --l7-muted: #6c7c8c;
    --l7-faint: #93a1b0;

    /* Traços */
    --l7-border: #e6ecf2;
    --l7-border-strong: #d6dfe8;

    /* Semânticas */
    --l7-success: #17a673;
    --l7-success-bg: #e6f7f0;
    --l7-warning: #e08c1a;
    --l7-warning-bg: #fdf3e3;
    --l7-danger: #dc4a48;
    --l7-danger-bg: #fdeceb;
    --l7-info: var(--l7-primary);
    --l7-info-bg: var(--l7-primary-050);
    --l7-purple: #7b61d9;
    --l7-purple-bg: #f0edfc;

    /* Forma */
    --l7-radius: 0;         /* painel: canto reto */
    --l7-radius-sm: 3px;    /* botão e campo: canto quase reto */
    --l7-radius-pill: 999px;

    /* Elevação */
    --l7-shadow: 0 1px 2px rgba(16, 32, 52, .04), 0 2px 8px rgba(16, 32, 52, .05);
    --l7-shadow-md: 0 8px 28px rgba(16, 32, 52, .10);
    --l7-shadow-blue: 0 10px 30px rgba(13, 122, 171, .22);

    /* Banner da área do cliente */
    --l7-hero: linear-gradient(135deg, #1aaae6 0%, #17a1dc 45%, #0d7aab 100%);

    /* Menu lateral escuro */
    --l7-nav-bg: #0a2543;
    --l7-nav-bg-2: #0f3a66;
    --l7-nav-text: #c3d5e8;
    --l7-nav-muted: #7e9cbd;
    --l7-nav-active: #1273c9;
    --l7-nav-line: rgba(255, 255, 255, .1);

    /* Métricas do shell */
    --l7-sidenav-w: 300px;
    --l7-topbar-h: 76px;
}

/* =========================================================================
   2. Base
   ========================================================================= */
body,
body.primary-bg-color {
    background-color: var(--l7-bg);
    color: var(--l7-text);
    font-family: "Inter", "Open Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Arial, sans-serif;
    font-size: 14px;
    line-height: 1.55;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

h1, h2, h3, h4, h5, h6,
.h1, .h2, .h3, .h4, .h5, .h6 {
    color: var(--l7-heading);
    font-weight: 600;
    letter-spacing: -.01em;
}

h1, .h1 { font-size: 1.75rem; }
h2, .h2 { font-size: 1.4rem; }
h3, .h3 { font-size: 1.15rem; }
h4, .h4 { font-size: 1rem; }

a {
    color: var(--l7-primary);
    transition: color .15s ease;
}

a:hover,
a:focus {
    color: var(--l7-primary-700);
    text-decoration: none;
}

hr { border-top-color: var(--l7-border); }

.text-muted { color: var(--l7-muted) !important; }
.text-primary { color: var(--l7-primary) !important; }
.text-success { color: var(--l7-success) !important; }
.text-danger  { color: var(--l7-danger) !important; }
.text-warning { color: var(--l7-warning) !important; }
.text-info    { color: var(--l7-primary) !important; }

.bg-primary { background-color: var(--l7-primary) !important; }
.bg-info    { background-color: var(--l7-primary) !important; }
.bg-success { background-color: var(--l7-success) !important; }
.bg-warning { background-color: var(--l7-warning) !important; }
.bg-danger  { background-color: var(--l7-danger) !important; }

::selection { background: var(--l7-primary-100); }

:focus-visible {
    outline: 2px solid var(--l7-primary);
    outline-offset: 2px;
}

/* =========================================================================
   3. Shell da aplicação
   ========================================================================= */
.l7-app { position: relative; }

.l7-main {
    display: flex;
    flex-direction: column;
    min-height: 100vh;
}

.l7-has-sidenav .l7-main { margin-left: var(--l7-sidenav-w); }

/* Checkbox que controla o menu off-canvas no mobile (sem JS) */
.l7-nav-check {
    position: absolute;
    width: 1px;
    height: 1px;
    opacity: 0;
    pointer-events: none;
}

/* ---- 3.1 Menu lateral ---- */
.l7-sidenav {
    position: fixed;
    top: 0;
    left: 0;
    bottom: 0;
    z-index: 1045;
    display: flex;
    flex-direction: column;
    width: var(--l7-sidenav-w);
    overflow: hidden;
    background: linear-gradient(175deg, var(--l7-nav-bg) 0%, var(--l7-nav-bg-2) 100%);
    transition: transform .25s ease;
}

/* Curva decorativa no pé da lateral */
.l7-sidenav::after {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    height: 380px;
    background: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 300 380' preserveAspectRatio='none'%3E%3Cpath fill='%23ffffff' fill-opacity='0.05' d='M0 150 C 70 70 160 210 300 120 L300 380 L0 380 Z'/%3E%3Cpath fill='%23ffffff' fill-opacity='0.04' d='M0 230 C 90 170 170 280 300 210 L300 380 L0 380 Z'/%3E%3C/svg%3E") no-repeat bottom center;
    background-size: 100% auto;
    pointer-events: none;
}

.l7-sidenav-brand,
.l7-sidenav-scroll,
.l7-sidenav-foot { position: relative; z-index: 1; }

.l7-sidenav-brand {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 8px;
    flex: 0 0 auto;
    padding: 24px 22px 20px;
}

.l7-sidenav-brand > a { display: block; min-width: 0; }

.l7-brand-img {
    display: block;
    width: auto;
    height: auto;
    max-width: 180px;
    max-height: 36px;
}

.l7-brand-sub {
    display: block;
    margin-top: 5px;
    color: var(--l7-nav-muted);
    font-size: .73rem;
    font-style: normal;
}

.l7-sidenav-dismiss {
    display: none;
    padding: 4px 8px;
    margin: 0;
    color: var(--l7-nav-muted);
    background: none;
    border: 0;
    border-radius: 8px;
    cursor: pointer;
}

.l7-sidenav-dismiss:hover { background-color: rgba(255, 255, 255, .09); color: #fff; }

.l7-sidenav-scroll {
    flex: 1 1 auto;
    padding: 2px 14px 10px;
    overflow-y: auto;
    overscroll-behavior: contain;
}

.l7-sidenav-scroll::-webkit-scrollbar { width: 6px; }
.l7-sidenav-scroll::-webkit-scrollbar-track { background: transparent; }
.l7-sidenav-scroll::-webkit-scrollbar-thumb { background-color: rgba(255, 255, 255, .14); border-radius: 3px; }

.l7-sidenav-foot { flex: 0 0 auto; padding: 10px 14px 16px; }

/* Item de menu: pílula arredondada */
.l7-nav-group { margin-bottom: 3px; }

.l7-nav-link {
    position: relative;
    display: flex;
    align-items: center;
    gap: 13px;
    padding: 12px 14px;
    margin-bottom: 3px;
    border-radius: 12px;
    color: var(--l7-nav-text);
    font-size: .9rem;
    font-weight: 500;
    transition: background-color .14s ease, color .14s ease;
}

.l7-nav-link:hover,
.l7-nav-link:focus {
    background-color: rgba(255, 255, 255, .07);
    color: #fff;
}

.l7-nav-link.active,
.l7-nav-link.active:hover {
    background-color: var(--l7-nav-active);
    color: #fff;
    font-weight: 600;
    box-shadow: 0 8px 18px rgba(18, 115, 201, .32);
}

.l7-nav-ico {
    flex: 0 0 20px;
    width: 20px;
    font-size: 1rem;
    line-height: 1;
    text-align: center;
    color: var(--l7-nav-muted);
    transition: color .14s ease;
}

.l7-nav-link:hover .l7-nav-ico,
.l7-nav-link.active .l7-nav-ico { color: #fff; }

.l7-nav-label {
    flex: 1 1 auto;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.l7-nav-caret {
    flex: 0 0 auto;
    font-size: .68rem;
    color: var(--l7-nav-muted);
    transition: transform .2s ease;
}

.l7-nav-link[aria-expanded="true"] .l7-nav-caret { transform: rotate(180deg); }

.l7-nav-link .badge {
    flex: 0 0 auto;
    padding: .25em .55em;
    background-color: rgba(255, 255, 255, .16);
    color: #fff;
    font-size: .68rem;
    font-weight: 700;
    border-radius: var(--l7-radius-pill);
}

.l7-nav-link.active .badge { background-color: rgba(255, 255, 255, .26); }

/* Rótulo de seção ("Sua conta") */
.l7-nav-sec {
    margin: 20px 14px 11px;
    padding-top: 19px;
    border-top: 1px solid var(--l7-nav-line);
    color: var(--l7-nav-muted);
    font-size: .68rem;
    font-weight: 700;
    letter-spacing: .12em;
    text-transform: uppercase;
}

/* Submenu */
.l7-nav-sub { padding: 2px 0 6px; background-color: transparent; }

.l7-nav-subdivider { height: 1px; margin: 5px 14px 5px 47px; background-color: var(--l7-nav-line); }

.l7-nav-sublink {
    position: relative;
    display: block;
    padding: 8px 14px 8px 47px;
    border-radius: 10px;
    color: var(--l7-nav-muted);
    font-size: .83rem;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.l7-nav-sublink::before {
    content: "";
    position: absolute;
    left: 26px;
    top: 50%;
    width: 6px;
    height: 1px;
    background-color: rgba(255, 255, 255, .28);
}

.l7-nav-sublink:hover,
.l7-nav-sublink:focus { background-color: rgba(255, 255, 255, .06); color: #fff; }

.l7-nav-sublink.active {
    background-color: rgba(255, 255, 255, .1);
    color: #fff;
    font-weight: 600;
}

.l7-nav-sublink.active::before { background-color: var(--l7-primary); }

.l7-nav-sublink .badge {
    float: right;
    background-color: rgba(255, 255, 255, .16);
    color: #fff;
    font-weight: 600;
}

/* Cartão de ajuda */
.l7-sidenav-help {
    position: relative;
    padding: 14px 16px 15px 58px;
    margin-bottom: 8px;
    background-color: rgba(255, 255, 255, .06);
    border: 1px solid var(--l7-nav-line);
    border-radius: 13px;
}

/* O ícone sai do fluxo e o texto corre ao lado: o cartão fica baixo em
   vez de empilhar ícone, título, texto e botão um embaixo do outro. */
.l7-help-ico {
    position: absolute;
    left: 15px;
    top: 14px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    background-color: rgba(23, 161, 220, .18);
    border-radius: 10px;
    color: #4fb9ea;
    font-size: .85rem;
}

.l7-sidenav-help strong {
    display: block;
    margin-bottom: 2px;
    color: #fff;
    font-size: .85rem;
    font-weight: 700;
}

.l7-sidenav-help p {
    margin: 0 0 11px;
    color: var(--l7-nav-muted);
    font-size: .74rem;
    line-height: 1.4;
}

.l7-help-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 7px;
    margin-left: -42px;
    padding: .5rem 1rem;
    background-color: var(--l7-nav-active);
    border-radius: 9px;
    color: #fff;
    font-size: .78rem;
    font-weight: 700;
}

.l7-help-btn:hover { background-color: #1585e0; color: #fff; }
.l7-help-btn i { font-size: .68rem; }

/* Sair */
.l7-nav-logout {
    display: flex;
    align-items: center;
    gap: 13px;
    padding: 12px 14px;
    border-radius: 12px;
    color: var(--l7-nav-muted);
    font-size: .9rem;
    font-weight: 500;
}

.l7-nav-logout:hover { background-color: rgba(255, 255, 255, .07); color: #fff; }
.l7-nav-logout:hover .l7-nav-ico { color: #fff; }

/* Fundo escuro do off-canvas */
.l7-sidenav-backdrop {
    position: fixed;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    z-index: 1040;
    margin: 0;
    background-color: rgba(10, 37, 67, .5);
    opacity: 0;
    visibility: hidden;
    transition: opacity .25s ease, visibility .25s ease;
}

/* ---- 3.2 Barra superior ---- */
header.header.l7-topbar,
.l7-topbar {
    position: sticky;
    top: 0;
    z-index: 1030;
    flex: 0 0 auto;
    background-color: var(--l7-surface);
    border-bottom: 1px solid var(--l7-border);
}

.l7-topbar-inner {
    display: flex;
    align-items: center;
    gap: 14px;
    min-height: var(--l7-topbar-h);
    padding: 12px 30px;
}

.l7-burger {
    display: none;
    align-items: center;
    justify-content: center;
    width: 42px;
    height: 42px;
    margin: 0;
    color: var(--l7-muted);
    background-color: transparent;
    border: 1px solid var(--l7-border);
    border-radius: var(--l7-radius-sm);
    cursor: pointer;
}

.l7-burger:hover { background-color: var(--l7-bg); color: var(--l7-heading); }

.l7-topbar-brand {
    display: flex;
    align-items: center;
    margin: 0 8px 0 0;
}

.l7-topbar-brand .logo-img { max-height: 34px; max-width: 200px; width: auto; }

/* Busca: pílula com o ícone dentro */
.l7-search {
    position: relative;
    flex: 1 1 auto;
    max-width: 520px;
    margin: 0;
}

.l7-search > i {
    position: absolute;
    left: 18px;
    top: 50%;
    transform: translateY(-50%);
    color: var(--l7-faint);
    font-size: .88rem;
    pointer-events: none;
}

.l7-search .form-control {
    width: 100%;
    height: 46px;
    min-height: 46px;
    padding: 0 18px 0 44px;
    background-color: var(--l7-bg);
    border: 1px solid transparent;
    border-radius: var(--l7-radius-pill);
    color: var(--l7-text);
    font-size: .875rem;
    box-shadow: none;
}

.l7-search .form-control:focus {
    background-color: var(--l7-surface);
    border-color: var(--l7-primary);
    box-shadow: 0 0 0 3px var(--l7-primary-100);
}

.l7-search .form-control::placeholder { color: var(--l7-faint); }

.l7-topbar-actions {
    display: flex;
    align-items: center;
    gap: 6px;
    margin-left: auto;
}

.l7-topbar-sep {
    width: 1px;
    height: 28px;
    margin: 0 8px;
    background-color: var(--l7-border);
}

/* Botões ícone da barra superior */
.l7-topbar .l7-icon-btn,
.l7-icon-btn {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 42px;
    height: 42px;
    padding: 0;
    color: var(--l7-muted);
    font-size: 1.05rem;
    line-height: 1;
    font-family: inherit;
    background-color: transparent;
    border: 0;
    border-radius: 50%;
    cursor: pointer;
    transition: background-color .15s ease, color .15s ease;
}

.l7-icon-btn:hover,
.l7-icon-btn:focus {
    background-color: var(--l7-bg);
    color: var(--l7-heading);
    box-shadow: none;
}

.l7-icon-btn .badge {
    position: absolute;
    top: 3px;
    right: 1px;
    min-width: 18px;
    padding: 2px 4px;
    background-color: var(--l7-danger);
    color: #fff;
    font-size: .625rem;
    font-weight: 700;
    line-height: 1.1;
    border: 2px solid var(--l7-surface);
    border-radius: 999px;
}

.l7-icon-btn .badge:empty,
.l7-icon-btn .badge.l7-badge-zero { display: none; }

.btn-return-to-admin { color: var(--l7-warning); font-size: .85rem; }

/* Menu do usuário: avatar + nome + "cliente desde" */
.l7-usermenu { margin: 0; padding: 0; list-style: none; flex-direction: row; }
.l7-usermenu-item { position: relative; }

.l7-topbar .l7-user-toggle {
    display: flex;
    align-items: center;
    gap: 11px;
    padding: 5px 12px 5px 5px;
    border-radius: var(--l7-radius-pill);
    color: var(--l7-heading);
    white-space: nowrap;
}

.l7-topbar .l7-user-toggle:hover,
.l7-usermenu-item.show .l7-user-toggle { background-color: var(--l7-bg); }
.l7-topbar .l7-user-toggle::after { display: none; }

.l7-user-av {
    flex: 0 0 42px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 42px;
    height: 42px;
    background-color: var(--l7-primary-050);
    border-radius: 50%;
    color: var(--l7-primary-700);
    font-size: .85rem;
    font-weight: 800;
}

.l7-user-txt {
    display: flex;
    flex-direction: column;
    min-width: 0;
    line-height: 1.3;
}

.l7-user-txt b {
    color: var(--l7-heading);
    font-size: .87rem;
    font-weight: 700;
    overflow: hidden;
    text-overflow: ellipsis;
}

.l7-user-txt em {
    color: var(--l7-muted);
    font-size: .74rem;
    font-style: normal;
    overflow: hidden;
    text-overflow: ellipsis;
}

.l7-user-caret { margin-left: 2px; color: var(--l7-faint); font-size: .7rem; }

.l7-topbar .l7-usermenu-toggle {
    display: flex;
    align-items: center;
    gap: 9px;
    padding: 6px 10px;
    color: var(--l7-text);
    font-size: .875rem;
    font-weight: 600;
    border-radius: var(--l7-radius-pill);
    white-space: nowrap;
}

.l7-topbar .l7-usermenu-toggle:hover { background-color: var(--l7-bg); }

.l7-usermenu .dropdown-toggle::after { color: var(--l7-faint); }


/* Com data-display="static" o Bootstrap não usa o Popper: o menu fica
   ancorado no item e abre sempre logo abaixo, alinhado pela direita. */
.l7-topbar .l7-usermenu-menu {
    position: absolute;
    top: 100%;
    right: 0;
    left: auto;
    float: none;
    width: 264px;
    max-width: calc(100vw - 32px);
    margin: 10px 0 0;
    padding: 0;
    overflow: hidden;
}

.l7-usermenu-head {
    display: flex;
    flex-direction: column;
    padding: 14px 16px;
    background-color: var(--l7-surface-alt);
    border-bottom: 1px solid var(--l7-border);
}

.l7-usermenu-head strong {
    color: var(--l7-heading);
    font-size: .875rem;
    font-weight: 600;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.l7-usermenu-head small {
    margin-top: 1px;
    color: var(--l7-muted);
    font-size: .76rem;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.l7-usermenu-credit {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 10px;
    margin-top: 10px;
    padding-top: 10px;
    border-top: 1px solid var(--l7-border);
}

.l7-usermenu-credit > span {
    color: var(--l7-muted);
    font-size: .7rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: .05em;
}

.l7-usermenu-credit > b { color: var(--l7-primary); font-size: .9rem; font-weight: 700; }

.l7-usermenu-list { padding: 6px; }

.l7-usermenu-list .dropdown-item {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 8px 10px !important;
    border-radius: var(--l7-radius-sm);
}

.l7-usermenu-list .dropdown-item > i { flex: 0 0 16px; text-align: center; }
.l7-usermenu-list .dropdown-item > span { flex: 1 1 auto; min-width: 0; }

/* Notificações */
.popover-user-notifications {
    border: 1px solid var(--l7-border);
    border-radius: var(--l7-radius);
    box-shadow: var(--l7-shadow-md);
    max-width: 340px;
}

.popover-user-notifications .popover-body { padding: 6px; }

ul.client-alerts {
    margin: 0;
    padding: 0;
    list-style: none;
    font-size: .85rem;
}

ul.client-alerts li a {
    display: flex;
    gap: 10px;
    padding: 10px 12px;
    color: var(--l7-text);
    border-radius: var(--l7-radius-sm);
}

ul.client-alerts li a:hover { background-color: var(--l7-bg); }
ul.client-alerts li a i { color: var(--l7-primary); margin-top: 3px; }
ul.client-alerts li.none { padding: 14px 12px; color: var(--l7-muted); text-align: center; }

/* ---- 3.3 Navegação horizontal (visitante) ---- */
.l7-guestnav {
    padding: 0;
    background-color: var(--l7-surface);
    border-top: 1px solid var(--l7-border);
}

.l7-guestnav .navbar-collapse { padding: 0 28px; }

.l7-guestnav .navbar-nav > li > a {
    display: block;
    padding: 12px 0;
    margin-right: 22px;
    color: var(--l7-text);
    font-size: .9rem;
    font-weight: 500;
    border-bottom: 2px solid transparent;
}

.l7-guestnav .navbar-nav > li > a:hover {
    color: var(--l7-primary);
    border-bottom-color: var(--l7-primary);
}

.l7-guestnav .navbar-nav.ml-auto > li > a { margin-right: 0; margin-left: 22px; }

/* ---- 3.4 Corpo ---- */
.l7-main section#main-body {
    flex: 1 1 auto;
    padding: 26px 0 40px;
}


.l7-main section#main-body > .container,
.l7-page-head > .container,
.l7-main .master-breadcrumb > .container {
    max-width: 1320px;
    padding-left: 28px;
    padding-right: 28px;
}

.primary-content > .card:first-child,
.primary-content > .row:first-child { margin-top: 0; }

/* Migalhas */
.master-breadcrumb {
    background-color: transparent;
    border: 0;
}

.master-breadcrumb .breadcrumb {
    padding: 18px 0 0;
    background: none;
    font-size: .8rem;
}

.master-breadcrumb .breadcrumb-item,
.master-breadcrumb .breadcrumb-item.active { color: var(--l7-muted); }

.master-breadcrumb .breadcrumb-item + .breadcrumb-item::before { color: var(--l7-faint); }

.master-breadcrumb .breadcrumb-item a { color: var(--l7-muted); }
.master-breadcrumb .breadcrumb-item a:hover { color: var(--l7-primary); }

/* Título da página */
.l7-page-head { padding: 10px 0 0; }

.l7-page-title {
    margin: 0;
    color: var(--l7-heading);
    font-size: 1.6rem;
    font-weight: 700;
    letter-spacing: -.02em;
}

.l7-page-head ~ section#main-body { padding-top: 18px; }

/* ---- 3.5 Rodapé ---- */
footer.footer {
    flex: 0 0 auto;
    padding: 22px 0;
    margin: 0;
    background-color: var(--l7-surface);
    border-top: 1px solid var(--l7-border);
    color: var(--l7-muted);
    font-size: .8rem;
}

footer.footer > .container {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 10px 20px;
    max-width: 1320px;
    padding-left: 28px;
    padding-right: 28px;
}

footer.footer .nav { margin: 0 !important; }
footer.footer .list-inline { margin: 0 !important; }

footer.footer .nav-link {
    padding: 0 14px 0 0;
    color: var(--l7-muted);
    font-size: .8rem;
}

footer.footer .nav-link:hover { color: var(--l7-primary); }

footer.footer .btn {
    padding: 5px 12px;
    color: var(--l7-text);
    background-color: var(--l7-bg);
    border: 1px solid var(--l7-border);
    border-radius: var(--l7-radius-pill);
    font-size: .78rem;
    line-height: 1.3;
}

footer.footer .btn:hover { border-color: var(--l7-border-strong); }

footer.footer .copyright,
footer.footer .notices {
    margin: 0;
    font-size: .8rem;
    text-align: left;
}

footer.footer .l7-footer-left { margin-right: auto; }
footer.footer .l7-footer-right { margin-left: auto; display: flex; align-items: center; gap: 16px; }

/* =========================================================================
   4. Botões
   ========================================================================= */
.btn {
    font-size: .875rem;
    font-weight: 600;
    padding: .5rem 1.05rem;
    border-radius: var(--l7-radius-sm);
    transition: background-color .15s ease, border-color .15s ease, color .15s ease;
}

.btn:focus,
.btn.focus { box-shadow: 0 0 0 3px var(--l7-primary-100); }

.btn-lg, .btn-group-lg > .btn { padding: .7rem 1.5rem; font-size: .95rem; border-radius: var(--l7-radius-sm); }
.btn-sm, .btn-group-sm > .btn { padding: .35rem .75rem; font-size: .8rem; border-radius: 6px; }
.btn-xs { padding: .2rem .55rem; font-size: .72rem; border-radius: 5px; }

.btn-primary {
    background-color: var(--l7-primary);
    border-color: var(--l7-primary);
    color: #fff;
}

.btn-primary:hover,
.btn-primary:focus,
.btn-primary:active,
.btn-primary:not(:disabled):not(.disabled):active,
.btn-primary:not(:disabled):not(.disabled).active,
.show > .btn-primary.dropdown-toggle {
    background-color: var(--l7-primary-600);
    border-color: var(--l7-primary-600);
    color: #fff;
}

.btn-outline-primary {
    color: var(--l7-primary);
    border-color: var(--l7-primary);
    background-color: transparent;
}

.btn-outline-primary:hover,
.btn-outline-primary:active,
.btn-outline-primary:not(:disabled):not(.disabled):active {
    background-color: var(--l7-primary);
    border-color: var(--l7-primary);
    color: #fff;
}

.btn-default,
.btn-secondary {
    background-color: var(--l7-surface);
    border-color: var(--l7-border-strong);
    color: var(--l7-text);
}

.btn-default:hover,
.btn-secondary:hover,
.btn-default:focus,
.btn-secondary:focus {
    background-color: var(--l7-bg);
    border-color: var(--l7-border-strong);
    color: var(--l7-heading);
}

.btn-success { background-color: var(--l7-success); border-color: var(--l7-success); }
.btn-success:hover, .btn-success:focus { background-color: #13905f; border-color: #13905f; }

.btn-danger { background-color: var(--l7-danger); border-color: var(--l7-danger); }
.btn-danger:hover, .btn-danger:focus { background-color: #c73e3c; border-color: #c73e3c; }

.btn-warning { background-color: var(--l7-warning); border-color: var(--l7-warning); color: #fff; }
.btn-warning:hover, .btn-warning:focus { background-color: #c67a12; border-color: #c67a12; color: #fff; }

.btn-info { background-color: var(--l7-primary); border-color: var(--l7-primary); color: #fff; }
.btn-info:hover, .btn-info:focus { background-color: var(--l7-primary-600); border-color: var(--l7-primary-600); color: #fff; }

.btn-link { color: var(--l7-primary); font-weight: 600; }
.btn-link:hover { color: var(--l7-primary-700); }

.btn-block + .btn-block { margin-top: 8px; }

/* =========================================================================
   5. Formulários
   ========================================================================= */
label,
.form-control-label,
.control-label {
    color: var(--l7-heading);
    font-size: .82rem;
    font-weight: 600;
    margin-bottom: 6px;
}

.form-control,
.field,
select.form-control,
textarea.form-control {
    height: auto;
    min-height: 42px;
    padding: .55rem .85rem;
    color: var(--l7-text);
    font-size: .875rem;
    background-color: var(--l7-surface);
    border: 1px solid var(--l7-border-strong);
    border-radius: var(--l7-radius-sm);
    box-shadow: none;
    transition: border-color .15s ease, box-shadow .15s ease;
}

textarea.form-control { min-height: 96px; }

.form-control:focus,
.field:focus {
    background-color: var(--l7-surface);
    border-color: var(--l7-primary);
    box-shadow: 0 0 0 3px var(--l7-primary-100);
    outline: 0;
}

.form-control::placeholder { color: var(--l7-faint); }

.form-control:disabled,
.form-control[readonly] {
    background-color: var(--l7-bg);
    color: var(--l7-muted);
}

.form-control-sm { min-height: 34px; padding: .3rem .65rem; font-size: .8rem; }

.form-text,
.field-help-text,
.help-block {
    color: var(--l7-muted);
    font-size: .78rem;
}

/* Grupos com ícone */
.input-group-text {
    color: var(--l7-faint);
    background-color: var(--l7-bg);
    border-color: var(--l7-border-strong);
    border-radius: var(--l7-radius-sm);
}

/* A borda e o foco ficam no grupo inteiro. Sem isso apareciam duas
   molduras azuis desencontradas: uma no grupo e outra no input. */
.input-group-merge {
    background-color: var(--l7-surface);
    border: 1px solid var(--l7-border-strong);
    border-radius: var(--l7-radius-sm);
    overflow: hidden;
    transition: border-color .15s ease, box-shadow .15s ease;
}

.input-group-merge:focus-within {
    border-color: var(--l7-primary);
    box-shadow: 0 0 0 3px var(--l7-primary-100);
}

.input-group-merge > .form-control,
.input-group-merge > .input-group-prepend > .input-group-text,
.input-group-merge > .input-group-append > .btn,
.input-group-merge > .input-group-append > .input-group-text {
    background-color: transparent;
    border: 0 !important;
    border-radius: 0 !important;
    box-shadow: none !important;
    outline: 0 !important;
}

.input-group-merge > .form-control { padding-left: 0; }
.input-group-merge > .form-control:focus { background-color: transparent; }

.input-group-merge > .input-group-prepend > .input-group-text { padding-right: .55rem; }
.input-group-merge:focus-within > .input-group-prepend > .input-group-text { color: var(--l7-primary); }

.input-group-merge > .input-group-append > .btn { color: var(--l7-faint); }
.input-group-merge > .input-group-append > .btn:hover { color: var(--l7-muted); }

.input-group > .input-group-prepend > .btn,
.input-group > .input-group-append > .btn {
    border-color: var(--l7-border-strong);
}

/* Campos do cadastro (prepend-icon) */
.form-group.prepend-icon { position: relative; }

.form-group.prepend-icon .field-icon {
    position: absolute;
    top: 0;
    left: 0;
    z-index: 3;
    width: 42px;
    height: 42px;
    margin: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--l7-faint);
    font-size: .9rem;
    pointer-events: none;
}

.form-group.prepend-icon .field,
.form-group.prepend-icon .form-control { padding-left: 42px; }

.form-group.prepend-icon:focus-within .field-icon { color: var(--l7-primary); }

/* Checkbox / radio */
.form-check-input { margin-top: .25rem; }

.custom-control-input:checked ~ .custom-control-label::before {
    background-color: var(--l7-primary);
    border-color: var(--l7-primary);
}

.custom-control-input:focus ~ .custom-control-label::before {
    box-shadow: 0 0 0 3px var(--l7-primary-100);
}

/* Medidor de força de senha */
.password-strength-meter .progress {
    height: 6px;
    background-color: var(--l7-bg);
    border-radius: var(--l7-radius-pill);
}

.progress { background-color: var(--l7-bg); border-radius: var(--l7-radius-pill); }
.progress-bar { background-color: var(--l7-primary); }

/* =========================================================================
   6. Cartões e painéis
   ========================================================================= */
.card {
    background-color: var(--l7-surface);
    border: 1px solid var(--l7-border);
    border-radius: var(--l7-radius);
    box-shadow: var(--l7-shadow);
}

.primary-content .card { margin-bottom: 20px; }

.card-header {
    padding: 13px 16px;
    background-color: var(--l7-surface-alt);
    border-bottom: 1px solid var(--l7-border);
    border-radius: var(--l7-radius) var(--l7-radius) 0 0;
}

.card-header:first-child { border-radius: var(--l7-radius) var(--l7-radius) 0 0; }

.card-title,
.primary-content .card-title {
    margin: 0 0 14px;
    color: var(--l7-heading);
    font-size: 1rem;
    font-weight: 600;
}

/* Dentro do cabeçalho o título é a própria faixa, não precisa de margem */
.card-header .card-title,
.primary-content .card-header .card-title { margin: 0; }

/* panel.tpl usa .card-title como faixa colorida no topo do cartão */
.card > .card-title:first-child {
    margin: 0;
    border-radius: var(--l7-radius) var(--l7-radius) 0 0;
}

.card-body,
.primary-content .card-body { padding: 20px; }

.card-footer {
    padding: 14px 20px;
    background-color: var(--l7-surface-alt);
    border-top: 1px solid var(--l7-border);
    border-radius: 0 0 var(--l7-radius) var(--l7-radius);
    color: var(--l7-muted);
    font-size: .82rem;
}

/* Faixas de destaque do WHMCS, reconciliadas com a nova paleta.
   Precisam vir depois de .card porque a regra genérica de borda acima
   tem a mesma especificidade e sobrescreveria o border-top do tema. */
.card-accent-blue,
.card-accent-turquoise,
.card-accent-teal,
.card-accent-midnight-blue,
.card-accent-wet-asphalt,
.card-accent-brand-xovinow-blue { border-top: 2px solid var(--l7-primary); }

.card-accent-green,
.card-accent-lime,
.card-accent-emerald { border-top: 2px solid var(--l7-success); }

.card-accent-red,
.card-accent-pomegranate,
.card-accent-magenta,
.card-accent-pink { border-top: 2px solid var(--l7-danger); }

.card-accent-gold,
.card-accent-orange,
.card-accent-sun-flower,
.card-accent-brand-cpanel-orange { border-top: 2px solid var(--l7-warning); }

.card-accent-purple,
.card-accent-amethyst { border-top: 2px solid var(--l7-purple); }

.card-accent-silver,
.card-accent-asbestos { border-top: 2px solid var(--l7-border-strong); }

/* Pequenos botões coloridos nos cabeçalhos dos painéis da home */
.client-home-cards .card-header .btn[class*="bg-color-"] {
    padding: .25rem .65rem;
    background-color: var(--l7-primary-050);
    color: var(--l7-primary-700);
    border: 0;
    border-radius: 6px;
    font-size: .72rem;
    font-weight: 600;
}

.client-home-cards .card-header .btn[class*="bg-color-"]:hover {
    background-color: var(--l7-primary-100);
    color: var(--l7-primary-700);
}

/* Painéis da home do cliente */
.client-home-cards .card { font-size: .85rem; margin-bottom: 18px; }

.client-home-cards .card-header {
    padding: 0 16px;
    min-height: 44px;
    display: flex;
    align-items: center;
    background-color: var(--l7-surface-alt);
    border-bottom: 1px solid var(--l7-border);
}

.client-home-cards .card-header .card-title {
    width: 100%;
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: .8rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .05em;
    color: var(--l7-heading);
}

/* O texto do título é um nó de texto solto (order 0 e imutável): o ícone vai
   para -1 para ficar antes dele e o botão para 1, empurrado pelo margin-left. */
.client-home-cards .card-header .card-title > i { order: -1; color: var(--l7-primary); font-size: .9rem; }

.client-home-cards .card-header .card-title > .float-right {
    order: 1;
    flex: 0 0 auto;
    margin-left: auto;
    padding-left: 10px;
    float: none !important;
    text-transform: none;
    letter-spacing: 0;
    white-space: nowrap;
}

.client-home-cards .card-body { padding: 0; }
.client-home-cards .card-body p { padding: 16px; margin: 0; color: var(--l7-muted); }

.client-home-cards .list-group {
    max-height: 240px;
    border-top: 0 !important;
    border-bottom: 0 !important;
}

.client-home-cards .list-group .list-group-item {
    padding: 10px 16px;
    border-bottom: 1px solid var(--l7-border);
}

.client-home-cards .list-group .list-group-item:hover { background-color: var(--l7-surface-alt); }

.client-home-cards .card-footer { padding: 10px 16px; border-top: 1px solid var(--l7-border); }
.client-home-cards .card-footer:empty { display: none; }
.client-home-cards small { color: var(--l7-muted); }

/* =========================================================================
   7. Área do cliente (clientareahome.tpl)

   Cartão com estrutura por dentro: cabeçalho com título e subtítulo,
   faixa de cabeçalho de tabela, linhas separadas, rodapé.
   ========================================================================= */

/* ---- 7.1 Topo da página ---- */
/* ---- 7.1 Banner de boas-vindas ---- */
.l7-hero {
    position: relative;
    display: flex;
    align-items: center;
    gap: 20px;
    min-height: 200px;
    margin-bottom: 20px;
    padding: 32px 36px;
    background: linear-gradient(118deg, #eff8fe 0%, #e2f2fd 48%, #f7fcff 100%);
    border-radius: 16px;
    overflow: hidden;
}

.l7-hero-txt { position: relative; z-index: 1; flex: 1 1 auto; min-width: 0; }

.l7-hero-eyebrow {
    display: block;
    margin-bottom: 6px;
    color: var(--l7-primary-700);
    font-size: .9rem;
    font-weight: 600;
}

.l7-hero h1 {
    margin: 0 0 10px;
    color: var(--l7-heading);
    font-size: 2.15rem;
    font-weight: 800;
    line-height: 1.05;
    letter-spacing: -.04em;
}

.l7-hero p { margin: 0; color: var(--l7-text); font-size: .9rem; line-height: 1.65; }

.l7-hero-art { flex: 0 0 270px; }
.l7-hero-art svg { display: block; width: 100%; height: auto; }

/* ---- Último acesso: cartão escuro no topo da coluna da direita ---- */
.l7-lastaccess {
    position: relative;
    display: flex;
    flex-direction: column;
    gap: 18px;
    padding: 22px 24px;
    background: linear-gradient(150deg, #0c2f52 0%, #103e6b 100%);
    border-radius: 16px;
    overflow: hidden;
}

.l7-lastaccess-item { position: relative; z-index: 1; display: flex; align-items: center; gap: 13px; }

.l7-lastaccess-ico {
    flex: 0 0 38px;
    width: 38px;
    height: 38px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background-color: rgba(255, 255, 255, .1);
    border-radius: 11px;
    color: #6fc5ef;
    font-size: .95rem;
}

.l7-lastaccess-txt { display: flex; flex-direction: column; min-width: 0; }
.l7-lastaccess-txt small { color: var(--l7-nav-muted); font-size: .74rem; }
.l7-lastaccess-txt strong { color: #fff; font-size: .92rem; font-weight: 700; }

.l7-lastaccess-art {
    position: absolute;
    right: -8px;
    bottom: -18px;
    color: rgba(255, 255, 255, .07);
    font-size: 7rem;
    line-height: 1;
    pointer-events: none;
}

/* ---- Ícone quadrado no cabeçalho dos cartões ---- */
.l7-card-ico {
    flex: 0 0 38px;
    width: 38px;
    height: 38px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background-color: var(--l7-primary-050);
    border-radius: 11px;
    color: var(--l7-primary);
    font-size: .95rem;
}

.l7-card-ico.is-green { background-color: var(--l7-success-bg); color: var(--l7-success); }
.l7-card-ico.is-amber { background-color: var(--l7-warning-bg); color: var(--l7-warning); }
.l7-card-ico.is-purple { background-color: var(--l7-purple-bg); color: var(--l7-purple); }
.l7-card-ico.is-blue { background-color: var(--l7-primary-050); color: var(--l7-primary); }

/* ---- Ícone dos atalhos ---- */
.l7-link-ico {
    flex: 0 0 34px;
    width: 34px;
    height: 34px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background-color: var(--l7-primary-050);
    border-radius: 10px;
    color: var(--l7-primary);
    font-size: .85rem;
}

.l7-link-ico.is-green { background-color: var(--l7-success-bg); color: var(--l7-success); }
.l7-link-ico.is-amber { background-color: var(--l7-warning-bg); color: var(--l7-warning); }
.l7-link-ico.is-purple { background-color: var(--l7-purple-bg); color: var(--l7-purple); }
.l7-link-ico.is-pink { background-color: #fdecf3; color: #d2478a; }

/* ---- Cartão de resumo ---- */
.l7-sum-grid {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    gap: 0;
}

.l7-sum-nums { padding: 8px 20px 12px; border-right: 1px solid var(--l7-border); }

.l7-sum-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 11px 0;
    border-bottom: 1px dashed var(--l7-border);
    font-size: .85rem;
}

.l7-sum-row:last-child { border-bottom: 0; }
.l7-sum-row span { display: inline-flex; align-items: center; gap: 9px; color: var(--l7-muted); }
.l7-sum-row span i { width: 16px; color: var(--l7-faint); font-size: .82rem; text-align: center; }
.l7-sum-row b { color: var(--l7-heading); font-size: 1rem; font-weight: 800; }

.l7-sum-side { padding: 16px 20px 18px; }

.l7-sum-lbl {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    color: var(--l7-muted);
    font-size: .78rem;
    font-weight: 600;
}

.l7-sum-lbl i { color: var(--l7-success); font-size: .5rem; }

.l7-sum-big {
    margin: 6px 0 12px;
    color: var(--l7-heading);
    font-size: 1.85rem;
    font-weight: 800;
    letter-spacing: -.035em;
    line-height: 1;
}

.l7-sum-big em { color: var(--l7-faint); font-size: .95rem; font-style: normal; font-weight: 600; }

.l7-sum-bar {
    height: 7px;
    margin-bottom: 16px;
    background-color: var(--l7-bg);
    border-radius: var(--l7-radius-pill);
    overflow: hidden;
}

.l7-sum-bar > span {
    display: block;
    height: 100%;
    background: linear-gradient(90deg, #35b6ec 0%, var(--l7-primary) 100%);
    border-radius: var(--l7-radius-pill);
}

.l7-sum-note {
    display: flex;
    align-items: flex-start;
    gap: 11px;
    padding: 13px 15px;
    background-color: var(--l7-primary-050);
    border-radius: 10px;
}

.l7-sum-note > i { margin-top: 2px; color: var(--l7-primary); font-size: .9rem; }
.l7-sum-note span { display: flex; flex-direction: column; min-width: 0; font-size: .78rem; color: var(--l7-muted); }
.l7-sum-note strong { color: var(--l7-heading); font-size: .84rem; font-weight: 700; }
.l7-sum-note a { margin-top: 6px; color: var(--l7-primary); font-size: .78rem; font-weight: 700; }
.l7-sum-note.is-bad { background-color: var(--l7-danger-bg); }
.l7-sum-note.is-bad > i { color: var(--l7-danger); }

/* ---- Link "ver detalhes" da próxima fatura ---- */
.l7-nextinv-go {
    margin-left: auto;
    color: var(--l7-primary);
    font-size: .78rem;
    font-weight: 700;
    white-space: nowrap;
}

.l7-nextinv-go i { margin-left: 5px; font-size: .66rem; }

@media (max-width: 767.98px) {
    .l7-hero { flex-direction: column-reverse; text-align: center; padding: 26px 22px; }
    .l7-hero-art { flex: 0 0 auto; width: 100%; max-width: 230px; }
    .l7-hero h1 { font-size: 1.7rem; }
    .l7-sum-grid { grid-template-columns: minmax(0, 1fr); }
    .l7-sum-nums { border-right: 0; border-bottom: 1px solid var(--l7-border); }
}


/* ---- 7.2 Cartões de número ---- */
.l7-stats {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 16px;
    margin-bottom: 20px;
}

/* Cartão com fundo tingido e uma onda de cor no pé, como no desenho. */
.l7-stat {
    position: relative;
    display: flex;
    flex-direction: column;
    padding: 22px 24px 20px;
    overflow: hidden;
    background:
        radial-gradient(120% 80% at 110% 120%, rgba(23, 161, 220, .16) 0%, rgba(23, 161, 220, 0) 60%),
        linear-gradient(160deg, #f4fbff 0%, #eaf6fe 100%);
    border: 1px solid #dceefb;
    border-radius: 14px;
    color: inherit;
    text-decoration: none;
    transition: border-color .15s ease, box-shadow .15s ease, transform .15s ease;
}

.l7-stat:hover {
    color: inherit;
    border-color: var(--l7-primary-100);
    box-shadow: 0 10px 26px rgba(16, 32, 52, .09);
}

.l7-stat-ico {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 48px;
    height: 48px;
    margin-bottom: 16px;
    font-size: 1.15rem;
    color: var(--l7-primary);
    background-color: #fff;
    border-radius: 13px;
    box-shadow: 0 3px 10px rgba(16, 32, 52, .07);
}

.l7-stat-label { color: var(--l7-muted); font-size: .88rem; line-height: 1.25; }

.l7-stat-value {
    margin: 2px 0 14px;
    color: var(--l7-heading);
    font-size: 2.4rem;
    font-weight: 800;
    line-height: 1.05;
    letter-spacing: -.04em;
}

.l7-stat-link { margin-top: auto; color: var(--l7-primary); font-size: .82rem; font-weight: 700; }
.l7-stat-link i { margin-left: 6px; font-size: .68rem; transition: transform .15s ease; }
.l7-stat:hover .l7-stat-link i { transform: translateX(3px); }

.l7-stat-green {
    background:
        radial-gradient(120% 80% at 110% 120%, rgba(23, 166, 115, .16) 0%, rgba(23, 166, 115, 0) 60%),
        linear-gradient(160deg, #f4fdf9 0%, #e8f8f1 100%);
    border-color: #d5efe4;
}

.l7-stat-green .l7-stat-ico  { color: var(--l7-success); }
.l7-stat-green .l7-stat-link { color: var(--l7-success); }

.l7-stat-amber {
    background:
        radial-gradient(120% 80% at 110% 120%, rgba(224, 140, 26, .16) 0%, rgba(224, 140, 26, 0) 60%),
        linear-gradient(160deg, #fffaf2 0%, #fdf2e2 100%);
    border-color: #f5e3c9;
}

.l7-stat-amber .l7-stat-ico  { color: var(--l7-warning); }
.l7-stat-amber .l7-stat-link { color: var(--l7-warning); }

.l7-stat-purple {
    background:
        radial-gradient(120% 80% at 110% 120%, rgba(123, 97, 217, .16) 0%, rgba(123, 97, 217, 0) 60%),
        linear-gradient(160deg, #f8f6ff 0%, #f0ecfd 100%);
    border-color: #e2daf8;
}

.l7-stat-purple .l7-stat-ico  { color: var(--l7-purple); }
.l7-stat-purple .l7-stat-link { color: var(--l7-purple); }

/* ---- 7.3 Grade ---- */
.l7-home {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 360px;
    gap: 20px;
    align-items: start;
}

.l7-home-main { min-width: 0; }
.l7-home-side { min-width: 0; display: flex; flex-direction: column; gap: 20px; }

/* ---- 7.4 Cartão ---- */
.l7-card {
    margin-bottom: 20px;
    background-color: var(--l7-surface);
    border: 1px solid var(--l7-border);
    border-radius: var(--l7-radius);
    box-shadow: var(--l7-shadow);
    overflow: hidden;
}

.l7-home-side .l7-card { margin-bottom: 0; }
.l7-card:last-child { margin-bottom: 0; }

.l7-card-head {
    display: flex;
    align-items: flex-start;
    gap: 14px;
    padding: 18px 20px 16px;
    border-bottom: 1px solid var(--l7-border);
}

.l7-card-title { flex: 1 1 auto; min-width: 0; }

.l7-card-title h2 {
    display: flex;
    align-items: center;
    gap: 9px;
    margin: 0;
    color: var(--l7-heading);
    font-size: 1.02rem;
    font-weight: 700;
    letter-spacing: -.015em;
}

.l7-card-title h2 > i { color: var(--l7-primary); font-size: .95rem; }
.l7-card-title p { margin: 3px 0 0; color: var(--l7-muted); font-size: .8rem; }

.l7-card-more {
    flex: 0 0 auto;
    margin-top: 2px;
    color: var(--l7-primary);
    font-size: .78rem;
    font-weight: 600;
    white-space: nowrap;
}

.l7-card-more i { margin-left: 5px; font-size: .65rem; transition: transform .15s ease; }
.l7-card-more:hover i { transform: translateX(3px); }

.l7-card-body { font-size: .85rem; }

.l7-card-body > p,
.l7-card-body > div > p { margin: 0; padding: 22px 20px; color: var(--l7-muted); }

.l7-card-foot {
    padding: 12px 20px;
    background-color: var(--l7-surface-alt);
    border-top: 1px solid var(--l7-border);
    font-size: .78rem;
}

.l7-card-foot:empty { display: none; }
.l7-card-foot .text-center { text-align: right !important; }
.l7-card-plain { padding: 18px 20px; }

/* ---- 7.5 Faixa de cabeçalho da tabela ---- */
.l7-thead {
    display: grid;
    align-items: center;
    gap: 14px;
    padding: 11px 20px;
    background-color: var(--l7-surface-alt);
    border-bottom: 1px solid var(--l7-border);
    color: var(--l7-muted);
    font-size: .7rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .06em;
}

.l7-thead-srv { grid-template-columns: minmax(0, 1fr) 118px 108px 104px 22px; }
.l7-thead-srv-basic { grid-template-columns: minmax(0, 1fr) 118px 112px 120px; }
.l7-thead-inv { grid-template-columns: 104px minmax(0, 1fr) minmax(0, 1fr) 104px 104px 22px; }

/* ---- 7.6 Linhas ---- */
.l7-row,
.div-service-item.l7-srv {
    display: grid;
    align-items: center;
    gap: 14px;
    padding: 14px 20px;
    border-bottom: 1px solid var(--l7-border);
    color: var(--l7-text);
    font-size: .85rem;
    transition: background-color .14s ease;
}

.l7-row:hover,
.l7-srv:hover { background-color: var(--l7-surface-alt); color: var(--l7-text); }

.l7-row-inv { grid-template-columns: 104px minmax(0, 1fr) minmax(0, 1fr) 104px 104px 22px; }
.l7-row-srv { grid-template-columns: minmax(0, 1fr) 118px 108px 104px 22px; }

.l7-row-srv .l7-srv-name { display: flex; align-items: center; gap: 11px; min-width: 0; }
.l7-row-srv .l7-srv-text { display: flex; flex-direction: column; min-width: 0; }

.l7-row-srv .l7-srv-text strong,
.l7-row-srv .l7-srv-text small {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.l7-row-srv .l7-srv-text strong { color: var(--l7-heading); font-size: .865rem; font-weight: 600; }
.l7-row-srv .l7-srv-text small { color: var(--l7-muted); font-size: .765rem; }

.l7-srv-price { display: flex; flex-direction: column; min-width: 0; }
.l7-srv-price strong { color: var(--l7-heading); font-size: .845rem; font-weight: 600; }
.l7-srv-price small { color: var(--l7-muted); font-size: .72rem; }
.l7-row-go { color: var(--l7-faint); font-size: .7rem; text-align: right; }
.l7-muted { color: var(--l7-muted); }
.l7-inv-num { color: var(--l7-heading); font-weight: 600; }
.l7-inv-total { color: var(--l7-heading); font-weight: 600; }

/* Conteúdo que o WHMCS injeta dentro do corpo */
.l7-card-body .list-group { margin: 0; border: 0; border-radius: 0; max-height: none; }

.l7-card-body .list-group-item {
    padding: 0;
    background-color: transparent;
    border: 0;
    border-bottom: 1px solid var(--l7-border) !important;
    border-radius: 0;
}

.l7-card-body .list-group-item:last-child { border-bottom: 0 !important; }
.l7-card-body a.list-group-item { padding: 13px 20px; font-size: .85rem; }
.l7-card-body a.list-group-item:hover { background-color: var(--l7-surface-alt); }

/* ---- 7.7 Linha de serviço ---- */
.div-service-item.l7-srv {
    grid-template-columns: minmax(0, 1fr) 118px 112px 120px;
    cursor: pointer;
}

.l7-srv-name { display: flex; align-items: center; gap: 11px; margin: 0 !important; min-width: 0; }

.l7-srv-ico {
    flex: 0 0 34px;
    width: 34px;
    height: 34px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: var(--l7-primary);
    background-color: var(--l7-primary-050);
    border-radius: 8px;
    font-size: .82rem;
}

.l7-srv-text { display: flex; flex-direction: column; min-width: 0; }
.l7-srv-text > span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

.l7-srv-text > span:first-child {
    color: var(--l7-heading);
    font-size: .865rem;
    font-weight: 600 !important;
}

.l7-srv-text .text-domain { color: var(--l7-muted); font-size: .765rem; }
.l7-srv-due { color: var(--l7-text); font-size: .82rem; }

/* O whmcs.js grava width inline aqui; nesta grade ela é uma célula */
.div-service-status.l7-srv-status { width: auto !important; text-align: left; }
.l7-srv-status .label-placeholder { display: none !important; }

.l7-srv-actions { margin-left: 0 !important; display: flex; justify-content: flex-end; gap: 5px; }

/* ---- 7.8 Pílula de status ---- */
.l7-pill,
.l7-srv-status .label {
    display: inline-block;
    padding: .34em .72em !important;
    border-radius: 999px !important;
    font-size: .74rem;
    font-weight: 600;
    line-height: 1.35;
    width: auto !important;
    background-color: var(--l7-bg) !important;
    color: var(--l7-muted) !important;
}

.l7-pill-success,
.l7-srv-status .label-success { background-color: var(--l7-success-bg) !important; color: var(--l7-success) !important; }
.l7-pill-warning,
.l7-srv-status .label-warning { background-color: var(--l7-warning-bg) !important; color: var(--l7-warning) !important; }
.l7-pill-danger,
.l7-srv-status .label-danger  { background-color: var(--l7-danger-bg) !important; color: var(--l7-danger) !important; }
.l7-pill-info,
.l7-srv-status .label-info    { background-color: var(--l7-primary-050) !important; color: var(--l7-primary-700) !important; }

/* ---- 7.9 Dados da conta ---- */
.l7-facts { padding: 6px 0; }
.l7-fact { padding: 11px 20px; }
.l7-fact + .l7-fact { border-top: 1px solid var(--l7-border); }

.l7-fact-k {
    display: block;
    margin-bottom: 2px;
    color: var(--l7-muted);
    font-size: .7rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: .05em;
}

.l7-fact-v { display: block; color: var(--l7-heading); font-size: .85rem; word-break: break-word; }

/* ---- 7.10 Atalhos ---- */
.l7-link {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px 20px;
    color: var(--l7-text);
    font-size: .845rem;
    border-bottom: 1px solid var(--l7-border);
}

.l7-link:last-child { border-bottom: 0; }
.l7-link:hover { background-color: var(--l7-surface-alt); color: var(--l7-heading); }
.l7-link > i:first-child { flex: 0 0 18px; color: var(--l7-primary); font-size: .88rem; text-align: center; }

/* O rótulo estica; o quadradinho do ícone não. Sem o :not, o ícone entrava
   no "flex: 1 1 auto" junto com o texto e virava um retângulo comprido. */
.l7-link > span:not(.l7-link-ico) { flex: 1 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; }
.l7-link-go { flex: 0 0 auto; color: var(--l7-faint) !important; font-size: .68rem; transition: transform .15s ease; }
.l7-link:hover .l7-link-go { transform: translateX(3px); }

/* ---- 7.10b Próxima fatura ---- */
.l7-nextinv .l7-card-body { padding: 16px 20px 20px; }

.l7-nextinv-top {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    margin-bottom: 10px;
}

.l7-nextinv-ref {
    min-width: 0;
    color: var(--l7-muted);
    font-size: .7rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .06em;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.l7-nextinv-amount {
    color: var(--l7-heading);
    font-size: 1.5rem;
    font-weight: 700;
    line-height: 1.1;
    letter-spacing: -.025em;
}

.l7-nextinv-due {
    display: flex;
    align-items: baseline;
    flex-wrap: wrap;
    gap: 6px;
    margin: 6px 0 16px;
    padding-bottom: 16px;
    border-bottom: 1px solid var(--l7-border);
    color: var(--l7-muted);
    font-size: .8rem;
}

.l7-nextinv-due > i { color: var(--l7-faint); font-size: .78rem; }
.l7-nextinv-due strong { color: var(--l7-heading); font-weight: 600; }

.l7-nextinv-due em {
    margin-left: auto;
    padding: .15em .5em;
    background-color: var(--l7-bg);
    border-radius: 999px;
    color: var(--l7-muted);
    font-size: .72rem;
    font-style: normal;
    white-space: nowrap;
}

.l7-nextinv.is-overdue .l7-nextinv-amount { color: var(--l7-danger); }
.l7-nextinv.is-overdue .l7-nextinv-due > i,
.l7-nextinv.is-overdue .l7-nextinv-due strong { color: var(--l7-danger); }

.l7-nextinv .btn-block i { margin-left: 6px; font-size: .68rem; }

.l7-nextinv-list { border-top: 1px solid var(--l7-border); }

.l7-nextinv-row {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 11px 0;
    border-bottom: 1px solid var(--l7-border);
}

.l7-nextinv-row:last-child { border-bottom: 0; padding-bottom: 0; }
.l7-nextinv-row-info { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; }

.l7-nextinv-row-info strong {
    color: var(--l7-heading);
    font-size: .82rem;
    font-weight: 600;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.l7-nextinv-row-info small { color: var(--l7-muted); font-size: .76rem; }
.l7-nextinv-row .btn { flex: 0 0 auto; }

.l7-nextinv-empty {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 14px;
    color: var(--l7-muted);
    font-size: .85rem;
}

.l7-nextinv-empty > i { color: var(--l7-success); font-size: 1.05rem; }

/* ---- 7.10d Lista de serviços (clientareaproducts) ---- */
.l7-svsearch {
    position: relative;
    padding: 14px 20px;
    border-bottom: 1px solid var(--l7-border);
}

.l7-svsearch > i {
    position: absolute;
    left: 34px;
    top: 50%;
    transform: translateY(-50%);
    color: var(--l7-faint);
    font-size: .8rem;
    pointer-events: none;
}

.l7-svsearch input {
    width: 100%;
    min-height: 40px;
    padding: .45rem .9rem .45rem 2.2rem;
    background-color: var(--l7-bg);
    border: 1px solid transparent;
    border-radius: var(--l7-radius-sm);
    color: var(--l7-text);
    font-size: .85rem;
}

.l7-svsearch input:focus {
    background-color: var(--l7-surface);
    border-color: var(--l7-primary);
    box-shadow: 0 0 0 3px var(--l7-primary-100);
    outline: 0;
}

.l7-sv {
    display: flex;
    align-items: center;
    gap: 20px;
    padding: 18px 20px;
    border-bottom: 1px solid var(--l7-border);
    transition: background-color .14s ease;
}

.l7-sv:last-child { border-bottom: 0; }
.l7-sv:hover { background-color: var(--l7-surface-alt); }

.l7-sv-main { flex: 1 1 auto; min-width: 0; display: flex; align-items: center; gap: 14px; }

.l7-sv-ico {
    flex: 0 0 44px;
    width: 44px;
    height: 44px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: var(--l7-primary);
    background-color: var(--l7-primary-050);
    border-radius: 11px;
    font-size: 1rem;
}

.l7-sv-ico.is-off { color: var(--l7-faint); background-color: var(--l7-bg); }

.l7-sv-name { display: flex; flex-direction: column; min-width: 0; gap: 2px; }

.l7-sv-name strong {
    color: var(--l7-heading);
    font-size: .95rem;
    font-weight: 600;
    letter-spacing: -.01em;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.l7-sv-name a,
.l7-sv-name small {
    color: var(--l7-muted);
    font-size: .78rem;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.l7-sv-name a:hover { color: var(--l7-primary); }
.l7-sv-name a i { font-size: .6rem; opacity: .6; margin-left: 2px; }

/* Blocos de dado: rótulo em cima, valor embaixo, separados por linha */
.l7-sv-meta { flex: 0 0 auto; display: flex; align-items: stretch; gap: 0; }

.l7-sv-field {
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 2px;
    min-width: 116px;
    padding: 0 18px;
    border-left: 1px solid var(--l7-border);
}

.l7-sv-field small {
    color: var(--l7-muted);
    font-size: .66rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .07em;
}

.l7-sv-field strong { color: var(--l7-heading); font-size: .855rem; font-weight: 600; }
.l7-sv-field em { color: var(--l7-muted); font-size: .72rem; font-style: normal; }
.l7-sv-field-status .l7-pill { align-self: flex-start; margin-top: 2px; }

.l7-sv-btn {
    flex: 0 0 auto;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: .55rem 1.1rem;
    color: var(--l7-primary);
    background-color: var(--l7-surface);
    border: 1px solid var(--l7-border-strong);
    border-radius: var(--l7-radius-sm);
    font-size: .82rem;
    font-weight: 600;
    white-space: nowrap;
    transition: background-color .14s ease, border-color .14s ease, color .14s ease;
}

.l7-sv-btn i { font-size: .66rem; transition: transform .15s ease; }
.l7-sv-btn:hover { background-color: var(--l7-primary); border-color: var(--l7-primary); color: #fff; }
.l7-sv-btn:hover i { transform: translateX(3px); }

.l7-sv-empty {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 12px;
    padding: 48px 20px;
    color: var(--l7-muted);
    font-size: .88rem;
}

.l7-sv-empty > i { font-size: 1.8rem; color: var(--l7-faint); }
.l7-sv-empty.w-hidden { display: none !important; }

@media (max-width: 991.98px) {
    .l7-sv { flex-wrap: wrap; gap: 14px; }
    .l7-sv-main { flex: 1 1 100%; }

    .l7-sv-meta { flex: 1 1 auto; }
    .l7-sv-field:first-child { padding-left: 58px; border-left: 0; }

    .l7-sv-btn { margin-left: auto; }
}

@media (max-width: 575.98px) {
    .l7-sv-meta { flex-wrap: wrap; gap: 12px 0; width: 100%; }
    .l7-sv-field { flex: 1 1 50%; min-width: 0; padding: 0 12px; }
    .l7-sv-field:first-child { padding-left: 0; }
    .l7-sv-btn { width: 100%; justify-content: center; }
}

/* =========================================================================
   7.10e  Listagem padrão — usada em faturas, domínios, tickets, cotações.
          Mesma anatomia em toda tela: ícone, título com subtítulo, blocos
          de dado separados por linha vertical, ação à direita.
   ========================================================================= */
.l7-list { display: flex; flex-direction: column; }

.l7-li {
    display: flex;
    align-items: center;
    gap: 18px;
    padding: 16px 20px;
    border-bottom: 1px solid var(--l7-border);
    color: var(--l7-text);
    transition: background-color .14s ease;
}

.l7-li:last-child { border-bottom: 0; }
.l7-li:hover { background-color: var(--l7-surface-alt); color: var(--l7-text); }

.l7-li-ico {
    flex: 0 0 42px;
    width: 42px;
    height: 42px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: var(--l7-primary);
    background-color: var(--l7-primary-050);
    border-radius: 11px;
    font-size: .95rem;
}

.l7-li-ico.is-green  { color: var(--l7-success); background-color: var(--l7-success-bg); }
.l7-li-ico.is-amber  { color: var(--l7-warning); background-color: var(--l7-warning-bg); }
.l7-li-ico.is-red    { color: var(--l7-danger);  background-color: var(--l7-danger-bg); }
.l7-li-ico.is-purple { color: var(--l7-purple);  background-color: var(--l7-purple-bg); }
.l7-li-ico.is-off    { color: var(--l7-faint);   background-color: var(--l7-bg); }

.l7-li-main { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; gap: 2px; }

.l7-li-main strong {
    color: var(--l7-heading);
    font-size: .92rem;
    font-weight: 600;
    letter-spacing: -.01em;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.l7-li-main small {
    display: flex;
    align-items: center;
    gap: 7px;
    color: var(--l7-muted);
    font-size: .78rem;
}

.l7-li-main small i { font-size: .7rem; opacity: .7; }
.l7-li-main a { color: var(--l7-muted); }
.l7-li-main a:hover { color: var(--l7-primary); }

.l7-li-fields { flex: 0 0 auto; display: flex; align-items: stretch; }

.l7-li-f {
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 2px;
    min-width: 112px;
    padding: 0 18px;
    border-left: 1px solid var(--l7-border);
}

.l7-li-f small {
    color: var(--l7-muted);
    font-size: .66rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .07em;
}

.l7-li-f strong { color: var(--l7-heading); font-size: .85rem; font-weight: 600; }
.l7-li-f em { color: var(--l7-muted); font-size: .72rem; font-style: normal; }
.l7-li-f .l7-pill { align-self: flex-start; margin-top: 2px; }

.l7-li-act {
    flex: 0 0 auto;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: .55rem 1.05rem;
    color: var(--l7-primary);
    background-color: var(--l7-surface);
    border: 1px solid var(--l7-border-strong);
    border-radius: var(--l7-radius-sm);
    font-size: .8rem;
    font-weight: 600;
    white-space: nowrap;
    transition: background-color .14s ease, border-color .14s ease, color .14s ease;
}

.l7-li-act i { font-size: .64rem; transition: transform .15s ease; }
.l7-li-act:hover { background-color: var(--l7-primary); border-color: var(--l7-primary); color: #fff; }
.l7-li-act:hover i { transform: translateX(3px); }
.l7-li-act.is-solid { background-color: var(--l7-primary); border-color: var(--l7-primary); color: #fff; }
.l7-li-act.is-solid:hover { background-color: var(--l7-primary-700); border-color: var(--l7-primary-700); }

.l7-li-check { flex: 0 0 auto; display: flex; align-items: center; }
.l7-li-check input { width: 16px; height: 16px; accent-color: var(--l7-primary); cursor: pointer; }

/* Marcador de não lido */
.l7-li-dot {
    flex: 0 0 8px;
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background-color: var(--l7-primary);
}

.l7-li.is-unread strong { font-weight: 700; }

/* Busca da listagem */
.l7-lsearch { position: relative; padding: 14px 20px; border-bottom: 1px solid var(--l7-border); }

.l7-lsearch > i {
    position: absolute;
    left: 34px;
    top: 50%;
    transform: translateY(-50%);
    color: var(--l7-faint);
    font-size: .8rem;
    pointer-events: none;
}

.l7-lsearch input {
    width: 100%;
    min-height: 40px;
    padding: .45rem .9rem .45rem 2.2rem;
    background-color: var(--l7-bg);
    border: 1px solid transparent;
    border-radius: var(--l7-radius-sm);
    color: var(--l7-text);
    font-size: .85rem;
}

.l7-lsearch input:focus {
    background-color: var(--l7-surface);
    border-color: var(--l7-primary);
    box-shadow: 0 0 0 3px var(--l7-primary-100);
    outline: 0;
}

/* Barra de ações em massa */
.l7-bulk {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px;
    padding: 12px 20px;
    background-color: var(--l7-surface-alt);
    border-bottom: 1px solid var(--l7-border);
}

.l7-bulk .btn { font-size: .78rem; padding: .4rem .8rem; }
.l7-bulk .btn i { margin-right: 5px; opacity: .7; }

/* Estado vazio */
.l7-empty {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 12px;
    padding: 52px 20px;
    color: var(--l7-muted);
    font-size: .88rem;
    text-align: center;
}

.l7-empty > i { font-size: 1.9rem; color: var(--l7-faint); }
.l7-empty.w-hidden { display: none !important; }

@media (max-width: 991.98px) {
    .l7-li { flex-wrap: wrap; gap: 14px; }
    .l7-li-main { flex: 1 1 60%; }
    .l7-li-fields { flex: 1 1 100%; }
    .l7-li-f:first-child { padding-left: 60px; border-left: 0; }
    .l7-li-act { margin-left: auto; }
}

@media (max-width: 575.98px) {
    .l7-li-ico { display: none; }
    .l7-li-fields { flex-wrap: wrap; gap: 12px 0; }
    .l7-li-f { flex: 1 1 50%; min-width: 0; padding: 0 12px; }
    .l7-li-f:first-child, .l7-li-f:nth-child(3) { padding-left: 0; border-left: 0; }
    .l7-li-act { width: 100%; justify-content: center; }
}

/* ---- 7.10c Tabelas de listagem (serviços, domínios, faturas, tickets) ---- */
.l7-listcard .l7-card-head { padding-bottom: 14px; }
.l7-listcard .table-container { margin: 0; }
.l7-table-loading { padding: 26px 0; color: var(--l7-muted); font-size: .85rem; }

/* Busca e contador que o DataTables injeta */
.l7-listcard .listtable {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 12px;
    padding: 14px 20px;
    border-bottom: 1px solid var(--l7-border);
}

.l7-listcard .dataTables_filter { order: 1; margin: 0 auto 0 0; }
.l7-listcard .dataTables_info { order: 2; padding: 0; margin-left: auto; }

.l7-listcard .dataTables_filter label { margin: 0; font-weight: 400; }

.l7-listcard .dataTables_filter input {
    min-width: 230px;
    min-height: 38px;
    padding: .4rem .9rem;
    border: 1px solid var(--l7-border-strong);
    border-radius: var(--l7-radius-sm);
    font-size: .82rem;
}

table.l7-table { width: 100% !important; margin: 0; }

table.l7-table > thead > tr > th {
    padding: 11px 20px;
    background-color: var(--l7-surface-alt);
    border-top: 0;
    border-bottom: 1px solid var(--l7-border);
    color: var(--l7-muted);
    font-size: .7rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .06em;
    white-space: nowrap;
}

table.l7-table > tbody > tr { cursor: pointer; transition: background-color .14s ease; }
table.l7-table > tbody > tr:hover { background-color: var(--l7-surface-alt); }

table.l7-table > tbody > tr > td {
    padding: 13px 20px;
    vertical-align: middle;
    border-top: 0;
    border-bottom: 1px solid var(--l7-border);
    font-size: .85rem;
}

table.l7-table > tbody > tr:last-child > td { border-bottom: 0; }

.l7-table .l7-col-ico { width: 58px; padding-right: 0 !important; text-align: left; }
.l7-table .l7-col-ico img { border-radius: 4px; }

.l7-table .l7-srv-ico {
    flex: 0 0 34px;
    width: 34px;
    height: 34px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: var(--l7-primary);
    background-color: var(--l7-primary-050);
    border-radius: 8px;
    font-size: .82rem;
}

.l7-cell-stack { display: flex; flex-direction: column; min-width: 0; }
.l7-cell-stack strong { color: var(--l7-heading); font-size: .865rem; font-weight: 600; }
.l7-cell-stack small { color: var(--l7-muted); font-size: .755rem; }

/* Rótulos de status do WHMCS como pílula */
.l7-table .label.status {
    display: inline-block;
    padding: .34em .72em;
    border-radius: 999px;
    background-color: var(--l7-bg);
    color: var(--l7-muted);
    font-size: .74rem;
    font-weight: 600;
}

.l7-table .status-active   { background-color: var(--l7-success-bg); color: var(--l7-success); }
.l7-table .status-pending  { background-color: var(--l7-warning-bg); color: var(--l7-warning); }
.l7-table .status-suspended,
.l7-table .status-fraud    { background-color: var(--l7-danger-bg); color: var(--l7-danger); }
.l7-table .status-paid     { background-color: var(--l7-success-bg); color: var(--l7-success); }
.l7-table .status-unpaid   { background-color: var(--l7-warning-bg); color: var(--l7-warning); }
.l7-table .status-overdue  { background-color: var(--l7-danger-bg); color: var(--l7-danger); }

/* Setas de ordenação: discretas */
table.l7-table > thead > tr > th.sorting,
table.l7-table > thead > tr > th.sorting_asc,
table.l7-table > thead > tr > th.sorting_desc { position: relative; padding-right: 26px; }

table.l7-table > thead > tr > th.sorting::after,
table.l7-table > thead > tr > th.sorting_asc::after,
table.l7-table > thead > tr > th.sorting_desc::after {
    position: absolute;
    right: 20px;
    opacity: .35;
    font-size: .8em;
}

table.l7-table > thead > tr > th.sorting_asc::after,
table.l7-table > thead > tr > th.sorting_desc::after { opacity: .9; color: var(--l7-primary); }

/* Rodapé do DataTables */
.l7-listcard .dataTables_length,
.l7-listcard .dataTables_paginate {
    padding: 12px 20px;
    border-top: 1px solid var(--l7-border);
}

.l7-listcard .dataTables_length { float: left; font-size: .8rem; color: var(--l7-muted); }
.l7-listcard .dataTables_paginate { float: right; }

@media (max-width: 767.98px) {
    .l7-listcard .listtable { padding: 12px 16px; }
    .l7-listcard .dataTables_filter { width: 100%; }
    .l7-listcard .dataTables_filter input { width: 100%; min-width: 0; }
    .l7-listcard .dataTables_info { margin-left: 0; }
    table.l7-table > thead > tr > th,
    table.l7-table > tbody > tr > td { padding-left: 14px; padding-right: 14px; }
    .l7-table .l7-col-ico { display: none; }
}

/* =========================================================================
   7.10f  Ticket — cabeçalho de estado + conversa em trilho vertical
   ========================================================================= */

/* ---- Botões do módulo ---- */
.l7-btn-solid,
.l7-btn-ghost {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: .55rem 1.1rem;
    border-radius: var(--l7-radius-sm);
    font-size: .82rem;
    font-weight: 600;
    white-space: nowrap;
    cursor: pointer;
    transition: background-color .14s ease, border-color .14s ease, color .14s ease;
}

.l7-btn-solid { background-color: var(--l7-primary); border: 1px solid var(--l7-primary); color: #fff; }
.l7-btn-solid:hover { background-color: var(--l7-primary-700); border-color: var(--l7-primary-700); color: #fff; }

.l7-btn-ghost { background-color: var(--l7-surface); border: 1px solid var(--l7-border-strong); color: var(--l7-text); }
.l7-btn-ghost:hover { background-color: var(--l7-bg); border-color: var(--l7-muted); color: var(--l7-heading); }

.l7-btn-solid i, .l7-btn-ghost i { font-size: .72rem; }

/* ---- Cabeçalho ---- */
.l7-tkthead {
    position: relative;
    margin-bottom: 26px;
    padding: 20px 22px 0;
    background-color: var(--l7-surface);
    border: 1px solid var(--l7-border);
    border-left: 3px solid var(--l7-primary);
    border-radius: var(--l7-radius);
    box-shadow: var(--l7-shadow);
}

.l7-tkthead.is-closed { border-left-color: var(--l7-border-strong); }

.l7-tkthead-top {
    display: flex;
    align-items: flex-start;
    flex-wrap: wrap;
    gap: 10px 16px;
}

.l7-tkthead-hash {
    flex: 0 0 auto;
    padding: .28em .6em;
    background-color: var(--l7-bg);
    border-radius: 5px;
    color: var(--l7-muted);
    font-size: .72rem;
    font-weight: 700;
    letter-spacing: .03em;
    font-variant-numeric: tabular-nums;
}

.l7-tkthead-top h1 {
    flex: 1 1 260px;
    margin: -2px 0 0;
    color: var(--l7-heading);
    font-size: 1.22rem;
    font-weight: 700;
    letter-spacing: -.022em;
    line-height: 1.3;
}

.l7-tkthead-btns { flex: 0 0 auto; display: flex; gap: 8px; }

/* Barra de estado: células separadas por linha, dentro do cabeçalho */
.l7-tkthead-bar {
    display: flex;
    flex-wrap: wrap;
    margin: 18px -22px 0;
    border-top: 1px solid var(--l7-border);
}

.l7-tkthead-cell {
    flex: 1 1 0;
    min-width: 132px;
    display: flex;
    flex-direction: column;
    gap: 4px;
    padding: 13px 22px;
    border-left: 1px solid var(--l7-border);
}

.l7-tkthead-cell:first-child { border-left: 0; }

.l7-tkthead-cell small {
    color: var(--l7-muted);
    font-size: .655rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .08em;
}

.l7-tkthead-cell strong {
    color: var(--l7-heading);
    font-size: .845rem;
    font-weight: 600;
    font-variant-numeric: tabular-nums;
}

/* Estado com bolinha pulsante */
.l7-state {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    color: var(--l7-heading);
    font-size: .845rem;
    font-weight: 600;
}

.l7-state i {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background-color: var(--l7-success);
    box-shadow: 0 0 0 3px rgba(23, 166, 115, .18);
}

.l7-state.is-closed { color: var(--l7-muted); }
.l7-state.is-closed i { background-color: var(--l7-faint); box-shadow: 0 0 0 3px rgba(147, 161, 176, .18); }

/* Prioridade */
.l7-urg {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    color: var(--l7-heading);
    font-size: .845rem;
    font-weight: 600;
}

.l7-urg::before {
    content: "";
    width: 3px;
    height: 13px;
    border-radius: 2px;
    background-color: var(--l7-faint);
}

.l7-urg.is-high::before   { background-color: var(--l7-danger); }
.l7-urg.is-medium::before { background-color: var(--l7-primary); }
.l7-urg.is-low::before    { background-color: var(--l7-success); }

/* ---- Conversa: trilho vertical ---- */
.l7-thread { position: relative; padding-left: 0; }

.l7-thread-label {
    display: flex;
    align-items: center;
    gap: 14px;
    margin-bottom: 4px;
    padding-left: 54px;
}

.l7-thread-label span {
    color: var(--l7-muted);
    font-size: .66rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .1em;
}

.l7-thread-label::after {
    content: "";
    flex: 1 1 auto;
    height: 1px;
    background-color: var(--l7-border);
}

.l7-msg { position: relative; display: flex; gap: 16px; padding: 14px 0; }

/* O trilho é o traço vertical que liga os avatares */
.l7-msg-rail { position: relative; flex: 0 0 38px; display: flex; justify-content: center; }

.l7-msg-rail::before,
.l7-msg-rail::after {
    content: "";
    position: absolute;
    left: 50%;
    width: 2px;
    margin-left: -1px;
    background-color: var(--l7-border);
}

.l7-msg-rail::before { top: -14px; height: 14px; }
.l7-msg-rail::after { top: 52px; bottom: -14px; }

.l7-msg:first-of-type .l7-msg-rail::before { display: none; }
.l7-msg:last-of-type .l7-msg-rail::after { display: none; }

.l7-msg-avatar {
    position: relative;
    z-index: 1;
    width: 38px;
    height: 38px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background-color: var(--l7-bg);
    border: 2px solid var(--l7-surface);
    box-shadow: 0 0 0 1px var(--l7-border);
    color: var(--l7-muted);
    border-radius: 50%;
    font-size: .85rem;
    font-weight: 700;
    text-transform: uppercase;
}

.l7-msg.is-staff .l7-msg-avatar {
    background-color: var(--l7-primary);
    color: #fff;
    box-shadow: 0 0 0 1px var(--l7-primary);
}

.l7-msg-avatar.is-me {
    background-color: var(--l7-surface);
    color: var(--l7-primary);
    box-shadow: 0 0 0 1px var(--l7-primary-100);
    font-size: .72rem;
}

/* Bloco da mensagem */
.l7-msg-card {
    flex: 1 1 auto;
    min-width: 0;
    background-color: var(--l7-surface);
    border: 1px solid var(--l7-border);
    border-radius: var(--l7-radius);
    box-shadow: var(--l7-shadow);
    overflow: hidden;
}

.l7-msg.is-staff .l7-msg-card { border-color: var(--l7-primary-100); }

.l7-msg-head {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 9px;
    padding: 11px 16px;
    background-color: var(--l7-surface-alt);
    border-bottom: 1px solid var(--l7-border);
}

.l7-msg.is-staff .l7-msg-head {
    background-color: var(--l7-primary-050);
    border-bottom-color: var(--l7-primary-100);
}

.l7-msg-who { color: var(--l7-heading); font-size: .855rem; font-weight: 600; }

.l7-msg-tag {
    padding: .16em .5em;
    background-color: var(--l7-surface);
    border: 1px solid var(--l7-border);
    border-radius: 4px;
    color: var(--l7-muted);
    font-size: .625rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .06em;
}

.l7-msg.is-staff .l7-msg-tag {
    background-color: var(--l7-primary);
    border-color: var(--l7-primary);
    color: #fff;
}

.l7-msg-head time {
    margin-left: auto;
    color: var(--l7-faint);
    font-size: .755rem;
    font-variant-numeric: tabular-nums;
}

.l7-msg-text {
    padding: 16px;
    color: var(--l7-text);
    font-size: .875rem;
    line-height: 1.68;
    overflow-wrap: break-word;
}

.l7-msg-text > *:last-child { margin-bottom: 0; }
.l7-msg-text p { margin-bottom: .75em; }
.l7-msg-text img { max-width: 100%; height: auto; border-radius: 6px; }

.l7-msg-text pre {
    padding: 12px 14px;
    background-color: var(--l7-surface-alt);
    border: 1px solid var(--l7-border);
    border-radius: 6px;
    font-size: .82rem;
    overflow-x: auto;
}

.l7-msg-text code {
    padding: .12em .38em;
    background-color: var(--l7-surface-alt);
    border: 1px solid var(--l7-border);
    border-radius: 4px;
    font-size: .84em;
}

.l7-msg-text pre code { padding: 0; background: none; border: 0; }

.l7-msg-text blockquote {
    margin: 0 0 .75em;
    padding: 2px 0 2px 14px;
    border-left: 3px solid var(--l7-border-strong);
    color: var(--l7-muted);
}

/* Anexos */
.l7-msg-files {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    padding: 0 16px 14px;
}

.l7-file {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    max-width: 100%;
    padding: .4rem .7rem;
    background-color: var(--l7-surface-alt);
    border: 1px solid var(--l7-border);
    border-radius: 6px;
    color: var(--l7-text);
    font-size: .78rem;
}

.l7-file > span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
a.l7-file:hover { background-color: var(--l7-primary-050); border-color: var(--l7-primary-100); color: var(--l7-primary-700); }
.l7-file.is-gone { color: var(--l7-faint); text-decoration: line-through; }
.l7-file-dl { font-size: .66rem; opacity: .45; }
a.l7-file:hover .l7-file-dl { opacity: 1; }

.l7-msg-foot {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 14px;
    padding: 10px 16px;
    background-color: var(--l7-surface-alt);
    border-top: 1px solid var(--l7-border);
}

.l7-msg-ip { color: var(--l7-faint); font-size: .73rem; }
.l7-msg-ip i { opacity: .6; margin-right: 3px; }
.l7-rate { margin-left: auto; }

/* Fim da conversa quando o ticket está fechado */
.l7-thread-end {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    margin-left: 54px;
    margin-top: 6px;
    padding: 16px;
    background-color: var(--l7-surface-alt);
    border: 1px dashed var(--l7-border-strong);
    border-radius: var(--l7-radius);
    color: var(--l7-muted);
    font-size: .82rem;
}

/* ---- Caixa de resposta, dentro do trilho ---- */
.l7-msg.is-compose .l7-msg-card { border-color: var(--l7-primary-100); }
.l7-msg.is-compose .l7-msg-head { background-color: var(--l7-primary-050); border-bottom-color: var(--l7-primary-100); }
.l7-msg.is-compose .l7-msg-head time { font-size: .75rem; font-style: normal; }
.l7-msg.is-compose form { padding: 16px; }
.l7-msg.is-compose .form-group { margin-bottom: 14px; }

.l7-compose .CodeMirror,
.l7-compose .editor-toolbar { border-color: var(--l7-border-strong); }
.l7-compose .editor-toolbar { border-radius: var(--l7-radius-sm) var(--l7-radius-sm) 0 0; background-color: var(--l7-surface-alt); }
.l7-compose .CodeMirror { border-radius: 0 0 var(--l7-radius-sm) var(--l7-radius-sm); min-height: 150px; }
.l7-compose textarea.form-control { min-height: 150px; }

.l7-compose-files { margin-top: 12px; }
.l7-compose-files .custom-file-label { border-color: var(--l7-border-strong); color: var(--l7-muted); font-size: .8rem; }
.l7-compose-files .custom-file-label i { margin-right: 6px; opacity: .6; }
.l7-compose-files .custom-file-label::after { display: none; }
.l7-compose-files .attachment-group { margin-bottom: 6px; }

.l7-compose-foot {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 12px;
    margin-top: 16px;
    padding-top: 14px;
    border-top: 1px solid var(--l7-border);
}

.l7-compose-foot small { flex: 1 1 200px; color: var(--l7-faint); font-size: .72rem; }
.l7-compose-foot > span { display: flex; gap: 8px; margin-left: auto; }

@media (max-width: 767.98px) {
    .l7-tkthead { padding: 16px 16px 0; }
    .l7-tkthead-top h1 { font-size: 1.08rem; flex-basis: 100%; }
    .l7-tkthead-btns { flex: 1 1 100%; }
    .l7-tkthead-btns > * { flex: 1 1 auto; justify-content: center; }
    .l7-tkthead-bar { margin: 16px -16px 0; }
    .l7-tkthead-cell { flex-basis: 50%; padding: 11px 16px; }
    .l7-tkthead-cell:nth-child(3) { border-left: 0; }

    .l7-thread-label { padding-left: 0; }
    .l7-msg { gap: 11px; }
    .l7-msg-rail { flex-basis: 30px; }
    .l7-msg-avatar { width: 30px; height: 30px; font-size: .72rem; }
    .l7-msg-rail::after { top: 44px; }
    .l7-msg-head time { margin-left: 0; flex-basis: 100%; }
    .l7-thread-end { margin-left: 0; }
    .l7-compose-foot > span { width: 100%; }
    .l7-compose-foot > span > * { flex: 1 1 auto; justify-content: center; text-align: center; }
}


/* =========================================================================
   7.10g  Formulário em etapas — abrir ticket, contato, cadastro
   ========================================================================= */
.l7-form-alert { padding: 16px 20px 0; }

.l7-fs { border-bottom: 1px solid var(--l7-border); }
.l7-fs:last-of-type { border-bottom: 0; }

.l7-fs-head {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 11px;
    padding: 14px 20px;
    background-color: var(--l7-surface-alt);
    border-bottom: 1px solid var(--l7-border);
}

.l7-fs-n {
    flex: 0 0 24px;
    width: 24px;
    height: 24px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background-color: var(--l7-primary);
    color: #fff;
    border-radius: 50%;
    font-size: .74rem;
    font-weight: 700;
}

.l7-fs-t { color: var(--l7-heading); font-size: .88rem; font-weight: 600; }
.l7-fs-opt { margin-left: auto; color: var(--l7-muted); font-size: .76rem; }
.l7-fs-body { padding: 20px; }
.l7-fs-body .form-group:last-child { margin-bottom: 0; }

.l7-grid { display: grid; gap: 0 16px; }
.l7-grid-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.l7-grid-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }

/* Seletor segmentado (prioridade) */
.l7-seg {
    display: flex;
    background-color: var(--l7-bg);
    border: 1px solid var(--l7-border-strong);
    border-radius: var(--l7-radius-sm);
    padding: 3px;
    gap: 3px;
}

.l7-seg-o { flex: 1 1 0; margin: 0; cursor: pointer; }
.l7-seg-o input { position: absolute; opacity: 0; pointer-events: none; }

.l7-seg-o span {
    display: block;
    padding: .42rem .3rem;
    border-radius: 6px;
    color: var(--l7-muted);
    font-size: .78rem;
    font-weight: 600;
    text-align: center;
    transition: background-color .14s ease, color .14s ease;
}

.l7-seg-o:hover span { color: var(--l7-heading); }
.l7-seg-o input:checked + span { background-color: var(--l7-surface); box-shadow: var(--l7-shadow); }
.l7-seg-o.is-low input:checked + span { color: var(--l7-success); }
.l7-seg-o.is-mid input:checked + span { color: var(--l7-primary); }
.l7-seg-o.is-high input:checked + span { color: var(--l7-danger); }

.l7-form-foot {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 14px;
    padding: 18px 20px;
    background-color: var(--l7-surface-alt);
    border-top: 1px solid var(--l7-border);
}

.l7-form-captcha { flex: 1 1 auto; }
.l7-form-btns { display: flex; gap: 10px; margin-left: auto; }

/* =========================================================================
   7.10h  Publicações — anúncios, base de conhecimento, downloads
   ========================================================================= */
.l7-posts { display: flex; flex-direction: column; }

.l7-post { display: flex; gap: 18px; padding: 20px; border-bottom: 1px solid var(--l7-border); }
.l7-post:last-child { border-bottom: 0; }

.l7-post-date {
    flex: 0 0 62px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: flex-start;
    padding: 8px 0 10px;
    background-color: var(--l7-primary-050);
    border-radius: var(--l7-radius-sm);
    height: -moz-fit-content;
    height: fit-content;
}

.l7-post-d { color: var(--l7-primary-700); font-size: 1.25rem; font-weight: 700; line-height: 1.1; }
.l7-post-m { color: var(--l7-primary); font-size: .68rem; font-weight: 700; text-transform: uppercase; letter-spacing: .07em; }
.l7-post-y { color: var(--l7-muted); font-size: .66rem; }

.l7-post-body { flex: 1 1 auto; min-width: 0; }

.l7-post-body h3 {
    display: flex;
    align-items: baseline;
    gap: 10px;
    margin: 0 0 8px;
    font-size: 1.02rem;
    font-weight: 700;
    letter-spacing: -.015em;
}

.l7-post-body h3 a { color: var(--l7-heading); }
.l7-post-body h3 a:hover { color: var(--l7-primary); }
.l7-post-edit { margin-left: auto; font-size: .72rem; font-weight: 600; white-space: nowrap; }

.l7-post-text { color: var(--l7-muted); font-size: .86rem; line-height: 1.65; }
.l7-post-text > *:last-child { margin-bottom: 0; }
.l7-post-text img { max-width: 100%; height: auto; border-radius: 6px; }

.l7-post-more {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    margin-top: 12px;
    color: var(--l7-primary);
    font-size: .8rem;
    font-weight: 600;
}

.l7-post-more i { font-size: .66rem; transition: transform .15s ease; }
.l7-post-more:hover i { transform: translateX(3px); }

.l7-pager { margin-top: 20px; display: flex; justify-content: center; }

@media (max-width: 767.98px) {
    .l7-grid-2, .l7-grid-3 { grid-template-columns: minmax(0, 1fr); }
    .l7-fs-body { padding: 16px; }
    .l7-fs-opt { margin-left: 0; flex-basis: 100%; }
    .l7-form-foot { padding: 16px; }
    .l7-form-btns { width: 100%; }
    .l7-form-btns > * { flex: 1 1 auto; justify-content: center; text-align: center; }
    .l7-post { flex-direction: column; gap: 12px; padding: 16px; }
    .l7-post-date { flex-direction: row; gap: 6px; align-items: baseline; padding: 6px 12px; align-self: flex-start; }
}

/* =========================================================================
   7.10i  Base de conhecimento
   ========================================================================= */
.l7-kbhero {
    position: relative;
    margin-bottom: 28px;
    padding: 40px 24px;
    background: var(--l7-hero);
    border-radius: var(--l7-radius);
    box-shadow: var(--l7-shadow-blue);
    overflow: hidden;
    text-align: center;
}

.l7-kbhero::before {
    content: "";
    position: absolute;
    top: -150px;
    right: -70px;
    width: 320px;
    height: 320px;
    border-radius: 50%;
    background-color: rgba(255, 255, 255, .07);
}

.l7-kbhero-in { position: relative; z-index: 1; max-width: 620px; margin: 0 auto; }
.l7-kbhero-in > i { font-size: 1.6rem; color: rgba(255, 255, 255, .8); margin-bottom: 12px; display: block; }

.l7-kbhero h1 {
    margin: 0 0 6px;
    color: #fff;
    font-size: 1.55rem;
    font-weight: 700;
    letter-spacing: -.025em;
}

.l7-kbhero p { margin: 0 0 22px; color: rgba(255, 255, 255, .82); font-size: .9rem; }

.l7-kbsearch { position: relative; display: flex; gap: 8px; }

.l7-kbsearch > i {
    position: absolute;
    left: 18px;
    top: 50%;
    transform: translateY(-50%);
    color: var(--l7-faint);
    font-size: .88rem;
    pointer-events: none;
}

.l7-kbsearch input {
    flex: 1 1 auto;
    min-width: 0;
    min-height: 48px;
    padding: .6rem 1rem .6rem 2.85rem;
    background-color: #fff;
    border: 0;
    border-radius: var(--l7-radius-sm);
    color: var(--l7-text);
    font-size: .92rem;
}

.l7-kbsearch input:focus { outline: 0; box-shadow: 0 0 0 3px rgba(255, 255, 255, .35); }

.l7-kbsearch button {
    flex: 0 0 auto;
    padding: 0 1.5rem;
    background-color: rgba(255, 255, 255, .16);
    border: 1px solid rgba(255, 255, 255, .5);
    border-radius: var(--l7-radius-sm);
    color: #fff;
    font-size: .88rem;
    font-weight: 600;
    cursor: pointer;
    transition: background-color .14s ease;
}

.l7-kbsearch button:hover { background-color: rgba(255, 255, 255, .28); }

/* Título de seção solto na página */
.l7-sechead { display: flex; align-items: center; gap: 14px; margin: 26px 0 14px; }

.l7-sechead span {
    color: var(--l7-muted);
    font-size: .68rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .1em;
}

.l7-sechead::after { content: ""; flex: 1 1 auto; height: 1px; background-color: var(--l7-border); }

/* Grade de categorias */
.l7-tiles { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; }

.l7-tile {
    position: relative;
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 18px;
    background-color: var(--l7-surface);
    border: 1px solid var(--l7-border);
    border-radius: var(--l7-radius);
    box-shadow: var(--l7-shadow);
    color: var(--l7-text);
    transition: border-color .15s ease, box-shadow .15s ease, transform .15s ease;
}

.l7-tile:hover {
    color: var(--l7-text);
    border-color: var(--l7-primary-100);
    box-shadow: var(--l7-shadow-md);
    transform: translateY(-2px);
}

.l7-tile-ico {
    flex: 0 0 42px;
    width: 42px;
    height: 42px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: var(--l7-primary);
    background-color: var(--l7-primary-050);
    border-radius: 11px;
    font-size: 1rem;
}

.l7-tile-body { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; gap: 3px; }
.l7-tile-body strong { color: var(--l7-heading); font-size: .92rem; font-weight: 600; }
.l7-tile-body small { color: var(--l7-muted); font-size: .78rem; line-height: 1.45; }

.l7-tile-count {
    flex: 0 0 auto;
    display: flex;
    flex-direction: column;
    align-items: center;
    padding-left: 14px;
    border-left: 1px solid var(--l7-border);
    color: var(--l7-heading);
    font-size: 1.1rem;
    font-weight: 700;
    line-height: 1.1;
}

.l7-tile-count em { color: var(--l7-muted); font-size: .64rem; font-style: normal; font-weight: 600; text-transform: uppercase; letter-spacing: .06em; }

.l7-tile-edit {
    position: absolute;
    top: 8px;
    right: 8px;
    padding: .2rem .5rem;
    background-color: var(--l7-surface);
    border: 1px solid var(--l7-border-strong);
    border-radius: 5px;
    color: var(--l7-muted);
    font-size: .7rem;
    cursor: pointer;
}

/* Lista de artigos com posição */
.l7-li-art { align-items: flex-start; }

.l7-li-rank {
    flex: 0 0 30px;
    width: 30px;
    height: 30px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background-color: var(--l7-bg);
    border-radius: 8px;
    color: var(--l7-muted);
    font-size: .8rem;
    font-weight: 700;
}

.l7-li-art:hover .l7-li-rank { background-color: var(--l7-primary-050); color: var(--l7-primary); }
.l7-li-art .l7-li-main small { display: block; line-height: 1.5; white-space: normal; }
.l7-li-go { flex: 0 0 auto; color: var(--l7-faint); font-size: .74rem; align-self: center; transition: transform .15s ease; }
.l7-li:hover .l7-li-go { color: var(--l7-primary); transform: translateX(3px); }

/* =========================================================================
   7.10j  Status da rede
   ========================================================================= */
.l7-statusbar {
    display: flex;
    align-items: center;
    gap: 14px;
    margin-bottom: 22px;
    padding: 16px 20px;
    border: 1px solid var(--l7-border);
    border-left: 4px solid var(--l7-success);
    border-radius: var(--l7-radius);
    background-color: var(--l7-surface);
    box-shadow: var(--l7-shadow);
}

.l7-statusbar.is-warn { border-left-color: var(--l7-warning); }

.l7-statusbar-ico {
    flex: 0 0 38px;
    width: 38px;
    height: 38px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background-color: var(--l7-success-bg);
    color: var(--l7-success);
    border-radius: 50%;
    font-size: .9rem;
}

.l7-statusbar.is-warn .l7-statusbar-ico { background-color: var(--l7-warning-bg); color: var(--l7-warning); }
.l7-statusbar-text { display: flex; flex-direction: column; gap: 2px; }
.l7-statusbar-text strong { color: var(--l7-heading); font-size: .92rem; }
.l7-statusbar-text small { color: var(--l7-muted); font-size: .8rem; }

/* Portas */
.l7-ports { flex: 0 0 auto; display: flex; gap: 8px; }

.l7-port {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 3px;
    min-width: 54px;
    padding: 7px 8px;
    background-color: var(--l7-surface-alt);
    border: 1px solid var(--l7-border);
    border-radius: 8px;
}

.l7-port em {
    color: var(--l7-muted);
    font-size: .6rem;
    font-style: normal;
    font-weight: 700;
    letter-spacing: .06em;
}

.l7-port > span { font-size: .8rem; line-height: 1; }
.l7-port .fa-check, .l7-port .text-success { color: var(--l7-success) !important; }
.l7-port .fa-times, .l7-port .text-danger { color: var(--l7-danger) !important; }
.l7-port .fa-spinner { color: var(--l7-faint); }

/* Ocorrências */
.l7-inc {
    margin-bottom: 14px;
    background-color: var(--l7-surface);
    border: 1px solid var(--l7-border);
    border-left: 4px solid var(--l7-primary);
    border-radius: var(--l7-radius);
    box-shadow: var(--l7-shadow);
    overflow: hidden;
}

.l7-inc.is-critical { border-left-color: var(--l7-danger); }
.l7-inc.is-high     { border-left-color: var(--l7-warning); }
.l7-inc.is-low      { border-left-color: var(--l7-success); }

.l7-inc-head {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 10px;
    padding: 14px 18px;
    background-color: var(--l7-surface-alt);
    border-bottom: 1px solid var(--l7-border);
}

.l7-inc-head h3 { flex: 1 1 auto; margin: 0; color: var(--l7-heading); font-size: .95rem; font-weight: 600; }

.l7-inc-prio {
    padding: .2em .55em;
    border-radius: 4px;
    font-size: .66rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .05em;
    background-color: var(--l7-primary-050);
    color: var(--l7-primary-700);
}

.l7-inc.is-critical .l7-inc-prio { background-color: var(--l7-danger-bg); color: var(--l7-danger); }
.l7-inc.is-high .l7-inc-prio     { background-color: var(--l7-warning-bg); color: var(--l7-warning); }
.l7-inc.is-low .l7-inc-prio      { background-color: var(--l7-success-bg); color: var(--l7-success); }

.l7-inc-body { padding: 18px; }

.l7-inc-you {
    display: flex;
    align-items: center;
    gap: 9px;
    margin-bottom: 14px;
    padding: 10px 14px;
    background-color: var(--l7-warning-bg);
    border-radius: var(--l7-radius-sm);
    color: #98610f;
    font-size: .82rem;
    font-weight: 600;
}

.l7-inc-target { margin: 0 0 10px; color: var(--l7-text); font-size: .86rem; }
.l7-inc-text { color: var(--l7-muted); font-size: .86rem; line-height: 1.65; }
.l7-inc-text > *:last-child { margin-bottom: 0; }

.l7-inc-foot {
    display: flex;
    flex-wrap: wrap;
    gap: 8px 20px;
    margin-top: 14px;
    padding-top: 12px;
    border-top: 1px solid var(--l7-border);
    color: var(--l7-faint);
    font-size: .76rem;
}

.l7-inc-foot i { margin-right: 4px; opacity: .7; }

@media (max-width: 991.98px) {
    .l7-tiles { grid-template-columns: minmax(0, 1fr); }
    .l7-srvrow .l7-ports { flex: 1 1 100%; padding-left: 58px; }
}

@media (max-width: 767.98px) {
    .l7-kbhero { padding: 30px 18px; }
    .l7-kbhero h1 { font-size: 1.28rem; }
    .l7-kbsearch { flex-wrap: wrap; }
    .l7-kbsearch button { width: 100%; padding: .7rem; }
    .l7-srvrow .l7-ports { padding-left: 0; }
    .l7-inc-head h3 { flex-basis: 100%; }
}

/* =========================================================================
   Carrinho — loja, configurar produto e revisar pedido

   Painel branco de canto reto, borda fina e sombra leve. Cabeçalho do painel
   com título e fio embaixo. Azul da marca nas ações; o azul-marinho do
   menu lateral só no destaque do total.
   ========================================================================= */
.ay { max-width: none; margin: 0; }
.ay *, .ay *::before, .ay *::after { box-sizing: border-box; }
.ay .w-hidden { display: none !important; }
.ay a { text-decoration: none; }

/* Painel base, compartilhado pelas telas do carrinho */
.ay-cats,
.ay-card,
.ay-wiz-main,
.ay-sum,
.ay-cart-list > .ay-cart-th,
.ay-box {
    background-color: var(--l7-surface);
    border: 1px solid var(--l7-border);
    border-radius: 0;
    box-shadow: var(--l7-shadow);
}

/* ---- Cabeçalho da página ---- */
.ay-head {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 16px 24px;
    margin: 0 0 24px;
}

.ay-head-txt { flex: 1 1 360px; min-width: 0; }

.ay-eyebrow {
    display: block;
    margin-bottom: 4px;
    color: var(--l7-primary);
    font-size: .78rem;
    font-weight: 600;
}

.ay-head h1 {
    margin: 0 0 6px;
    color: var(--l7-heading);
    font-size: 1.6rem;
    font-weight: 700;
    line-height: 1.2;
    letter-spacing: -.02em;
}

.ay-head p { margin: 0; max-width: 640px; color: var(--l7-muted); font-size: .88rem; }

.ay-head-cart {
    display: inline-flex;
    align-items: center;
    gap: 9px;
    padding: .62rem 1.1rem;
    background-color: var(--l7-surface);
    border: 1px solid var(--l7-border);
    border-radius: 3px;
    box-shadow: var(--l7-shadow);
    color: var(--l7-heading);
    font-size: .86rem;
    font-weight: 600;
}

.ay-head-cart i { color: var(--l7-primary); }

.ay-head-cart b {
    min-width: 20px;
    padding: 0 6px;
    background-color: var(--l7-primary);
    border-radius: 3px;
    color: #fff;
    font-size: .72rem;
    line-height: 20px;
    text-align: center;
}

.ay-head-cart:hover { border-color: var(--l7-primary); color: var(--l7-primary-700); }

.ay-head-link {
    padding: .5rem .9rem;
    background-color: var(--l7-surface);
    border: 1px solid var(--l7-border);
    border-radius: 3px;
    color: var(--l7-muted);
    font-size: .82rem;
    font-weight: 600;
    cursor: pointer;
}

.ay-head-link.is-danger:hover { border-color: var(--l7-danger); color: var(--l7-danger); }

/* ---- Avisos ---- */
.ay-warn {
    margin: 0 0 18px;
    padding: 13px 16px;
    background-color: var(--l7-warning-bg);
    border: 1px solid #f3dcb4;
    border-radius: 3px;
    color: #7a4f0e;
    font-size: .86rem;
}

.ay-warn.is-bad { background-color: var(--l7-danger-bg); border-color: #f5c9c8; color: #8d2d2c; }
.ay-warn.is-ok  { background-color: var(--l7-success-bg); border-color: #c4ead9; color: #0f6a4a; }
.ay-warn ul { margin: 6px 0 0; padding-left: 18px; }

/* =========================================================================
   Loja (products.tpl)
   ========================================================================= */
.ay-shop-grid {
    display: grid;
    grid-template-columns: 250px minmax(0, 1fr);
    gap: 24px;
    align-items: start;
    transition: opacity .15s ease;
}

.ay-shop-grid.is-loading { opacity: .45; pointer-events: none; }
.ay-shop-list { min-width: 0; }

/* Categorias: painel com a lista, como o menu do site */
.ay-cats {
    position: sticky;
    top: calc(var(--l7-topbar-h) + 16px);
    display: flex;
    flex-direction: column;
    padding: 8px;
}

.ay-cats-t {
    padding: 8px 12px 10px;
    color: var(--l7-faint);
    font-size: .7rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .08em;
}

.ay-cat {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    padding: .7rem .8rem;
    border-radius: 3px;
    color: var(--l7-text);
    font-size: .88rem;
    font-weight: 500;
    transition: background-color .12s ease, color .12s ease;
}

.ay-cat > span { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

.ay-cat b {
    flex: 0 0 auto;
    min-width: 22px;
    padding: 0 6px;
    background-color: var(--l7-bg);
    border-radius: 3px;
    color: var(--l7-muted);
    font-size: .72rem;
    font-weight: 600;
    line-height: 20px;
    text-align: center;
}

.ay-cat:hover { background-color: var(--l7-bg); color: var(--l7-heading); }
.ay-cat.on { background-color: var(--l7-primary-050); color: var(--l7-primary-700); font-weight: 600; }
.ay-cat.on b { background-color: var(--l7-primary); color: #fff; }

/* ---- Cartões de produto ---- */
.ay-cards {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
    gap: 20px;
}

.ay-card {
    position: relative;
    display: flex;
    flex-direction: column;
    min-width: 0;
    transition: border-color .15s ease, box-shadow .15s ease, transform .15s ease;
}

.ay-card:hover {
    border-color: var(--l7-primary-100);
    box-shadow: var(--l7-shadow-md);
    transform: translateY(-2px);
}

.ay-card-top {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 10px;
    padding: 20px 22px 14px;
    border-bottom: 1px solid var(--l7-border);
}

.ay-card-top h3 {
    margin: 0;
    color: var(--l7-heading);
    font-size: 1.08rem;
    font-weight: 700;
    line-height: 1.3;
    letter-spacing: -.01em;
}

.ay-stock {
    flex: 0 0 auto;
    padding: 0 8px;
    background-color: var(--l7-success-bg);
    border-radius: 3px;
    color: var(--l7-success);
    font-size: .7rem;
    font-weight: 600;
    line-height: 20px;
}

.ay-card-body { flex: 1 1 auto; padding: 12px 22px 16px; }

/* O que o plano inclui: rótulo à esquerda, valor à direita */
.ay-feat { margin: 0; padding: 0; list-style: none; }

.ay-feat li {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 12px;
    padding: 8px 0;
    border-bottom: 1px solid var(--l7-border);
    font-size: .86rem;
}

.ay-feat li:last-child { border-bottom: 0; }
.ay-feat li > span { color: var(--l7-muted); text-transform: capitalize; }
.ay-feat li > b { color: var(--l7-heading); font-weight: 600; text-align: right; }
.ay-feat li.is-solo { justify-content: flex-start; gap: 10px; }
.ay-feat li.is-solo > i { color: var(--l7-success); font-size: .72rem; }
.ay-feat li.is-solo > b { text-align: left; font-weight: 500; }

.ay-desc { color: var(--l7-muted); font-size: .86rem; line-height: 1.8; }

.ay-card-foot {
    padding: 16px 22px 20px;
    background-color: var(--l7-surface-alt);
    border-top: 1px solid var(--l7-border);
    border-radius: 0;
}

.ay-card-price { display: flex; flex-direction: column; margin-bottom: 14px; }

.ay-card-price small { color: var(--l7-faint); font-size: .72rem; font-weight: 600; }

.ay-card-price b {
    color: var(--l7-heading);
    font-size: 1.55rem;
    font-weight: 700;
    line-height: 1.2;
    letter-spacing: -.02em;
    font-variant-numeric: tabular-nums;
}

.ay-card-price span { color: var(--l7-muted); font-size: .8rem; }
.ay-card-price em { margin-top: 3px; color: var(--l7-warning); font-size: .74rem; font-style: normal; font-weight: 600; }

.ay-plan-go {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    width: 100%;
    padding: .72rem 1rem;
    background-color: var(--l7-primary);
    border-radius: 3px;
    color: #fff;
    font-size: .88rem;
    font-weight: 600;
    transition: background-color .12s ease;
}

.ay-plan-go i { font-size: .72rem; transition: transform .15s ease; }
.ay-plan-go:hover,
.ay-card:hover .ay-plan-go { background-color: var(--l7-primary-700); color: #fff; }
.ay-card:hover .ay-plan-go i { transform: translateX(3px); }

/* O cartão inteiro é clicável, usando o link que já existe no botão. */
.ay-card .ay-plan-go::after { content: ""; position: absolute; top: 0; right: 0; bottom: 0; left: 0; }

.ay-none {
    grid-column: 1 / -1;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
    padding: 48px 20px;
    background-color: var(--l7-surface);
    border: 1px dashed var(--l7-border-strong);
    border-radius: 0;
    color: var(--l7-muted);
    font-size: .9rem;
    text-align: center;
}

.ay-none a { font-weight: 600; }

/* Atalhos de domínio, no pé da loja */
.ay-quick { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 24px; }

.ay-quick a {
    padding: .55rem 1rem;
    background-color: var(--l7-surface);
    border: 1px solid var(--l7-border);
    border-radius: 3px;
    color: var(--l7-text);
    font-size: .84rem;
    font-weight: 500;
}

.ay-quick a:hover { border-color: var(--l7-primary); color: var(--l7-primary-700); }

/* =========================================================================
   Configurar produto (configureproduct.tpl)
   ========================================================================= */
.ay-wiz { padding-bottom: 96px; }

.ay-wiz-grid {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 340px;
    gap: 24px;
    align-items: start;
}

.ay-wiz-main { min-width: 0; overflow: hidden; }

/* Passos: faixa no topo do painel */
.ay-track {
    display: flex;
    gap: 6px;
    padding: 10px 14px;
    overflow-x: auto;
    background-color: var(--l7-surface-alt);
    border-bottom: 1px solid var(--l7-border);
}

.ay-step {
    flex: 0 0 auto;
    display: inline-flex;
    align-items: center;
    gap: 9px;
    padding: .5rem .85rem;
    background: none;
    border: 0;
    border-radius: 3px;
    color: var(--l7-muted);
    font-size: .85rem;
    font-weight: 600;
    white-space: nowrap;
    cursor: pointer;
}

.ay-step-i {
    width: 22px;
    height: 22px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background-color: var(--l7-surface);
    border: 1px solid var(--l7-border-strong);
    border-radius: 50%;
    font-size: .72rem;
    font-weight: 700;
}

.ay-step:hover { color: var(--l7-heading); }
.ay-step.on { background-color: var(--l7-surface); color: var(--l7-primary-700); box-shadow: var(--l7-shadow); }
.ay-step.on .ay-step-i { background-color: var(--l7-primary); border-color: var(--l7-primary); color: #fff; }
.ay-step.ok { color: var(--l7-text); }
.ay-step.ok .ay-step-i { background-color: var(--l7-success); border-color: var(--l7-success); color: #fff; font-size: 0; }
.ay-step.ok .ay-step-i::before { content: "\2713"; font-size: .72rem; }

/* Passo à frente do que o cliente já alcançou: travado até ele clicar em Avançar */
.ay-step:disabled { opacity: .45; cursor: not-allowed; }
.ay-step:disabled:hover { color: var(--l7-muted); }

/* "Escolha uma das opções" quando tenta avançar sem marcar nada */
.ay-pane-err { margin: 14px 0 0; color: var(--l7-danger); font-size: .82rem; font-weight: 600; }

.ay-pane { display: none; padding: 24px; }
.ay-pane.on { display: block; animation: ayIn .2s ease; }

@keyframes ayIn { from { opacity: 0; transform: translateY(4px); } to { opacity: 1; transform: none; } }

.ay-pane h2 {
    margin: 0 0 18px;
    color: var(--l7-heading);
    font-size: 1.05rem;
    font-weight: 700;
}

/* ---- Opções selecionáveis (período, opções, adicionais) ---- */
.ay-choices { display: flex; flex-direction: column; gap: 10px; }

.ay-choice {
    position: relative;
    display: flex;
    align-items: center;
    gap: 14px;
    margin: 0;
    padding: 14px 16px;
    background-color: var(--l7-surface);
    border: 1px solid var(--l7-border-strong);
    border-radius: 3px;
    font-weight: 400;
    cursor: pointer;
    transition: border-color .12s ease, background-color .12s ease, box-shadow .12s ease;
}

.ay-choice:hover { border-color: var(--l7-primary); }
.ay-choice.on { background-color: var(--l7-primary-050); border-color: var(--l7-primary); box-shadow: 0 0 0 3px var(--l7-primary-100); }

/* O input real fica escondido; o iCheck do WHMCS, quando roda de novo
   depois da troca de período, embrulha o input num <div> — some junto. */
.ay-choice input,
.ay-sw input { position: absolute; width: 1px; height: 1px; opacity: 0; pointer-events: none; }

.ay-choice [class*="iradio_"],
.ay-choice [class*="icheckbox_"],
.ay-sw [class*="icheckbox_"] {
    position: absolute !important;
    width: 1px !important;
    height: 1px !important;
    overflow: hidden;
    opacity: 0;
}

.ay-mark {
    position: relative;
    flex: 0 0 18px;
    width: 18px;
    height: 18px;
    background-color: #fff;
    border: 1.5px solid var(--l7-border-strong);
    border-radius: 50%;
}

.ay-choice.on .ay-mark { border-color: var(--l7-primary); }

.ay-choice.on .ay-mark::after {
    content: "";
    position: absolute;
    top: 3px;
    right: 3px;
    bottom: 3px;
    left: 3px;
    background-color: var(--l7-primary);
    border-radius: 50%;
}

.ay-choice.is-check .ay-mark { border-radius: 4px; }
.ay-choice.is-check.on .ay-mark { background-color: var(--l7-primary); }

.ay-choice.is-check.on .ay-mark::after {
    top: 1px;
    right: auto;
    bottom: auto;
    left: 5px;
    width: 5px;
    height: 10px;
    background: none;
    border: solid #fff;
    border-width: 0 2px 2px 0;
    border-radius: 0;
    transform: rotate(45deg);
}

.ay-choice input:focus-visible ~ .ay-mark { outline: 2px solid var(--l7-primary); outline-offset: 2px; }

.ay-choice-n { flex: 1 1 auto; min-width: 0; color: var(--l7-heading); font-size: .9rem; font-weight: 600; }
.ay-choice-n small { display: block; margin-top: 2px; color: var(--l7-muted); font-size: .78rem; font-weight: 400; line-height: 1.5; }
.ay-choice-p { flex: 0 0 auto; color: var(--l7-heading); font-size: .9rem; font-weight: 700; text-align: right; font-variant-numeric: tabular-nums; }

/* ---- Sistema operacional ---- */
.ay-osgrid { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 12px; }

.ay-oscard {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 10px;
    min-height: 120px;
    padding: 18px 12px 14px;
    background-color: var(--l7-surface);
    border: 1px solid var(--l7-border-strong);
    border-radius: 3px;
    cursor: pointer;
    transition: border-color .12s ease, background-color .12s ease, box-shadow .12s ease;
}

.ay-oscard:hover { border-color: var(--l7-primary); }
.ay-oscard.on { background-color: var(--l7-primary-050); border-color: var(--l7-primary); box-shadow: 0 0 0 3px var(--l7-primary-100); }
.ay-oscard-i { height: 44px; display: flex; align-items: center; justify-content: center; }
.ay-oscard-i img { max-width: 80px; max-height: 44px; width: auto; object-fit: contain; }
.ay-oscard-n { color: var(--l7-text); font-size: .82rem; font-weight: 600; line-height: 1.35; text-align: center; overflow-wrap: anywhere; }
.ay-oscard.on .ay-oscard-n { color: var(--l7-primary-700); }

/* ---- Formulário ---- */
.ay-form { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px 24px; }
.ay-field { display: flex; flex-direction: column; }
.ay-field label { margin-bottom: 6px; color: var(--l7-heading); font-size: .82rem; font-weight: 600; }

.ay-field input:not([type=checkbox]):not([type=radio]),
.ay-field select,
.ay-field textarea {
    width: 100%;
    min-height: 44px;
    padding: .55rem .85rem;
    background-color: #fff;
    border: 1px solid var(--l7-border-strong);
    border-radius: 3px;
    color: var(--l7-text);
    font-size: .9rem;
    transition: border-color .12s ease, box-shadow .12s ease;
}

.ay-field input:focus,
.ay-field select:focus,
.ay-field textarea:focus { outline: 0; border-color: var(--l7-primary); box-shadow: 0 0 0 3px var(--l7-primary-100); }

.ay-field small { margin-top: 6px; color: var(--l7-muted); font-size: .76rem; }
.ay-field .ay-err { margin-top: 6px; color: var(--l7-danger); font-size: .78rem; font-weight: 600; }
.ay-field.bad input { border-color: var(--l7-danger); }
.ay-field.bad input:focus { box-shadow: 0 0 0 3px var(--l7-danger-bg); }
.ay-field.bad small { display: none; }

.ay-pwwrap { position: relative; display: block; }
.ay-pwwrap input { padding-right: 46px !important; }

.ay-eye {
    position: absolute;
    top: 50%;
    right: 4px;
    padding: 7px 10px;
    background: none;
    border: 0;
    color: var(--l7-faint);
    transform: translateY(-50%);
    cursor: pointer;
}

.ay-eye:hover { color: var(--l7-muted); }

.ay-meter { display: flex; gap: 4px; height: 4px; margin-top: 8px; }
.ay-meter em { order: -1; }
.ay-meter em,
.ay-meter::before,
.ay-meter::after { content: ""; flex: 1 1 auto; height: 100%; background-color: var(--l7-border); border-radius: 2px; }
.ay-meter[data-s="1"] em { background-color: var(--l7-danger); }
.ay-meter[data-s="2"] em, .ay-meter[data-s="2"]::before { background-color: var(--l7-warning); }
.ay-meter[data-s="3"] em, .ay-meter[data-s="3"]::before, .ay-meter[data-s="3"]::after { background-color: var(--l7-primary); }
.ay-meter[data-s="4"] em, .ay-meter[data-s="4"]::before, .ay-meter[data-s="4"]::after { background-color: var(--l7-success); }

/* Liga/desliga */
.ay-sw { position: relative; display: inline-flex; align-items: center; gap: 12px; margin: 0; font-weight: 400; cursor: pointer; }
.ay-sw-t { position: relative; width: 42px; height: 24px; background-color: var(--l7-border-strong); border-radius: 999px; transition: background-color .15s ease; }
.ay-sw-t em { position: absolute; top: 3px; left: 3px; width: 18px; height: 18px; background-color: #fff; border-radius: 50%; transition: transform .15s ease; }
.ay-sw.on .ay-sw-t { background-color: var(--l7-primary); }
.ay-sw.on .ay-sw-t em { transform: translateX(18px); }
.ay-sw-n { color: var(--l7-text); font-size: .9rem; }

/* Quantidade */
.ay-stepper { display: inline-flex; align-items: center; }

.ay-stepper-b {
    width: 40px;
    height: 44px;
    background-color: #fff;
    border: 1px solid var(--l7-border-strong);
    color: var(--l7-heading);
    font-size: 1.05rem;
    font-weight: 700;
    cursor: pointer;
}

.ay-stepper-b:first-child { border-radius: 3px 0 0 3px; }
.ay-stepper-b:last-of-type { border-radius: 0 3px 3px 0; }
.ay-stepper-b:hover { color: var(--l7-primary); }

.ay-stepper input {
    width: 72px;
    height: 44px;
    border: 1px solid var(--l7-border-strong);
    border-right: 0;
    border-left: 0;
    color: var(--l7-heading);
    font-size: .92rem;
    font-weight: 700;
    text-align: center;
}

.ay-stepper input:focus { outline: 0; }
.ay-stepper > span { margin-left: 12px; color: var(--l7-muted); font-size: .86rem; }

/* ---- Resumo ao lado (configurar) ---- */
.ay-wiz-side .ay-feat { margin: 0 0 4px; }
.ay-wiz-side .ay-desc { margin-bottom: 8px; }
.ay-wiz-cost { position: relative; }
.ay-wiz-cost #producttotal { display: block; }
.ay-wiz-cost .loader { position: absolute; top: -2px; right: 0; color: var(--l7-faint); font-size: .8rem; }

/* O nome do produto já está no título da página. */
.ay-wiz-side .ay-osum-head { display: none; }

.ay-osum { display: flex; flex-direction: column; }
.ay-osum-rows { display: flex; flex-direction: column; }

.ay-osum-row {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 14px;
    padding: 6px 0;
    font-size: .86rem;
}

.ay-osum-row > span { min-width: 0; color: var(--l7-muted); }
.ay-osum-row > b { color: var(--l7-heading); font-weight: 600; white-space: nowrap; font-variant-numeric: tabular-nums; }
.ay-osum-row em { color: var(--l7-heading); font-style: normal; font-weight: 600; }
.ay-osum-row.is-sub > span { padding-left: 12px; }
.ay-osum .summary-totals { margin-top: 6px; padding-top: 6px; border-top: 1px solid var(--l7-border); }

/* Total: faixa azul-marinho, a mesma cor do menu lateral */
.ay-osum-total,
.ay-sum-now {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    margin: 14px -22px 0;
    padding: 16px 22px;
    background: linear-gradient(135deg, var(--l7-nav-bg) 0%, var(--l7-nav-bg-2) 100%);
    color: #fff;
}

.ay-osum-total > span,
.ay-sum-now span { color: var(--l7-nav-text); font-size: .8rem; font-weight: 500; }

.ay-osum-total > b,
.ay-sum-now b {
    color: #fff;
    font-size: 1.45rem;
    font-weight: 700;
    letter-spacing: -.02em;
    white-space: nowrap;
    font-variant-numeric: tabular-nums;
}

/* No configurar a faixa fecha o painel: sem nada embaixo dela. */
.ay-wiz-side { padding-bottom: 0; overflow: hidden; }
.ay-wiz-side .ay-osum-total { margin-bottom: 0; }

/* ---- Rodapé fixo com Voltar / Avançar ---- */
.ay-bar {
    position: fixed;
    left: var(--l7-sidenav-w);
    right: 0;
    bottom: 0;
    z-index: 1020;
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 12px 28px;
    background-color: #fff;
    border-top: 1px solid var(--l7-border);
    box-shadow: 0 -4px 20px rgba(16, 32, 52, .06);
}

body:not(.l7-has-sidenav) .ay-bar { left: 0; }

.ay-bar-back,
.ay-bar-next,
.ay-bar-done {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: .65rem 1.3rem;
    border: 1px solid transparent;
    border-radius: 3px;
    font-size: .88rem;
    font-weight: 600;
    cursor: pointer;
    transition: background-color .12s ease, color .12s ease, border-color .12s ease;
}

.ay-bar-back { background-color: #fff; border-color: var(--l7-border-strong); color: var(--l7-text); }
.ay-bar-back:hover:not(:disabled) { border-color: var(--l7-primary); color: var(--l7-primary-700); }
.ay-bar-back:disabled { opacity: .4; cursor: not-allowed; }

.ay-bar-next,
.ay-bar-done { margin-left: auto; background-color: var(--l7-primary); color: #fff; }
.ay-bar-next:hover { background-color: var(--l7-primary-700); }
.ay-bar-done { background-color: var(--l7-success); }
.ay-bar-done:hover { background-color: #13905f; }
.ay-bar i { font-size: .72rem; }

.ay-bar-mid { flex: 1 1 auto; text-align: center; }
.ay-bar-mid em { color: var(--l7-muted); font-size: .82rem; font-style: normal; }

/* Configurar: a barra fica dentro do quadro dos passos, embaixo do conteúdo.
   Presa no rodapé da janela ela sumia em algumas telas. */
.ay-bar.ay-bar-in {
    position: static;
    z-index: auto;
    padding: 14px 24px;
    background-color: var(--l7-surface-alt);
    box-shadow: none;
}
.ay-wiz { padding-bottom: 0; }

/* =========================================================================
   Revisar pedido (viewcart.tpl)
   ========================================================================= */
.ay-cart-grid {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 340px;
    gap: 24px;
    align-items: start;
}

.ay-cart-list { min-width: 0; }

/* Cabeçalho + itens formam um painel só */
.ay-cart-list > .ay-cart-th {
    display: flex;
    justify-content: space-between;
    padding: 13px 22px;
    border-bottom: 0;
    border-radius: 0;
    background-color: var(--l7-surface-alt);
    box-shadow: none;
    color: var(--l7-muted);
    font-size: .74rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: .06em;
}

.ay-cart-items {
    margin: 0;
    padding: 0 22px;
    background-color: var(--l7-surface);
    border: 1px solid var(--l7-border);
    border-radius: 0;
    box-shadow: var(--l7-shadow);
}



.ay-it {
    display: flex;
    align-items: flex-start;
    gap: 24px;
    padding: 20px 0;
    border-top: 1px solid var(--l7-border);
}

.ay-it:first-child { border-top: 0; }

/* Adicional de um produto: recuado, preso ao produto */
.ay-it.is-child { margin-left: 16px; padding: 12px 0 12px 16px; border-top-style: dashed; box-shadow: inset 2px 0 0 var(--l7-primary-100); }

.ay-it-main { flex: 1 1 auto; min-width: 0; }

.ay-it-kind {
    display: inline-block;
    margin-bottom: 6px;
    padding: 0 8px;
    background-color: var(--l7-primary-050);
    border-radius: 3px;
    color: var(--l7-primary-700);
    font-size: .7rem;
    font-weight: 600;
    line-height: 20px;
}

.ay-it-main h3 { margin: 0; color: var(--l7-heading); font-size: 1.02rem; font-weight: 700; line-height: 1.35; }
.ay-it.is-child h3 { font-size: .9rem; }
.ay-it-sub { margin: 3px 0 0; color: var(--l7-muted); font-size: .84rem; }
.ay-it-sub b { margin: 0 6px; font-weight: 400; opacity: .5; }
.ay-it-dom { color: var(--l7-text); font-weight: 600; }

.ay-chips { display: flex; flex-wrap: wrap; gap: 6px; margin: 10px 0 0; padding: 0; list-style: none; }

.ay-chips li {
    padding: .25em .65em;
    background-color: var(--l7-bg);
    border-radius: 3px;
    font-size: .78rem;
}

.ay-chips em { margin-right: 5px; color: var(--l7-muted); font-style: normal; }
.ay-chips b { color: var(--l7-heading); font-weight: 600; }

.ay-it-credit {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: 7px;
    margin: 10px 0 0;
    padding: 8px 12px;
    background-color: var(--l7-success-bg);
    border-radius: 3px;
    color: #0f6a4a;
    font-size: .78rem;
}

.ay-it-credit b { margin-left: auto; font-weight: 700; }

.ay-it-acts { display: flex; gap: 8px; margin-top: 12px; }

.ay-it-acts a,
.ay-it-acts button {
    padding: .3rem .7rem;
    background-color: var(--l7-surface);
    border: 1px solid var(--l7-border);
    border-radius: 3px;
    color: var(--l7-muted);
    font-size: .78rem;
    font-weight: 600;
    cursor: pointer;
}

.ay-it-acts a:hover { border-color: var(--l7-primary); color: var(--l7-primary-700); }
.ay-it-acts button:hover { border-color: var(--l7-danger); color: var(--l7-danger); }

.ay-it-cost { flex: 0 0 auto; display: flex; flex-direction: column; align-items: flex-end; gap: 2px; min-width: 120px; text-align: right; }
.ay-it-val { color: var(--l7-heading); font-size: 1.1rem; font-weight: 700; font-variant-numeric: tabular-nums; }
.ay-it-cyc { color: var(--l7-muted); font-size: .78rem; }
.ay-it-fee { margin-top: 2px; color: var(--l7-warning); font-size: .74rem; font-weight: 600; }
.ay-it-note { margin-top: 2px; color: var(--l7-faint); font-size: .72rem; }

.ay-qty { display: inline-flex; align-items: center; gap: 6px; margin-bottom: 6px; }
.ay-qty input { width: 60px; height: 32px; padding: 0 8px; border: 1px solid var(--l7-border-strong); border-radius: 3px; font-size: .84rem; font-weight: 700; text-align: center; }
.ay-qty button { height: 32px; padding: 0 .7rem; background-color: #fff; border: 1px solid var(--l7-border-strong); border-radius: 3px; color: var(--l7-muted); font-size: .74rem; cursor: pointer; }
.ay-qty button:hover { border-color: var(--l7-primary); color: var(--l7-primary); }

.ay-years .dropdown-toggle { padding: .2rem .55rem; background-color: #fff; border: 1px solid var(--l7-border-strong); border-radius: 3px; color: var(--l7-muted); font-size: .76rem; cursor: pointer; }

.ay-cart-none { display: flex; flex-direction: column; align-items: center; gap: 12px; padding: 48px 0; color: var(--l7-muted); font-size: .92rem; text-align: center; }
.ay-cart-none .ay-plan-go { width: auto; padding: .65rem 1.4rem; }

/* ---- Cupom e impostos ---- */
.ay-box { margin-top: 20px; padding: 18px 22px 20px; }
.ay-box h4 { margin: 0 0 12px; color: var(--l7-heading); font-size: .92rem; font-weight: 700; }

.ay-coupon { display: flex; gap: 10px; }

.ay-coupon input {
    flex: 1 1 auto;
    min-width: 0;
    min-height: 44px;
    padding: .55rem .85rem;
    background-color: #fff;
    border: 1px solid var(--l7-border-strong);
    border-radius: 3px;
    font-size: .88rem;
}

.ay-coupon input:focus { outline: 0; border-color: var(--l7-primary); box-shadow: 0 0 0 3px var(--l7-primary-100); }

.ay-coupon button {
    flex: 0 0 auto;
    padding: 0 1.3rem;
    background-color: var(--l7-primary);
    border: 0;
    border-radius: 3px;
    color: #fff;
    font-size: .86rem;
    font-weight: 600;
    cursor: pointer;
}

.ay-coupon button:hover { background-color: var(--l7-primary-700); }

.ay-coupon-on {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 10px;
    padding: 12px 16px;
    background-color: var(--l7-success-bg);
    border-radius: 3px;
    color: #0f6a4a;
    font-size: .84rem;
}

.ay-coupon-on a { margin-left: auto; color: var(--l7-danger); font-size: .8rem; font-weight: 600; }

.ay-taxform { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)) auto; gap: 12px; align-items: end; }
.ay-taxform button { height: 44px; padding: 0 1.2rem; background-color: #fff; border: 1px solid var(--l7-border-strong); border-radius: 3px; color: var(--l7-heading); font-size: .84rem; font-weight: 600; cursor: pointer; }
.ay-taxform button:hover { border-color: var(--l7-primary); color: var(--l7-primary-700); }

/* ---- Resumo (carrinho, configurar e finalizar) ---- */
.ay-sum {
    position: sticky;
    top: calc(var(--l7-topbar-h) + 16px);
    padding: 0 22px 20px;
    overflow: hidden;
}

.ay-sum h2 {
    margin: 0 -22px 14px;
    padding: 16px 22px 14px;
    border-bottom: 1px solid var(--l7-border);
    color: var(--l7-heading);
    font-size: 1rem;
    font-weight: 700;
}

.ay-sum .loader { position: absolute; top: 18px; right: 22px; color: var(--l7-faint); font-size: .8rem; }

.ay-sum-l { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; padding: 6px 0; font-size: .88rem; }
.ay-sum-l span { color: var(--l7-muted); }
.ay-sum-l b { color: var(--l7-heading); font-weight: 600; white-space: nowrap; font-variant-numeric: tabular-nums; }
.ay-sum-l.is-off b { color: var(--l7-success); }

.ay-sum-next { margin-top: 14px; padding-bottom: 12px; border-bottom: 1px solid var(--l7-border); }
.ay-sum-next.w-hidden { display: none !important; }
.ay-sum-next-t { display: block; margin-bottom: 6px; color: var(--l7-muted); font-size: .76rem; font-weight: 600; }
.ay-sum-next .recurring-charges { display: flex; flex-direction: column; gap: 3px; color: var(--l7-muted); font-size: .82rem; }
.ay-sum-next .cost { color: var(--l7-heading); font-weight: 600; }

.ay-checkout {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    margin-top: 18px;
    padding: .85rem 1rem;
    background-color: var(--l7-success);
    border-radius: 3px;
    color: #fff;
    font-size: .95rem;
    font-weight: 600;
}

.ay-checkout:hover { background-color: #13905f; color: #fff; }
.ay-checkout.disabled { background-color: var(--l7-border-strong); color: var(--l7-muted); pointer-events: none; }
.ay-checkout i { font-size: .76rem; }

.ay-keep { display: block; margin-top: 12px; color: var(--l7-muted); font-size: .84rem; font-weight: 500; text-align: center; }
.ay-keep:hover { color: var(--l7-primary-700); }

.ay-express { margin-top: 16px; }
.ay-express .separator { margin: 9px 0; color: var(--l7-faint); font-size: .7rem; text-align: center; }

/* ---- Modais de confirmação ---- */
.ay-modal { border: 0; border-radius: 0; overflow: hidden; }
.ay-modal .modal-body { padding: 26px 24px 18px; text-align: center; }
.ay-modal h4 { margin: 0 0 6px; color: var(--l7-heading); font-size: 1.05rem; font-weight: 700; }
.ay-modal p { margin: 0; color: var(--l7-muted); font-size: .88rem; }
.ay-modal .modal-footer { justify-content: center; gap: 10px; padding: 14px 24px 20px; background-color: var(--l7-surface-alt); border-top: 1px solid var(--l7-border); }
.ay-modal .modal-footer .ay-bar-next { margin-left: 0; }

/* ---- Responsivo ---- */
@media (max-width: 1199.98px) {
    .ay-cart-grid,
    .ay-wiz-grid { grid-template-columns: minmax(0, 1fr); }
    .ay-sum { position: static; }
}

@media (max-width: 991.98px) {
    .ay-bar { left: 0; }
    .ay-shop-grid { grid-template-columns: minmax(0, 1fr); gap: 16px; }
    .ay-cats { position: static; flex-direction: row; flex-wrap: wrap; gap: 4px; }
    .ay-cats-t { display: none; }
    .ay-cat { flex: 0 0 auto; }
}

@media (max-width: 767.98px) {
    .ay-head h1 { font-size: 1.35rem; }
    .ay-form { grid-template-columns: minmax(0, 1fr); }
    .ay-osgrid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .ay-pane { padding: 20px 16px; }
    .ay-step-t { display: none; }
    .ay-step.on .ay-step-t { display: inline; }
    .ay-bar { gap: 10px; padding: 10px 16px; }
    .ay-bar-back, .ay-bar-next, .ay-bar-done { padding: .6rem 1rem; font-size: .84rem; }
    .ay-bar-mid { display: none; }
    .ay-bar.ay-bar-in { padding: 12px 16px; }
    .ay-cart-items { padding: 0 16px; }
    .ay-it { flex-wrap: wrap; gap: 10px; }
    .ay-it-cost { flex: 1 1 100%; flex-direction: row; flex-wrap: wrap; align-items: baseline; justify-content: flex-start; gap: 4px 10px; text-align: left; }
    .ay-coupon { flex-wrap: wrap; }
    .ay-coupon button { width: 100%; padding: .75rem; }
    .ay-taxform { grid-template-columns: minmax(0, 1fr); }
}

/* =========================================================================
   Finalizar compra (checkout.tpl)
   Reaproveita .l7-grid / .l7-f / .l7-lab / .l7-ctl / .l7-pw* do cadastro,
   para a ficha ser a mesma no site inteiro.
   ========================================================================= */
.ay-co-top { margin-bottom: 20px; }

.ay-co-top h1 {
    margin: 0 0 4px;
    color: var(--l7-heading);
    font-size: 1.6rem;
    font-weight: 800;
    letter-spacing: -.03em;
}

.ay-co-top p { margin: 0; color: var(--l7-muted); font-size: .86rem; }

.ay-co-grid {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 340px;
    gap: 20px;
    align-items: start;
}

.ay-co-main { min-width: 0; display: flex; flex-direction: column; gap: 14px; }

/* ---- Passo ---- */
.ay-cs {
    background-color: #fff;
    border: 1px solid var(--l7-border);
    border-radius: 0;
    box-shadow: var(--l7-shadow);
    overflow: hidden;
}

.ay-cs-h {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    padding: 18px 20px;
    border-bottom: 1px solid var(--l7-border);
}

.ay-cs-n {
    flex: 0 0 auto;
    width: 26px;
    height: 26px;
    margin-top: 1px;
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: var(--l7-primary-050);
    color: var(--l7-primary);
    border-radius: 8px;
    font-size: .78rem;
    font-weight: 700;
}

.ay-cs-h h2 { margin: 0 0 2px; color: var(--l7-heading); font-size: .97rem; font-weight: 700; }
.ay-cs-h p { margin: 0; color: var(--l7-muted); font-size: .78rem; }
.ay-cs-b { padding: 20px; }

/* Rótulo de subgrupo dentro do passo */
.ay-cs-lbl {
    display: block;
    margin: 22px 0 12px;
    padding-bottom: 8px;
    border-bottom: 1px dashed var(--l7-border);
    color: var(--l7-faint);
    font-size: .68rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .1em;
}

.ay-cs-b > .l7-grid:first-child + .ay-cs-lbl,
.ay-cs-b > .ay-cs-lbl:first-child { margin-top: 0; }

/* Troca "já sou cliente" / "criar conta" */
.ay-cs-switch { margin-left: auto; }

.ay-switch {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    padding: .42rem .85rem;
    background-color: var(--l7-surface-alt);
    border: 1px solid var(--l7-border-strong);
    border-radius: var(--l7-radius-pill);
    color: var(--l7-heading);
    font-size: .78rem;
    font-weight: 600;
    cursor: pointer;
    transition: border-color .14s ease, color .14s ease;
}

.ay-switch:hover { border-color: var(--l7-primary); color: var(--l7-primary); }
.ay-switch i { font-size: .72rem; color: var(--l7-primary); }

.ay-btn-line {
    display: inline-flex;
    align-items: center;
    padding: .55rem 1.4rem;
    background-color: var(--l7-primary);
    border: 0;
    border-radius: 9px;
    color: #fff;
    font-size: .85rem;
    font-weight: 700;
    cursor: pointer;
}

.ay-btn-line:hover { background-color: var(--l7-primary-600); color: #fff; }
.ay-btn-line.disabled { opacity: .6; cursor: default; }

.ay-linked { margin-bottom: 4px; }

/* ---- Rádios e caixas: o iCheck embrulha o input num <div>.
       Escondemos o sprite e desenhamos o controle no próprio wrapper. ---- */
.ay-ck .iradio_square-blue,
.ay-ck .icheckbox_square-blue {
    flex: 0 0 18px;
    width: 18px !important;
    height: 18px !important;
    position: relative;
    background: none !important;
    border: 2px solid var(--l7-border-strong);
    border-radius: 50%;
    transition: border-color .14s ease;
}

.ay-ck .icheckbox_square-blue { border-radius: 5px; }

.ay-ck .iradio_square-blue.checked,
.ay-ck .icheckbox_square-blue.checked { border-color: var(--l7-primary); }

.ay-ck .iradio_square-blue.checked::after {
    content: "";
    position: absolute;
    top: 2px; right: 2px; bottom: 2px; left: 2px;
    background-color: var(--l7-primary);
    border-radius: 50%;
}

.ay-ck .icheckbox_square-blue.checked::after {
    content: "";
    position: absolute;
    top: 0; left: 4px;
    width: 5px;
    height: 10px;
    border: solid var(--l7-primary);
    border-width: 0 2px 2px 0;
    transform: rotate(42deg);
}

.ay-ck .iradio_square-blue.disabled,
.ay-ck .icheckbox_square-blue.disabled { opacity: .45; }

/* ---- Escolha de conta ---- */
.ay-accs { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; margin-bottom: 4px; }

.ay-acc {
    display: block;
    margin: 0;
    padding: 14px 16px;
    background-color: var(--l7-surface-alt);
    border: 1px solid var(--l7-border);
    border-radius: 10px;
    font-weight: 400;
    cursor: pointer;
    transition: border-color .14s ease, background-color .14s ease;
}

.ay-acc:hover { border-color: var(--l7-primary-100); }
.ay-acc.active { background-color: #fff; border-color: var(--l7-primary); }

.ay-acc-b { display: flex; flex-direction: column; gap: 4px; }
.ay-acc-b strong { color: var(--l7-heading); font-size: .85rem; font-weight: 700; }
.ay-acc-addr { color: var(--l7-muted); font-size: .75rem; line-height: 1.6; }

.ay-acc > div[class*="icheck"],
.ay-acc > div[class*="iradio"] { float: left; margin-right: 10px; }

.ay-tag {
    display: inline-block;
    margin-left: 6px;
    padding: .12em .5em;
    background-color: var(--l7-primary-050);
    border-radius: 5px;
    color: var(--l7-primary-700);
    font-size: .64rem;
    font-style: normal;
    font-weight: 700;
    letter-spacing: .04em;
}

.ay-tag.is-grey { background-color: var(--l7-bg); color: var(--l7-muted); }

/* ---- Linha selecionável genérica (crédito, cartão novo) ---- */
.ay-pick {
    display: flex;
    align-items: center;
    gap: 11px;
    margin: 0 0 8px;
    padding: 12px 14px;
    background-color: var(--l7-surface-alt);
    border: 1px solid var(--l7-border);
    border-radius: 9px;
    color: var(--l7-text);
    font-size: .84rem;
    font-weight: 400;
    cursor: pointer;
}

.ay-pick:hover { border-color: var(--l7-primary-100); }
.ay-pick-b { flex: 1 1 auto; min-width: 0; }

.ay-credit { margin-bottom: 20px; }
.ay-credit > p { margin: 0 0 10px; color: var(--l7-heading); font-size: .84rem; font-weight: 600; }

/* ---- Formas de pagamento ---- */
.ay-gws { display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); gap: 10px; }

.ay-gw {
    display: flex;
    align-items: center;
    gap: 11px;
    margin: 0;
    padding: 14px 16px;
    background-color: #fff;
    border: 1px solid var(--l7-border-strong);
    border-radius: 10px;
    font-weight: 400;
    cursor: pointer;
    transition: border-color .14s ease, box-shadow .14s ease;
}

.ay-gw:hover { border-color: var(--l7-primary); }
.ay-gw:has(.payment-methods:checked) { border-color: var(--l7-primary); box-shadow: 0 0 0 3px var(--l7-primary-100); }

.ay-gw-b { display: flex; align-items: center; gap: 10px; min-width: 0; }
.ay-gw-b i { color: var(--l7-primary); font-size: .95rem; }
.ay-gw-b b { color: var(--l7-heading); font-size: .85rem; font-weight: 700; }

/* ---- Cartões salvos ---- */
.ay-cc { margin-top: 18px; }
.ay-pms { display: flex; flex-direction: column; gap: 8px; margin-bottom: 14px; }

.ay-pm {
    display: block;
    padding: 12px 14px;
    background-color: var(--l7-surface-alt);
    border: 1px solid var(--l7-border);
    border-radius: 9px;
    cursor: pointer;
}

.ay-pm:hover { border-color: var(--l7-primary-100); }
.ay-pm.is-off { opacity: .55; cursor: default; }
.ay-pm-in { display: flex; align-items: center; gap: 12px; }
.ay-pm-ico { color: var(--l7-muted); font-size: 1.1rem; }
.ay-pm-txt { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; }
.ay-pm-txt b { color: var(--l7-heading); font-size: .85rem; font-weight: 700; }
.ay-pm-txt em { color: var(--l7-muted); font-size: .75rem; font-style: normal; }
.ay-pm-exp { flex: 0 0 auto; color: var(--l7-muted); font-size: .76rem; text-align: right; }
.ay-pm-exp u { display: block; color: var(--l7-danger); font-size: .68rem; font-weight: 700; text-decoration: none; }

.ay-newcard { margin-bottom: 14px; }

.ay-cvv { flex-wrap: nowrap; }
.ay-cvv > .form-control { border-top-right-radius: 0; border-bottom-right-radius: 0; }

.ay-cvv .btn {
    border: 1px solid var(--l7-border-strong);
    border-left: 0;
    border-top-left-radius: 0;
    border-bottom-left-radius: 0;
    background-color: var(--l7-surface-alt);
    color: var(--l7-faint);
}

.field-error-msg { display: none; margin-top: 5px; color: var(--l7-danger); font-size: .74rem; font-weight: 600; }
.has-error .field-error-msg { display: block; }
.has-error .form-control { border-color: var(--l7-danger); }

.ay-savecard { display: flex; align-items: center; gap: 10px; align-self: end; padding-bottom: 8px; }
.ay-savecard label { margin: 0; color: var(--l7-text); font-size: .82rem; font-weight: 400; }

.ay-optin { display: flex; align-items: center; gap: 16px; }
.ay-optin h3 { margin: 0 0 3px; color: var(--l7-heading); font-size: .88rem; font-weight: 700; }
.ay-optin p { margin: 0; color: var(--l7-muted); font-size: .78rem; }

.ay-express-on { padding: 4px 0; text-align: center; }
.ay-co-captcha { text-align: center; }

/* ---- Resumo do pedido ---- */
.ay-co-items { margin-bottom: 14px; padding-bottom: 12px; border-bottom: 1px solid var(--l7-border); }

.ay-co-items-t {
    display: block;
    margin-bottom: 10px;
    color: var(--l7-faint);
    font-size: .66rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .1em;
}

.ay-co-it { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; padding: 7px 0; }
.ay-co-it-n { min-width: 0; display: flex; flex-direction: column; }
.ay-co-it-n b { color: var(--l7-heading); font-size: .82rem; font-weight: 700; line-height: 1.35; }
.ay-co-it-n span { color: var(--l7-muted); font-size: .73rem; }
.ay-co-it-p { flex: 0 0 auto; color: var(--l7-heading); font-size: .82rem; font-weight: 700; text-align: right; white-space: nowrap; }
.ay-co-it-p em { display: block; color: var(--l7-warning); font-size: .68rem; font-style: normal; font-weight: 600; }

.ay-tos {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    margin: 16px 0 0;
    padding: 12px 14px;
    background-color: var(--l7-surface-alt);
    border-radius: 9px;
    color: var(--l7-text);
    font-size: .8rem;
    font-weight: 400;
    cursor: pointer;
}

.ay-tos a { font-weight: 700; }

.ay-done {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    width: 100%;
    margin-top: 14px;
    padding: .9rem 1rem;
    background-color: var(--l7-success);
    border: 0;
    border-radius: 10px;
    color: #fff;
    font-size: .95rem;
    font-weight: 700;
    cursor: pointer;
    transition: background-color .14s ease;
}

.ay-done:hover { background-color: #13905f; color: #fff; }
.ay-done:disabled,
.ay-done.disabled { background-color: var(--l7-border-strong); color: var(--l7-muted); cursor: default; }
.ay-done i { font-size: .78rem; }

.ay-safe {
    display: flex;
    align-items: flex-start;
    gap: 7px;
    margin: 14px 0 0;
    color: var(--l7-faint);
    font-size: .7rem;
    line-height: 1.5;
}

.ay-safe i { margin-top: 2px; color: var(--l7-success); }

/* -------------------------------------------------------------------------
   Resto do visual antigo do standard_cart

   O common.tpl carrega orderforms/standard_cart/css/all.min.css DEPOIS do
   nosso custom.css, e lá as regras são escritas com #order-standard_cart —
   seletor de id, que ganha de qualquer classe nossa por mais específica que
   pareça. Era daí que vinham a moldura cinza-escura do resumo, o título
   branco centralizado e a caixa cinza do cartão. Como o arquivo vem depois,
   não basta empatar na especificidade: tem que passar.
   ------------------------------------------------------------------------- */
/* Resumo do pedido: a moldura é o .ay-sum (recibo); o miolo não leva nada. */
#order-standard_cart .ay-sum .order-summary {
    margin: 0;
    padding: 0;
    background-color: transparent;
    border: 0;
    border-radius: 0;
    box-shadow: none;
}

/* Título do resumo igual ao do carrinho (.ay-sum h2). */
#order-standard_cart .ay-sum .order-summary h2 {
    margin: 0 -22px 14px;
    padding: 16px 22px 14px;
    border: 0;
    border-bottom: 1px solid var(--l7-border);
    color: var(--l7-heading);
    font-size: 1rem;
    font-weight: 700;
    text-align: left;
}

#order-standard_cart .ay-sum .summary-container {
    margin: 0;
    padding: 0;
    min-height: 0;
    background-color: transparent;
    border: 0;
    border-radius: 0;
    font-size: 1em;
}

/* Finalizar: o valor vem dentro de <span id="totalCartPrice">, e a regra do
   rótulo (.ay-sum-now span) deixava o número pequeno e apagado. */
#order-standard_cart .ay-sum-now b span { color: inherit; font-size: inherit; font-weight: inherit; }

#order-standard_cart .ay-sum .order-summary .recurring-charges {
    color: var(--l7-muted);
    font-size: .82rem;
    font-style: normal;
    text-align: left;
}

#order-standard_cart .ay-cc.cc-input-container {
    padding: 0;
    background-color: transparent;
    border: 0;
    border-radius: 0;
}

#order-standard_cart .ay-cc.cc-input-container .form-group { margin-top: 0; margin-bottom: 0; }
#order-standard_cart .ay-cc.cc-input-container i { width: auto; padding: 0; text-align: left; }
#order-standard_cart .ay-cc.cc-input-container .ay-pm { margin-bottom: 0; padding-right: 14px; }
#order-standard_cart .ay-cc.cc-input-container ul li { padding: 0; }

/* "Remover" do carrinho e adicional marcado: o standard_cart pinta os dois. */
#order-standard_cart .ay-it-acts .btn-remove-from-cart { color: var(--l7-muted); text-decoration: none; }
#order-standard_cart .ay-it-acts .btn-remove-from-cart:hover { color: var(--l7-danger); text-decoration: none; }
#order-standard_cart .ay-choice.panel-addon-selected { border-color: var(--l7-primary); }

@media (max-width: 1199.98px) {
    .ay-co-grid { grid-template-columns: minmax(0, 1fr); }
}

@media (max-width: 767.98px) {
    .ay-co-top h1 { font-size: 1.35rem; }
    .ay-cs-h { flex-wrap: wrap; }
    .ay-cs-switch { margin-left: 38px; width: 100%; }
    .ay-accs { grid-template-columns: minmax(0, 1fr); }
    .ay-gws { grid-template-columns: minmax(0, 1fr); }
    .ay-optin { flex-direction: column; align-items: flex-start; gap: 10px; }
}

/* ---- 7.11 Barra de ajuda ---- */
.l7-helpbar {
    display: flex;
    align-items: center;
    gap: 16px;
    padding: 18px 20px;
}

.l7-helpbar > i,
.l7-helpbar > .l7-card-ico {
    flex: 0 0 42px;
    width: 42px;
    height: 42px;
    font-size: 1.05rem;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: var(--l7-primary);
    background-color: var(--l7-primary-050);
    border-radius: 10px;
    font-size: 1.05rem;
}

.l7-helpbar-text { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; }
.l7-helpbar-text strong { color: var(--l7-heading); font-size: .92rem; }
.l7-helpbar-text span { color: var(--l7-muted); font-size: .82rem; }
.l7-helpbar .btn { flex: 0 0 auto; white-space: nowrap; }
.l7-helpbar .btn i { margin-left: 6px; font-size: .68rem; }

/* O cartão de ajuda da lateral agora é escuro e mora na seção 3.1. */

/* ---- 7.13 Responsivo ---- */
@media (max-width: 1399.98px) {
    .l7-home { grid-template-columns: minmax(0, 1fr) 290px; }
}

@media (max-width: 1199.98px) {
    .l7-home { grid-template-columns: minmax(0, 1fr); }
    .l7-home-side { flex-direction: row; flex-wrap: wrap; }
    .l7-home-side > * { flex: 1 1 320px; }
}

@media (max-width: 991.98px) {
    .l7-stats { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .l7-thead { display: none; }

    .div-service-item.l7-srv {
        grid-template-columns: minmax(0, 1fr) auto;
        grid-template-areas: "name status" "due actions";
        row-gap: 10px;
    }

    .l7-srv-name { grid-area: name; }
    .l7-srv-status { grid-area: status; justify-self: end; }
    .l7-srv-due { grid-area: due; color: var(--l7-muted); font-size: .78rem; padding-left: 45px; }
    .l7-srv-actions { grid-area: actions; }

    .l7-row-inv { grid-template-columns: minmax(0, 1fr) auto; row-gap: 6px; }
    .l7-row-inv .l7-muted:nth-of-type(2) { display: none; }
    .l7-row-inv .l7-inv-total { justify-self: end; }
    .l7-row-go { display: none; }

    .l7-row-srv {
        grid-template-columns: minmax(0, 1fr) auto;
        grid-template-areas: "name status" "price due";
        row-gap: 10px;
    }

    .l7-row-srv .l7-srv-name { grid-area: name; }
    .l7-row-srv .l7-srv-price { grid-area: price; padding-left: 45px; }
    .l7-row-srv .l7-muted { grid-area: due; justify-self: end; font-size: .78rem; }
    .l7-row-srv > span:nth-of-type(4) { grid-area: status; justify-self: end; }
}

@media (max-width: 767.98px) {
    .l7-home-side { flex-direction: column; }
    .l7-pagehead-text h1 { font-size: 1.4rem; }
    .l7-lastaccess { width: 100%; gap: 18px; }
    .l7-helpbar { flex-wrap: wrap; }
    .l7-helpbar .btn { width: 100%; text-align: center; }
    .l7-card-head { flex-wrap: wrap; }
}

@media (max-width: 479.98px) {
    .l7-stats { grid-template-columns: minmax(0, 1fr); }
}

/* =========================================================================
   8. Barra lateral de página (primarySidebar / secondarySidebar)
   ========================================================================= */
.sidebar .card-sidebar {
    border: 1px solid var(--l7-border);
    border-radius: var(--l7-radius);
    box-shadow: var(--l7-shadow);
    overflow: hidden;
}

.sidebar .card-header {
    padding: 0 16px;
    min-height: 44px;
    display: flex;
    align-items: center;
    background-color: var(--l7-surface-alt);
    border-bottom: 1px solid var(--l7-border);
}

.sidebar .card-title {
    width: 100%;
    font-size: .78rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .05em;
}

.sidebar .card-title > i { color: var(--l7-primary); margin-right: 4px; }
.sidebar .card-minimise { color: var(--l7-faint); font-size: .7rem; margin-top: 3px; }

.sidebar .card-body { padding: 14px 16px; }

.sidebar .list-group { font-size: .85rem; }

.sidebar .list-group-item {
    padding: 9px 16px;
    color: var(--l7-text);
    background-color: transparent;
    border: 0;
    border-bottom: 1px solid var(--l7-border);
    border-left: 2px solid transparent;
}

.sidebar .list-group-item:last-child { border-bottom: 0; }

.sidebar .list-group-item-action:hover { background-color: var(--l7-surface-alt); color: var(--l7-heading); }

.sidebar .list-group-item.active,
.sidebar .list-group-item.active:hover,
.sidebar .list-group-item.active:focus {
    color: var(--l7-primary-700);
    background-color: var(--l7-primary-050);
    border-color: var(--l7-border);
    border-left-color: var(--l7-primary);
    font-weight: 600;
}

.sidebar .list-group-item.active .sidebar-menu-item-icon { color: var(--l7-primary); }

.sidebar .sidebar-menu-item-icon-wrapper {
    flex: 0 0 22px;
    width: 22px;
    margin-right: 8px;
    text-align: center;
}

.sidebar .sidebar-menu-item-icon { color: var(--l7-faint); }

.sidebar .list-group-item .badge {
    padding: .3em .55em;
    width: auto;
    min-width: 24px;
    background-color: var(--l7-bg);
    color: var(--l7-muted);
    font-weight: 600;
    border-radius: var(--l7-radius-pill);
}

.sidebar .list-group-item > i.far.fa-circle,
.sidebar .list-group-item > i.far.fa-dot-circle { color: var(--l7-primary); }

/* Seta à direita nos atalhos, como na referência */
.sidebar a.list-group-item-action .sidebar-menu-item-wrapper::after {
    content: "\f054";
    font-family: "Font Awesome 5 Free";
    font-weight: 900;
    margin-left: auto;
    padding-left: 10px;
    color: var(--l7-faint);
    font-size: .62rem;
    align-self: center;
}

.sidebar a.list-group-item-action .sidebar-menu-item-badge + .sidebar-menu-item-wrapper::after { content: none; }
.sidebar a.list-group-item-action:hover .sidebar-menu-item-wrapper::after { color: var(--l7-primary); }

/* Cartões da barra lateral dentro da coluna da área do cliente */
.l7-home-side .sidebar { display: flex; flex-direction: column; gap: 16px; }
.l7-home-side .sidebar .card-sidebar { margin-bottom: 0 !important; }

/* =========================================================================
   9. Tabelas
   ========================================================================= */
.table {
    color: var(--l7-text);
    font-size: .85rem;
    margin-bottom: 0;
}

.table thead th {
    padding: 12px 16px;
    color: var(--l7-muted);
    font-size: .74rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: .04em;
    background-color: var(--l7-surface-alt);
    border-top: 0;
    border-bottom: 1px solid var(--l7-border);
    white-space: nowrap;
}

.table tbody td {
    padding: 14px 16px;
    vertical-align: middle;
    border-top: 1px solid var(--l7-border);
}

.table tbody tr:first-child td { border-top: 0; }

.table-hover tbody tr:hover { background-color: var(--l7-surface-alt); color: var(--l7-text); }

.table-bordered,
.table-bordered td,
.table-bordered th { border-color: var(--l7-border); }

.table-striped tbody tr:nth-of-type(odd) { background-color: var(--l7-surface-alt); }

.card > .table,
.card > .table-responsive > .table { margin-bottom: 0; }

.card > .table thead th:first-child,
.card > .table tbody td:first-child,
.card > .table-responsive > .table thead th:first-child,
.card > .table-responsive > .table tbody td:first-child { padding-left: 20px; }

.card > .table thead th:last-child,
.card > .table tbody td:last-child,
.card > .table-responsive > .table thead th:last-child,
.card > .table-responsive > .table tbody td:last-child { padding-right: 20px; }

/* DataTables */
.listtable {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 10px;
    padding: 14px 20px;
    border-bottom: 1px solid var(--l7-border);
}

.dataTables_filter { margin-left: auto; }

.dataTables_filter input {
    min-height: 38px;
    padding: .4rem .85rem;
    border: 1px solid var(--l7-border-strong);
    border-radius: var(--l7-radius-pill);
    font-size: .82rem;
}

.dataTables_filter input:focus {
    border-color: var(--l7-primary);
    box-shadow: 0 0 0 3px var(--l7-primary-100);
    outline: 0;
}

.dataTables_info {
    padding: 14px 20px;
    color: var(--l7-muted);
    font-size: .78rem;
}

.dataTables_length select {
    min-height: 32px;
    padding: 2px 8px;
    border: 1px solid var(--l7-border-strong);
    border-radius: 6px;
}

.dataTables_wrapper .dataTables_paginate { padding: 10px 20px; }

table.dataTable thead .sorting,
table.dataTable thead .sorting_asc,
table.dataTable thead .sorting_desc { cursor: pointer; }

/* =========================================================================
   10. Selos de estado
   ========================================================================= */
.badge {
    padding: .38em .7em;
    font-size: .72rem;
    font-weight: 600;
    letter-spacing: .01em;
    border-radius: var(--l7-radius-pill);
}

.badge-primary, .badge-info { background-color: var(--l7-primary-050); color: var(--l7-primary-700); }
.badge-success { background-color: var(--l7-success-bg); color: var(--l7-success); }
.badge-warning { background-color: var(--l7-warning-bg); color: var(--l7-warning); }
.badge-danger  { background-color: var(--l7-danger-bg); color: var(--l7-danger); }
.badge-secondary, .badge-default { background-color: var(--l7-bg); color: var(--l7-muted); }

/* Rótulos de status usados nas listagens do WHMCS */
.label,
span[class*="status-"],
.textgreen, .textred, .textblue, .textorange, .textgrey {
    font-weight: 600;
}

.label {
    display: inline-block;
    padding: .38em .7em;
    font-size: .72rem;
    border-radius: var(--l7-radius-pill);
}

/* O tema força color:white nesses rótulos; recupera o estilo de chip claro */
.div-service-status .label-success,
.div-service-status .label-info { background-color: var(--l7-success-bg); color: var(--l7-success); }
.div-service-status .label-danger { background-color: var(--l7-danger-bg); color: var(--l7-danger); }
.div-service-status .label-warning { background-color: var(--l7-warning-bg); color: var(--l7-warning); }
.div-service-status .label-default { background-color: var(--l7-bg); color: var(--l7-muted); }

.label-success, .status-active, .status-paid { background-color: var(--l7-success-bg); color: var(--l7-success); }
.label-danger, .status-cancelled, .status-terminated, .status-overdue { background-color: var(--l7-danger-bg); color: var(--l7-danger); }
.label-warning, .status-pending, .status-unpaid { background-color: var(--l7-warning-bg); color: var(--l7-warning); }
.label-info, .status-suspended { background-color: var(--l7-primary-050); color: var(--l7-primary-700); }
.label-default { background-color: var(--l7-bg); color: var(--l7-muted); }

.textgreen  { color: var(--l7-success) !important; }
.textred    { color: var(--l7-danger) !important; }
.textblue   { color: var(--l7-primary) !important; }
.textorange { color: var(--l7-warning) !important; }
.textgrey   { color: var(--l7-muted) !important; }

/* =========================================================================
   11. Alertas
   ========================================================================= */
.alert {
    padding: 14px 18px;
    border: 1px solid transparent;
    border-radius: var(--l7-radius);
    font-size: .85rem;
}

.alert-info    { background-color: var(--l7-info-bg); border-color: var(--l7-primary-100); color: var(--l7-primary-700); }
.alert-success { background-color: var(--l7-success-bg); border-color: #c8ecdd; color: #10704f; }
.alert-warning { background-color: var(--l7-warning-bg); border-color: #f6e2bf; color: #98610f; }
.alert-danger,
.alert-error   { background-color: var(--l7-danger-bg); border-color: #f7d4d3; color: #a83331; }

.alert .alert-link { font-weight: 700; text-decoration: underline; }

/* =========================================================================
   12. Navegação interna, abas e list-groups
   ========================================================================= */
.nav-tabs {
    border-bottom: 1px solid var(--l7-border);
}

.nav-tabs .nav-link {
    padding: 11px 2px;
    margin-right: 24px;
    color: var(--l7-muted);
    font-size: .875rem;
    font-weight: 600;
    background: none;
    border: 0;
    border-bottom: 2px solid transparent;
}

.nav-tabs .nav-link:hover { color: var(--l7-heading); border-bottom-color: var(--l7-border-strong); }

.nav-tabs .nav-link.active,
.nav-tabs .nav-item.show .nav-link {
    color: var(--l7-primary);
    background: none;
    border-bottom-color: var(--l7-primary);
}

.nav-pills .nav-link { border-radius: var(--l7-radius-sm); color: var(--l7-muted); font-weight: 600; }
.nav-pills .nav-link.active { background-color: var(--l7-primary); color: #fff; }

.list-group-item {
    color: var(--l7-text);
    background-color: var(--l7-surface);
    border-color: var(--l7-border);
}

.list-group-item-action:hover { background-color: var(--l7-surface-alt); color: var(--l7-heading); }

.list-group-item.active {
    background-color: var(--l7-primary);
    border-color: var(--l7-primary);
    color: #fff;
}

/* =========================================================================
   13. Dropdowns, modais, popovers
   ========================================================================= */
.dropdown-menu {
    padding: 6px;
    background-color: var(--l7-surface);
    border: 1px solid var(--l7-border);
    border-radius: var(--l7-radius);
    box-shadow: var(--l7-shadow-md);
    font-size: .865rem;
    min-width: 210px;
}

.dropdown-menu > li > a,
.dropdown-item {
    display: block;
    padding: 8px 12px !important;
    color: var(--l7-text);
    border-radius: var(--l7-radius-sm);
    white-space: nowrap;
}

.dropdown-menu li.dropdown-item { padding: 0 !important; background: none; }

.dropdown-item:hover,
.dropdown-item:focus,
.dropdown-menu > li > a:hover {
    background-color: var(--l7-bg);
    color: var(--l7-heading);
}

header.header .dropdown-item.active,
header.header .dropdown-item:active,
.dropdown-item.active,
.dropdown-item:active {
    background-color: var(--l7-primary-050);
    color: var(--l7-primary-700);
}

.dropdown-divider { margin: 6px 4px; border-top-color: var(--l7-border); }

.dropdown-menu i { width: 18px; text-align: center; color: var(--l7-faint); }

.modal-content {
    border: 0;
    border-radius: var(--l7-radius);
    box-shadow: 0 16px 48px rgba(20, 40, 65, .18);
}

.modal-header {
    padding: 18px 22px;
    border-bottom: 1px solid var(--l7-border);
}

.modal-title { font-size: 1.05rem; font-weight: 600; }
.modal-body { padding: 22px; }

.modal-footer {
    padding: 14px 22px;
    background-color: var(--l7-surface-alt);
    border-top: 1px solid var(--l7-border);
    border-radius: 0 0 var(--l7-radius) var(--l7-radius);
}

.modal-backdrop.show { opacity: .45; }

/* Modal de idioma/moeda: convertido do visual escuro para o claro */
.modal-localisation .modal-content { background-color: var(--l7-surface); }
.modal-localisation .modal-body { background: none; padding: 10px 26px 26px; }
.modal-localisation .modal-footer { border-top: 1px solid var(--l7-border); }
.modal-localisation .close { color: var(--l7-muted); opacity: 1; }
.modal-localisation .h5 { color: var(--l7-heading); }

.modal-localisation .item-selector .item {
    margin: 3px 0;
    padding: 8px 6px;
    color: var(--l7-text);
    font-size: .82rem;
    border: 1px solid var(--l7-border);
    border-radius: var(--l7-radius-sm);
}

.modal-localisation .item-selector .item:hover {
    background-color: var(--l7-bg);
    border-color: var(--l7-border-strong);
    color: var(--l7-heading);
}

.modal-localisation .item-selector .item.active {
    background-color: var(--l7-primary-050);
    border-color: var(--l7-primary);
    color: var(--l7-primary-700);
    font-weight: 600;
}

.popover {
    border: 1px solid var(--l7-border);
    border-radius: var(--l7-radius);
    box-shadow: var(--l7-shadow-md);
    font-family: inherit;
}

.popover-header { background-color: var(--l7-surface); border-bottom-color: var(--l7-border); font-size: .85rem; }

.tooltip-inner {
    padding: 6px 10px;
    background-color: var(--l7-heading);
    border-radius: 6px;
    font-size: .76rem;
}

.tooltip.bs-tooltip-top .arrow::before { border-top-color: var(--l7-heading); }
.tooltip.bs-tooltip-bottom .arrow::before { border-bottom-color: var(--l7-heading); }
.tooltip.bs-tooltip-left .arrow::before { border-left-color: var(--l7-heading); }
.tooltip.bs-tooltip-right .arrow::before { border-right-color: var(--l7-heading); }

/* =========================================================================
   14. Paginação
   ========================================================================= */
.pagination { font-size: .82rem; }

.page-link {
    padding: .4rem .7rem;
    margin: 0 2px;
    color: var(--l7-muted);
    background-color: var(--l7-surface);
    border: 1px solid var(--l7-border);
    border-radius: 6px;
}

.page-link:hover { background-color: var(--l7-bg); color: var(--l7-heading); border-color: var(--l7-border-strong); }

.page-item.active .page-link {
    background-color: var(--l7-primary);
    border-color: var(--l7-primary);
    color: #fff;
}

.page-item.disabled .page-link { color: var(--l7-faint); background-color: var(--l7-surface); }

/* =========================================================================
   15. Páginas de autenticação (login, cadastro, recuperação)
   ========================================================================= */
/* ---- Telas de login / cadastro / recuperação ---- */
.l7-auth-brand {
    flex: 0 0 auto;
    padding: 7vh 20px 0;
    text-align: center;
}

.l7-auth-brand img {
    max-width: 230px;
    max-height: 48px;
    width: auto;
    height: auto;
}

body.l7-auth .l7-main { margin-left: 0; }
/* O card fica no meio da tela, na vertical: o espaço que sobra se divide
   em cima e embaixo, em vez de ficar todo acumulado acima do rodapé. */
body.l7-auth .l7-main section#main-body {
    flex: 1 0 auto;
    display: flex;
    flex-direction: column;
    justify-content: center;
    padding: 32px 0;
}

body.l7-auth .l7-main section#main-body > .container { width: 100%; }
body.l7-auth footer.footer { margin-top: auto; }

.login-form .card,
.password-reset-container .card {
    border-radius: var(--l7-radius);
    box-shadow: var(--l7-shadow-md);
    border-color: var(--l7-border);
}

.login-form .card-body { padding: 34px 32px 30px; }

.login-form .card-footer {
    padding: 16px 32px;
    text-align: center;
    background-color: var(--l7-surface-alt);
    font-size: .82rem;
}

.login-form .card-footer a { font-weight: 600; margin-left: 3px; }

/* Logo dentro do card */
.l7-login-brand { text-align: center; margin-bottom: 22px; }
.l7-login-brand img { max-width: 190px; max-height: 42px; width: auto; height: auto; }

.l7-login-head { text-align: center; margin-bottom: 24px; }

.l7-login-head h1 {
    margin: 0 0 4px;
    color: var(--l7-heading);
    font-size: 1.32rem;
    font-weight: 700;
    letter-spacing: -.02em;
}

.l7-login-head p { margin: 0; color: var(--l7-muted); font-size: .85rem; }

/* Rótulo da senha com o "esqueceu?" na mesma linha */
.l7-login-pwlabel {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 12px;
}

.l7-login-pwlabel label { margin-bottom: 6px; }
.l7-login-pwlabel a { color: var(--l7-muted); font-size: .78rem; }
.l7-login-pwlabel a:hover { color: var(--l7-primary); }

.l7-login-captcha { margin-bottom: 16px; }

.l7-login-remember {
    display: flex;
    align-items: center;
    gap: 8px;
    margin: 0 0 18px;
    color: var(--l7-text);
    font-size: .84rem;
    font-weight: 400;
    cursor: pointer;
}

.l7-login-remember input {
    position: static;
    margin: 0;
    width: 15px;
    height: 15px;
    accent-color: var(--l7-primary);
    cursor: pointer;
}

.login-form .btn-primary.btn-block { padding: .65rem 1rem; font-size: .9rem; }

/* -------------------------------------------------------------------------
   Cadastro (clientregister.tpl)

   Vocabulário de formulário longo: .l7-panel / .l7-sec / .l7-grid / .l7-f.
   Serve também para as outras fichas do cliente (detalhes da conta,
   contatos, perfil), para todas seguirem o mesmo desenho.
   ------------------------------------------------------------------------- */
.l7-reg { max-width: 780px; margin: 0 auto; }

/* ---- Painel ---- */
.l7-panel {
    background-color: var(--l7-surface);
    border: 1px solid var(--l7-border);
    border-radius: var(--l7-radius);
    box-shadow: var(--l7-shadow-md);
    overflow: hidden;
}

.l7-panel-head {
    padding: 28px 32px 22px;
    border-bottom: 1px solid var(--l7-border);
}

.l7-panel-head h1 {
    margin: 0 0 4px;
    color: var(--l7-heading);
    font-size: 1.32rem;
    font-weight: 700;
    letter-spacing: -.02em;
}

.l7-panel-head p { margin: 0; color: var(--l7-muted); font-size: .85rem; }

.l7-panel-body { padding: 0 32px; }

.l7-panel-foot {
    padding: 22px 32px 26px;
    background-color: var(--l7-surface-alt);
    border-top: 1px solid var(--l7-border);
}

/* ---- Seções numeradas ---- */
.l7-sec { padding: 26px 0; border-bottom: 1px solid var(--l7-border); }
.l7-sec-last { border-bottom: 0; padding-bottom: 6px; }

.l7-sec-h {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    margin-bottom: 18px;
}

.l7-sec-n {
    flex: 0 0 auto;
    width: 26px;
    height: 26px;
    margin-top: 1px;
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: var(--l7-primary-050);
    color: var(--l7-primary);
    border-radius: var(--l7-radius-sm);
    font-size: .78rem;
    font-weight: 700;
}

.l7-sec-h h2 {
    margin: 0 0 2px;
    color: var(--l7-heading);
    font-size: .95rem;
    font-weight: 700;
}

.l7-sec-h p { margin: 0; color: var(--l7-muted); font-size: .78rem; }

/* ---- Grade de campos ---- */
.l7-grid {
    display: grid;
    grid-template-columns: repeat(12, 1fr);
    gap: 16px 14px;
}

.l7-grid-gap { margin-top: 18px; }

.l7-f { grid-column: span 12; min-width: 0; }
.l7-f12 { grid-column: span 12; }
.l7-f8 { grid-column: span 8; }
.l7-f6 { grid-column: span 6; }
.l7-f5 { grid-column: span 5; }
.l7-f4 { grid-column: span 4; }
.l7-f3 { grid-column: span 3; }

.l7-lab {
    display: block;
    margin: 0 0 6px;
    color: var(--l7-heading);
    font-size: .78rem;
    font-weight: 600;
}

.l7-req { margin-left: 3px; color: var(--l7-danger); font-style: normal; }

.l7-opt {
    margin-left: 2px;
    color: var(--l7-faint);
    font-size: .72rem;
    font-weight: 400;
    text-transform: lowercase;
}

.l7-hint { display: block; margin-top: 5px; color: var(--l7-muted); font-size: .74rem; }

.l7-ctl { position: relative; }
.l7-ctl > .form-control,
.l7-ctl > select,
.l7-ctl > .l7-in { width: 100%; }

/* O <select> de estado nasce pelo StatesDropdown.js com as mesmas classes
   do input; por isso os selects do formulário usam custom-select também. */
.l7-ctl .custom-select {
    height: auto;
    min-height: 42px;
    padding: .55rem 2rem .55rem .85rem;
    color: var(--l7-text);
    font-size: .875rem;
    background-color: var(--l7-surface);
    border: 1px solid var(--l7-border-strong);
    border-radius: var(--l7-radius-sm);
}

.l7-ctl .custom-select:focus {
    border-color: var(--l7-primary);
    box-shadow: 0 0 0 3px var(--l7-primary-100);
    outline: 0;
}

/*
    O tema zera o appearance e a seta nativa do <select> some, e ainda tem
    `#registration .form-control { background: initial }` no theme.min.css —
    um seletor de id, que ganha de qualquer classe nossa. Daí o !important:
    sem ele o campo de País e o de Estado ficam iguais a um input de texto.
*/
.l7-ctl select.l7-in,
.l7-ctl .custom-select {
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='11' height='7' viewBox='0 0 11 7'%3E%3Cpath fill='none' stroke='%236c7c8c' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round' d='M1 1l4.5 4.5L10 1'/%3E%3C/svg%3E") !important;
    background-repeat: no-repeat !important;
    background-position: right .85rem center !important;
    background-size: 11px 7px !important;
}

/* Mesmo motivo: o `background: initial` deixava os campos transparentes. */
#registration .l7-ctl .form-control,
#registration .l7-ctl .field { background-color: var(--l7-surface); }
#registration .l7-pwgrp > .form-control { background-color: transparent; }

/* O intl-tel-input embrulha o campo de telefone num div próprio. */
.l7-ctl-phone .intl-tel-input { display: block; width: 100%; }
.l7-ctl-phone .intl-tel-input .form-control { width: 100%; }

/* ---- Senha ---- */
.l7-pwgrp {
    flex-wrap: nowrap;
    background-color: var(--l7-surface);
    border: 1px solid var(--l7-border-strong);
    border-radius: var(--l7-radius-sm);
    overflow: hidden;
    transition: border-color .15s ease, box-shadow .15s ease;
}

.l7-pwgrp:focus-within {
    border-color: var(--l7-primary);
    box-shadow: 0 0 0 3px var(--l7-primary-100);
}

.l7-pwgrp > .form-control {
    background-color: transparent;
    border: 0 !important;
    box-shadow: none !important;
    outline: 0 !important;
}

.l7-pwgrp > .input-group-append > .btn {
    background-color: transparent;
    border: 0;
    box-shadow: none;
    color: var(--l7-faint);
}

.l7-pwgrp > .input-group-append > .btn:hover { color: var(--l7-muted); }

.l7-pwbox {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    gap: 14px 24px;
    align-items: start;
    padding: 16px 18px;
    background-color: var(--l7-surface-alt);
    border: 1px solid var(--l7-border);
    border-radius: var(--l7-radius-sm);
}

.l7-pwmeter .progress {
    height: 6px;
    margin-bottom: 8px;
    background-color: var(--l7-border);
    border-radius: var(--l7-radius-pill);
}

.l7-pwmeter .progress-bar { border-radius: var(--l7-radius-pill); transition: width .2s ease; }
.l7-pwmeter p { margin: 0; color: var(--l7-muted); font-size: .74rem; }

.l7-pwreq {
    grid-row: span 2;
    margin: 0;
    padding: 0;
    list-style: none;
}

.l7-pwreq li {
    display: flex;
    align-items: center;
    gap: 7px;
    color: var(--l7-faint);
    font-size: .75rem;
    line-height: 1.95;
}

.l7-pwreq li i { width: 14px; font-size: .8rem; }
.l7-pwreq li.on { color: var(--l7-success); }

.l7-pwbox .generate-password { justify-self: start; align-self: start; }

/* ---- Rodapé do card ---- */
/* O captcha do WHMCS vem numa .row com dois col-6, o que espreme a imagem
   num canto e o campo no outro. Aqui vira uma linha centrada. */
.l7-reg-captcha { margin-bottom: 18px; }

.l7-reg-captcha > .text-center { margin: 0; }
.l7-reg-captcha .col-md-8 { flex: 0 0 100%; max-width: 100%; margin: 0; padding: 0; }

.l7-reg-captcha .row {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    align-items: center;
    gap: 10px;
    margin: 0;
    padding-bottom: 0 !important;
}

.l7-reg-captcha .row > p {
    flex: 0 0 100%;
    margin: 0 0 4px;
    color: var(--l7-muted);
    font-size: .78rem;
}

.l7-reg-captcha .col-6 {
    flex: 0 0 auto;
    width: auto;
    max-width: none;
    padding: 0;
}

.l7-reg-captcha #inputCaptchaImage {
    display: block;
    height: 42px;
    border: 1px solid var(--l7-border-strong);
    border-radius: var(--l7-radius-sm);
}

.l7-reg-captcha #inputCaptcha {
    float: none !important;
    width: 132px;
    text-align: center;
    letter-spacing: .16em;
    text-transform: uppercase;
}

.l7-reg-captcha .recaptcha-container { display: inline-block; }

.l7-reg-tos {
    display: flex;
    align-items: flex-start;
    gap: 9px;
    margin: 0 0 16px;
    color: var(--l7-text);
    font-size: .82rem;
    font-weight: 400;
    cursor: pointer;
}

.l7-reg-tos input {
    position: static;
    flex: 0 0 auto;
    width: 15px;
    height: 15px;
    margin: 2px 0 0;
    accent-color: var(--l7-primary);
    cursor: pointer;
}

.l7-reg-go { padding: .7rem 1rem; font-size: .92rem; }

.l7-reg-alt { margin: 16px 0 0; text-align: center; color: var(--l7-muted); font-size: .82rem; }
.l7-reg-alt a { margin-left: 3px; font-weight: 600; }

/* ---- Avisos ---- */
.l7-reg-msg {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    padding: 12px 14px;
    margin-bottom: 16px;
    background-color: var(--l7-info-bg);
    border: 1px solid var(--l7-border);
    border-radius: var(--l7-radius-sm);
    color: var(--l7-text);
    font-size: .84rem;
}

.l7-reg-msg i { margin-top: 2px; }
.l7-reg-msg p:last-child { margin-bottom: 0; }

.l7-reg-msg-err {
    background-color: var(--l7-danger-bg);
    border-color: rgba(220, 74, 72, .28);
    color: #8d2d2c;
}

.l7-reg-msg-err i { color: var(--l7-danger); }

/* .w-hidden precisa ganhar do display:flex acima */
.l7-reg-msg.w-hidden { display: none !important; }

.l7-linked { padding-top: 24px; }
.l7-linked .sub-heading { margin-top: 0; }

@media (max-width: 767px) {
    .l7-panel-head,
    .l7-panel-body,
    .l7-panel-foot { padding-left: 20px; padding-right: 20px; }

    .l7-f3,
    .l7-f4,
    .l7-f5,
    .l7-f6,
    .l7-f8 { grid-column: span 12; }

    .l7-pwbox { grid-template-columns: 1fr; }
    .l7-pwreq { grid-row: auto; }
}

/* Contas vinculadas / login social */
.linked-accounts .btn,
.social-signin .btn { border-radius: var(--l7-radius-sm); }

/* =========================================================================
   16. Busca de domínio e loja
   ========================================================================= */
.home-domain-search {
    padding: 42px 0;
    background-color: var(--l7-surface);
    border-bottom: 1px solid var(--l7-border);
}

.home-domain-search h2 { font-size: 1.5rem; }

.home-domain-search .input-group-wrapper {
    padding: 6px;
    background-color: var(--l7-surface);
    border: 1px solid var(--l7-border-strong);
    border-radius: var(--l7-radius-pill);
    box-shadow: var(--l7-shadow);
}

.home-domain-search .input-group-wrapper:focus-within { border-color: var(--l7-primary); }

.home-domain-search .input-group-wrapper .form-control { min-height: 44px; }

.home-domain-search .input-group-wrapper .btn {
    border-radius: var(--l7-radius-pill) !important;
    padding-left: 1.4rem;
    padding-right: 1.4rem;
}

.home-domain-search .tld-logos { color: var(--l7-muted); font-size: 1.1em; }

/* Atalhos em ícone da homepage */
.action-icon-btns a {
    padding: 24px 12px;
    background-color: var(--l7-surface);
    border: 1px solid var(--l7-border);
    border-radius: var(--l7-radius);
    box-shadow: var(--l7-shadow);
    color: var(--l7-text);
    font-size: .875rem;
    font-weight: 600;
    transition: border-color .18s ease, box-shadow .18s ease, transform .18s ease;
}

.action-icon-btns a:hover {
    border-color: var(--l7-border-strong);
    box-shadow: var(--l7-shadow-md);
    transform: translateY(-1px);
    color: var(--l7-heading);
}

.action-icon-btns a .ico-container {
    margin: 0 auto 12px;
    line-height: 1;
    font-size: 1.8em;
}

.action-icon-btns a:hover .ico-container { font-size: 1.8em; }
.action-icon-btns a .ico-container i { color: var(--l7-primary); }

.card-columns.home .card-body { padding: 28px 22px; }
.card-columns.home .pricing-card-title { font-size: 1.1rem; }

/* =========================================================================
   17. Tickets, faturas e blocos diversos
   ========================================================================= */
.ticket-reply,
.ticket-message {
    border: 1px solid var(--l7-border);
    border-radius: var(--l7-radius);
}

.invoice-container .card,
.invoice-lineitems { border-radius: var(--l7-radius); }

.order-summary,
.summary-container {
    background-color: var(--l7-surface);
    border: 1px solid var(--l7-border);
    border-radius: var(--l7-radius);
}

.well {
    padding: 18px;
    background-color: var(--l7-surface-alt);
    border: 1px solid var(--l7-border);
    border-radius: var(--l7-radius);
    box-shadow: none;
}

#fullpage-overlay .inner-wrapper { color: var(--l7-heading); }

.select-account { border-top-color: var(--l7-border); }
.select-account a { border-bottom-color: var(--l7-border); border-radius: var(--l7-radius-sm); }
.select-account a:hover { background-color: var(--l7-surface-alt); }

.continue-container,
.invite-box {
    background-color: var(--l7-surface);
    border: 1px solid var(--l7-border);
    border-radius: var(--l7-radius);
}

/* =========================================================================
   18. Responsivo
   ========================================================================= */

/* Barra lateral de página à direita a partir de lg (o menu principal já ocupa a esquerda) */
@media (min-width: 992px) {
    .l7-has-sidenav .l7-body-row > .primary-content { order: 1; }
    .l7-has-sidenav .l7-body-row > div:not(.primary-content) { order: 2; }
}

@media (max-width: 1199.98px) {
    :root { --l7-sidenav-w: 240px; }
}

@media (max-width: 991.98px) {
    .l7-has-sidenav .l7-main { margin-left: 0; }

    .l7-sidenav { transform: translateX(-100%); box-shadow: 0 0 40px rgba(20, 40, 65, .2); }

    .l7-nav-check:checked ~ .l7-sidenav { transform: translateX(0); }

    .l7-nav-check:checked ~ .l7-sidenav-backdrop { opacity: 1; visibility: visible; }

    .l7-sidenav-dismiss { display: inline-flex; }

    .l7-burger { display: inline-flex; }

    .l7-topbar-inner { padding: 10px 18px; }

    .l7-main section#main-body > .container,
    .l7-page-head > .container,
    .l7-main .master-breadcrumb > .container,
    footer.footer > .container { padding-left: 18px; padding-right: 18px; }

    .l7-guestnav .navbar-collapse { padding: 8px 18px 14px; }

    .l7-guestnav .navbar-nav > li > a { padding: 9px 0; margin: 0; border-bottom: 1px solid var(--l7-border); }
    .l7-guestnav .navbar-nav.ml-auto > li > a { margin-left: 0; }
}

@media (max-width: 767.98px) {
    .l7-search { display: none; }

    .l7-topbar-account .btn-active-client { display: none; }

    /* No celular sobra só o avatar: o nome e o "cliente desde" saem. */
    .l7-user-txt,
    .l7-user-caret { display: none; }
    .l7-topbar .l7-user-toggle { padding: 4px; gap: 0; }
    .l7-usermenu-toggle > span { display: none; }

    .l7-main section#main-body { padding: 18px 0 30px; }

    .l7-stats .l7-stat { padding: 14px 16px; }
    .l7-stats .l7-stat .stat { font-size: 1.5rem; }
    .l7-stats .l7-stat-ico { width: 36px; height: 36px; margin-bottom: 10px; font-size: .95rem; }

    .card-body,
    .primary-content .card-body { padding: 16px; }

    .card-header { padding: 14px 16px; }

    .login-form .card-body { padding: 24px 20px; }

    footer.footer > .container { flex-direction: column; align-items: flex-start; }
    footer.footer .l7-footer-right { margin-left: 0; }

    .listtable { padding: 12px 16px; }
    .dataTables_filter { margin-left: 0; width: 100%; }
    .dataTables_filter input { width: 100%; }
}

/* =========================================================================
   19. Impressão
   ========================================================================= */
@media print {
    .l7-sidenav,
    .l7-topbar,
    .l7-sidenav-backdrop,
    footer.footer,
    .master-breadcrumb { display: none !important; }

    .l7-has-sidenav .l7-main { margin-left: 0; }

    .card { box-shadow: none; border-color: #ddd; }
}

/* =========================================================================
   Tela inicial da área do cliente (clientareahome.tpl) — classes l7h-*

   Mesmo painel do resto do site (.l7-card) e do carrinho: fundo branco,
   borda fina, canto reto, sombra leve, cabeçalho com fio.
   ========================================================================= */
.l7h *, .l7h *::before, .l7h *::after { box-sizing: border-box; }
.l7h a { text-decoration: none; }

.l7h-sec,
.l7h-stats {
    background-color: var(--l7-surface);
    border: 1px solid var(--l7-border);
    border-radius: 0;
    box-shadow: var(--l7-shadow);
}

.l7h-sec { overflow: hidden; }

/* ---- Topo ---- */
.l7h-head {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 16px 24px;
    margin-bottom: 22px;
}

.l7h-head-txt { flex: 1 1 360px; min-width: 0; }

.l7h-head h1 {
    margin: 0 0 6px;
    color: var(--l7-heading);
    font-size: 1.6rem;
    font-weight: 700;
    line-height: 1.2;
    letter-spacing: -.02em;
}

.l7h-head p { margin: 0; color: var(--l7-muted); font-size: .88rem; }
.l7h-last { display: block; margin-top: 4px; color: var(--l7-faint); font-size: .78rem; }
.l7h-head-acts { display: flex; flex-wrap: wrap; gap: 10px; }

.l7h-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: .62rem 1.15rem;
    background-color: var(--l7-primary);
    border: 1px solid var(--l7-primary);
    border-radius: 3px;
    color: #fff;
    font-size: .86rem;
    font-weight: 600;
    white-space: nowrap;
    transition: background-color .12s ease, border-color .12s ease, color .12s ease;
}

.l7h-btn:hover { background-color: var(--l7-primary-700); border-color: var(--l7-primary-700); color: #fff; }
.l7h-btn.is-ghost { background-color: var(--l7-surface); border-color: var(--l7-border); color: var(--l7-heading); box-shadow: var(--l7-shadow); }
.l7h-btn.is-ghost:hover { border-color: var(--l7-primary); color: var(--l7-primary-700); }
.l7h-btn.is-block { display: flex; width: auto; margin: 16px 20px 20px; }

/* ---- Fatura vencida ---- */
.l7h-alert {
    display: flex;
    align-items: center;
    gap: 16px;
    margin-bottom: 20px;
    padding: 14px 18px;
    background-color: var(--l7-danger-bg);
    border: 1px solid #f5c9c8;
    border-radius: 0;
}

.l7h-alert p { flex: 1 1 auto; min-width: 0; margin: 0; color: #8d2d2c; font-size: .88rem; }
.l7h-alert strong { margin-right: 4px; color: var(--l7-danger); }

.l7h-alert a {
    flex: 0 0 auto;
    padding: .5rem 1rem;
    background-color: var(--l7-danger);
    border-radius: 3px;
    color: #fff;
    font-size: .84rem;
    font-weight: 600;
}

.l7h-alert a:hover { background-color: #b93a38; color: #fff; }

/* ---- Números: um painel, quatro colunas ---- */
.l7h-stats {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    margin-bottom: 24px;
    overflow: hidden;
}

.l7h-stats a {
    display: flex;
    flex-direction: column;
    gap: 6px;
    padding: 18px 22px;
    border-left: 1px solid var(--l7-border);
    color: inherit;
    transition: background-color .12s ease;
}

.l7h-stats a:first-child { border-left: 0; }
.l7h-stats a:hover { background-color: var(--l7-surface-alt); color: inherit; }
.l7h-stats span { color: var(--l7-muted); font-size: .8rem; font-weight: 500; }

.l7h-stats b {
    color: var(--l7-heading);
    font-size: 1.9rem;
    font-weight: 700;
    line-height: 1.1;
    letter-spacing: -.02em;
    font-variant-numeric: tabular-nums;
}

.l7h-stats a.is-warn b { color: var(--l7-warning); }

/* ---- Grade ---- */
.l7h-grid {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 330px;
    gap: 24px;
    align-items: start;
}

.l7h-main,
.l7h-side { min-width: 0; }

.l7h-side { display: flex; flex-direction: column; gap: 24px; }
.l7h-main > .l7h-sec + .l7h-sec { margin-top: 24px; }

/* Cabeçalho do painel, igual ao .l7-card-head */
.l7h-sec-head {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 12px;
    padding: 16px 20px 14px;
    border-bottom: 1px solid var(--l7-border);
}

.l7h-sec-head h2 { margin: 0; color: var(--l7-heading); font-size: 1.02rem; font-weight: 700; letter-spacing: -.01em; }
.l7h-sec-head a { color: var(--l7-primary); font-size: .8rem; font-weight: 600; }

/* ---- Tabela de serviços ---- */
.l7h-tr {
    display: grid;
    grid-template-columns: minmax(0, 1.7fr) minmax(0, 1fr) minmax(0, .8fr) minmax(0, .8fr);
    align-items: center;
    gap: 16px;
    padding: 14px 20px;
    border-top: 1px solid var(--l7-border);
    color: var(--l7-text);
    font-size: .88rem;
}

.l7h-sec-head + .l7h-tr { border-top: 0; }
a.l7h-tr { transition: background-color .12s ease; }
a.l7h-tr:hover { background-color: var(--l7-surface-alt); color: var(--l7-text); }

.l7h-th {
    padding: 10px 20px;
    background-color: var(--l7-surface-alt);
    color: var(--l7-muted);
    font-size: .72rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: .05em;
}

.l7h-td-name { min-width: 0; }

.l7h-td-name strong,
.l7h-td-name small { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

.l7h-td-name strong { color: var(--l7-heading); font-weight: 600; }
.l7h-td-name small { color: var(--l7-muted); font-size: .8rem; }
.l7h-td { min-width: 0; font-variant-numeric: tabular-nums; }
.l7h-td small { color: var(--l7-muted); font-size: .76rem; }

/* Status: pílula clara, como no resto do site */
.l7h-st {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: .2em .7em;
    background-color: var(--l7-bg);
    border-radius: 3px;
    color: var(--l7-muted);
    font-size: .76rem;
    font-weight: 600;
}

.l7h-st::before { content: ""; flex: 0 0 6px; width: 6px; height: 6px; background-color: currentColor; border-radius: 50%; }
.l7h-st.is-success { background-color: var(--l7-success-bg); color: var(--l7-success); }
.l7h-st.is-warning { background-color: var(--l7-warning-bg); color: var(--l7-warning); }
.l7h-st.is-danger  { background-color: var(--l7-danger-bg); color: var(--l7-danger); }

.l7h-empty {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 10px 16px;
    padding: 22px 20px;
    color: var(--l7-muted);
    font-size: .9rem;
}

.l7h-empty a { font-weight: 600; }
.l7h-addon { margin-top: 24px; padding: 18px 20px; }

/* ---- Próxima fatura ---- */
.l7h-inv { padding: 18px 20px 0; }

.l7h-inv-amt {
    display: block;
    color: var(--l7-heading);
    font-size: 1.8rem;
    font-weight: 700;
    line-height: 1.15;
    letter-spacing: -.02em;
    font-variant-numeric: tabular-nums;
}

.l7h-inv-due { display: block; margin-top: 4px; color: var(--l7-muted); font-size: .86rem; }
.l7h-inv-due strong { color: var(--l7-heading); font-weight: 600; }
.l7h-inv-n { display: block; margin-top: 2px; color: var(--l7-faint); font-size: .78rem; }
.l7h-inv.is-late .l7h-inv-amt,
.l7h-inv.is-late .l7h-inv-due strong { color: var(--l7-danger); }

.l7h-invlist { margin: 14px 20px 0; padding: 0; list-style: none; }

.l7h-invlist li {
    display: flex;
    justify-content: space-between;
    gap: 12px;
    padding: 9px 0;
    border-top: 1px solid var(--l7-border);
    font-size: .85rem;
}

.l7h-invlist b { color: var(--l7-heading); font-variant-numeric: tabular-nums; }
.l7h-note { margin: 0; padding: 18px 20px 20px; color: var(--l7-muted); font-size: .88rem; }
.l7h-note + .l7h-btn.is-block { margin-top: 0; }

/* ---- Atalhos ---- */
.l7h-links { display: flex; flex-direction: column; padding: 6px 0; }

.l7h-links a {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 11px 20px;
    color: var(--l7-text);
    font-size: .88rem;
    font-weight: 500;
    transition: background-color .12s ease, color .12s ease;
}

.l7h-links a::after { content: "\2192"; color: var(--l7-faint); transition: transform .12s ease, color .12s ease; }
.l7h-links a:hover { background-color: var(--l7-surface-alt); color: var(--l7-primary-700); }
.l7h-links a:hover::after { color: var(--l7-primary); transform: translateX(3px); }

@media (max-width: 1199.98px) {
    .l7h-grid { grid-template-columns: minmax(0, 1fr); }
}

@media (max-width: 767.98px) {
    .l7h-head h1 { font-size: 1.35rem; }
    .l7h-head-acts { width: 100%; }
    .l7h-head-acts .l7h-btn { flex: 1 1 0; }

    .l7h-alert { flex-direction: column; align-items: flex-start; }

    .l7h-stats { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .l7h-stats a:nth-child(3) { border-left: 0; }
    .l7h-stats a:nth-child(n+3) { border-top: 1px solid var(--l7-border); }
    .l7h-stats b { font-size: 1.5rem; }

    .l7h-th { display: none; }
    .l7h-tr { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px 14px; }
    .l7h-td-name { grid-column: 1 / -1; }

    .l7h-td::before {
        content: attr(data-l);
        display: block;
        margin-bottom: 2px;
        color: var(--l7-faint);
        font-size: .7rem;
        font-weight: 600;
    }
}

/* =========================================================================
   Acabamento geral das páginas internas
   Mesma linguagem do carrinho: painel de canto reto (vem de --l7-radius),
   sem quadradinho de ícone decorativo, selo com canto quase reto.
   ========================================================================= */
/* Ícone decorativo em quadradinho ou solto no título: fora */
.l7-li-ico,
.l7-tile-ico,
.l7-sv-ico,
.l7-srv-ico,
.l7-card-ico,
.l7-link-ico,
.l7-kbhero-in > i,
.l7-card-title h2 > i,
.l7-empty > i { display: none !important; }

/* Sem o ícone, o recuo que alinhava o texto com ele também sai. */
@media (max-width: 991.98px) {
    .l7-sv-field:first-child { padding-left: 0; }
}

/* Selos, pílulas e controles pequenos: canto quase reto */
.badge,
.label,
.l7-pill,
.l7-srv-status .label,
.l7-table .label.status,
.sidebar .list-group-item .badge { border-radius: 3px !important; }

.btn-sm,
.btn-group-sm > .btn,
.btn-xs,
.page-link,
.tooltip-inner,
.dataTables_filter input,
.dataTables_length select,
.l7-tkthead-hash,
.l7-msg-tag,
.l7-file,
.l7-seg-o span,
.l7-tile-edit,
.l7-li-rank,
.l7-inc-prio,
.l7-port { border-radius: 3px; }

/* Busca clara (categoria da base de conhecimento e de downloads) */
.l7-kbsearch.is-light { margin-bottom: 8px; }
.l7-kbsearch.is-light input { border: 1px solid var(--l7-border-strong); box-shadow: var(--l7-shadow); }
.l7-kbsearch.is-light input:focus { border-color: var(--l7-primary); box-shadow: 0 0 0 3px var(--l7-primary-100); }
.l7-kbsearch.is-light button { background-color: var(--l7-primary); border-color: var(--l7-primary); }
.l7-kbsearch.is-light button:hover { background-color: var(--l7-primary-700); }

/* Download restrito */
.l7-lock {
    margin-left: 8px;
    padding: 0 6px;
    background-color: var(--l7-danger-bg);
    border-radius: 3px;
    color: var(--l7-danger);
    font-size: .7rem;
    font-style: normal;
    font-weight: 600;
    line-height: 18px;
    vertical-align: middle;
}

.l7-li-main small.l7-li-meta { color: var(--l7-faint); }

/* Linha de botões no pé da página (Voltar / Editar) */
.l7-backrow { display: flex; justify-content: space-between; gap: 10px; margin-top: 20px; }

/* =========================================================================
   Fatura (viewinvoice.tpl) — página própria, fora do esqueleto do site
   Mesmo desenho da confirmação do pedido: painel central, selo e título
   com a situação, valor na faixa azul-marinho, detalhes embaixo.
   ========================================================================= */
body.l7-invpage { background-color: var(--l7-bg); }

.l7-invwrap { max-width: 760px; margin: 0 auto; padding: 40px 16px 48px; }

.l7-iv {
    background-color: var(--l7-surface);
    border: 1px solid var(--l7-border);
    border-radius: var(--l7-radius);
    box-shadow: var(--l7-shadow);
}

/* Logo da empresa no topo */
.l7-iv-brand { padding: 22px 32px; border-bottom: 1px solid var(--l7-border); text-align: center; }
.l7-iv-brand img { max-width: 220px; max-height: 40px; width: auto; height: auto; }

/* Situação */
.l7-iv-top { padding: 32px 32px 28px; text-align: center; }

.l7-iv-mark {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 56px;
    height: 56px;
    margin-bottom: 16px;
    border-radius: 50%;
    font-size: 1.6rem;
    font-weight: 700;
    line-height: 1;
}

.l7-iv-mark.is-ok   { background-color: var(--l7-success-bg); color: var(--l7-success); }
.l7-iv-mark.is-wait { background-color: var(--l7-warning-bg); color: var(--l7-warning); }
.l7-iv-mark.is-bad  { background-color: var(--l7-danger-bg); color: var(--l7-danger); }
.l7-iv-mark.is-info { background-color: var(--l7-primary-050); color: var(--l7-primary-700); }
.l7-iv-mark.is-off  { background-color: var(--l7-bg); color: var(--l7-muted); }

.l7-iv-top h1 { margin: 0 0 8px; color: var(--l7-heading); font-size: 1.6rem; font-weight: 700; letter-spacing: -.02em; }
.l7-iv-top p { margin: 0; color: var(--l7-muted); font-size: .92rem; line-height: 1.6; }

/* Valor */
.l7-iv-num {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 18px 32px;
    background: linear-gradient(135deg, var(--l7-nav-bg) 0%, var(--l7-nav-bg-2) 100%);
    color: #fff;
}

.l7-iv-num span { color: var(--l7-nav-text); font-size: .88rem; }
.l7-iv-num b { color: #fff; font-size: 1.6rem; font-weight: 700; letter-spacing: -.01em; font-variant-numeric: tabular-nums; white-space: nowrap; }

.l7-iv-body { padding: 26px 32px 30px; }

/* Avisos */
.l7-iv-alert { margin-bottom: 22px; padding: 12px 16px; border: 1px solid; border-radius: 3px; font-size: .9rem; text-align: center; }
.l7-iv-alert.is-ok   { background-color: var(--l7-success-bg); border-color: #bfe8d6; color: #0f6a4a; }
.l7-iv-alert.is-info { background-color: var(--l7-primary-050); border-color: var(--l7-primary-100); color: var(--l7-primary-700); }
.l7-iv-alert.is-bad  { background-color: var(--l7-danger-bg); border-color: #f5c9c8; color: #8d2d2c; }

/* Pagar: botão do gateway centralizado, troca de forma de pagamento embaixo */
.l7-iv-pay {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 14px;
    margin-bottom: 26px;
    padding-bottom: 26px;
    border-bottom: 1px solid var(--l7-border);
    text-align: center;
}

.l7-iv-pay > .btn,
.l7-iv-pay form > .btn,
.l7-iv-pay input[type=submit],
.l7-iv-pay button[type=submit] { min-width: 280px; border-radius: 3px; }
.l7-iv-pay .alert { width: 100%; margin: 0; border-radius: 3px; font-size: .88rem; }

.l7-iv-gw { display: flex; align-items: center; justify-content: center; flex-wrap: wrap; gap: 10px; }
.l7-iv-gw label { margin: 0; color: var(--l7-muted); font-size: .86rem; font-weight: 500; }
.l7-iv-gw .custom-select { width: auto; min-width: 200px; border-radius: 3px; }

.l7-iv-credit { margin-bottom: 26px; padding-bottom: 26px; border-bottom: 1px solid var(--l7-border); text-align: center; }
.l7-iv-credit p { margin: 0 0 10px; color: var(--l7-text); font-size: .9rem; }
.l7-iv-credit form { display: flex; justify-content: center; gap: 10px; }
.l7-iv-credit input { max-width: 160px; border-radius: 3px; }
.l7-iv-credit .btn { border-radius: 3px; }

/* Dados em grade 2x2 */
.l7-iv-info { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px 28px; margin-bottom: 8px; }
.l7-iv-info h4 { margin: 0 0 4px; color: var(--l7-muted); font-size: .8rem; font-weight: 600; }
.l7-iv-info address,
.l7-iv-info p { margin: 0; color: var(--l7-text); font-size: .9rem; line-height: 1.6; }

.l7-iv-sec { margin-top: 26px; padding-top: 22px; border-top: 1px solid var(--l7-border); }
.l7-iv-sec h3 { margin: 0 0 8px; color: var(--l7-heading); font-size: 1rem; font-weight: 700; }
.l7-iv-notes { color: var(--l7-text); font-size: .9rem; }

/* Tabelas */
.l7-iv-table { width: 100%; margin: 0; border-collapse: collapse; font-size: .9rem; }
.l7-iv-table th { padding: 10px 0; border-bottom: 1px solid var(--l7-border-strong); color: var(--l7-muted); font-size: .78rem; font-weight: 600; text-align: left; }
.l7-iv-table th + th, .l7-iv-table td + td { padding-left: 12px; }
.l7-iv-table td { padding: 12px 0; border-bottom: 1px solid var(--l7-border); color: var(--l7-text); vertical-align: top; }
.l7-iv-table .is-r { text-align: right; white-space: nowrap; font-variant-numeric: tabular-nums; }
.l7-iv-table tfoot td { padding: 7px 0; border-bottom: 0; color: var(--l7-muted); }
.l7-iv-table tfoot td.is-r:last-child { color: var(--l7-heading); font-weight: 600; }
.l7-iv-table tfoot tr:first-child td { padding-top: 14px; }
.l7-iv-table tfoot .is-total td { padding-top: 12px; border-top: 1px solid var(--l7-border-strong); color: var(--l7-heading); font-size: 1.02rem; font-weight: 700; }
.l7-iv-table .is-empty { color: var(--l7-muted); text-align: center; }
.l7-iv-tax { margin: 10px 0 0; color: var(--l7-muted); font-size: .8rem; }

/* Ações */
.l7-iv-acts { display: flex; justify-content: center; flex-wrap: wrap; gap: 10px; margin-top: 28px; }

.l7-iv-btn {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: .7rem 1.3rem;
    background-color: var(--l7-primary);
    border: 1px solid var(--l7-primary);
    border-radius: 3px;
    color: #fff;
    font-size: .9rem;
    font-weight: 600;
}

.l7-iv-btn:hover { background-color: var(--l7-primary-700); border-color: var(--l7-primary-700); color: #fff; text-decoration: none; }
.l7-iv-btn.is-ghost { background-color: #fff; border-color: var(--l7-border-strong); color: var(--l7-heading); }
.l7-iv-btn.is-ghost:hover { border-color: var(--l7-primary); color: var(--l7-primary-700); }

.l7-iv-back { margin: 18px 0 0; text-align: center; }
.l7-iv-back a { color: var(--l7-muted); font-size: .88rem; font-weight: 500; }
.l7-iv-back a:hover { color: var(--l7-primary-700); }

@media (max-width: 575.98px) {
    .l7-iv-top, .l7-iv-body { padding-left: 18px; padding-right: 18px; }
    .l7-iv-num { flex-direction: column; align-items: flex-start; padding: 16px 18px; }
    .l7-iv-info { grid-template-columns: minmax(0, 1fr); }
    .l7-iv-pay > .btn, .l7-iv-pay form > .btn, .l7-iv-pay input[type=submit], .l7-iv-pay button[type=submit] { min-width: 0; width: 100%; }
}

@media print {
    body.l7-invpage { background: #fff; }
    .l7-invwrap { padding: 0; max-width: none; }
    .l7-iv { border: 0; box-shadow: none; }
    .l7-iv-num { -webkit-print-color-adjust: exact; print-color-adjust: exact; }
}
/* =========================================================================
   Confirmação do pedido (orderforms/standard_cart/complete.tpl)
   Um painel reto: situação no topo, número do pedido na faixa azul-marinho
   (a mesma do total no carrinho), próximo passo embaixo.
   ========================================================================= */
/* Container com nome próprio: .ay-done já é o botão verde do checkout.
   O #id vence o "margin: 0" que o CSS do standard_cart aplica nele. */
#order-standard_cart.ay-thanks { max-width: 680px; margin: 12px auto 0; padding-bottom: 40px; }

.ay-done-card {
    background-color: var(--l7-surface);
    border: 1px solid var(--l7-border);
    border-radius: var(--l7-radius);
    box-shadow: var(--l7-shadow);
    text-align: center;
}

.ay-done-top { padding: 36px 32px 28px; }

.ay-done-mark {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 56px;
    height: 56px;
    margin-bottom: 16px;
    border-radius: 50%;
    font-size: 1.6rem;
    font-weight: 700;
    line-height: 1;
}

.ay-done-mark.is-ok   { background-color: var(--l7-success-bg); color: var(--l7-success); }
.ay-done-mark.is-wait { background-color: var(--l7-warning-bg); color: var(--l7-warning); }

.ay-done-top h1 { margin: 0 0 8px; color: var(--l7-heading); font-size: 1.6rem; font-weight: 700; letter-spacing: -.02em; }
.ay-done-top p { max-width: 480px; margin: 0 auto; color: var(--l7-muted); font-size: .92rem; line-height: 1.6; }

.ay-done-num {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 18px 32px;
    background: linear-gradient(135deg, var(--l7-nav-bg) 0%, var(--l7-nav-bg-2) 100%);
    color: #fff;
    text-align: left;
}

.ay-done-num span { color: var(--l7-nav-text); font-size: .88rem; }
.ay-done-num b { color: #fff; font-size: 1.5rem; font-weight: 700; letter-spacing: .02em; font-variant-numeric: tabular-nums; }

.ay-done-body { padding: 26px 32px 32px; }
.ay-done-body .ay-warn { text-align: left; }
.ay-done-note { margin: 0 0 22px; color: var(--l7-muted); font-size: .88rem; line-height: 1.6; }

.ay-done-acts { display: flex; flex-direction: column; align-items: center; gap: 14px; }
.ay-done-acts .ay-plan-go { width: auto; min-width: 280px; padding: .8rem 1.6rem; font-size: .95rem; }
.ay-done-link { color: var(--l7-muted); font-size: .88rem; font-weight: 500; }
.ay-done-link:hover { color: var(--l7-primary-700); }

.ay-done-recs { margin-top: 28px; text-align: left; }

@media (max-width: 575.98px) {
    .ay-done-top, .ay-done-body { padding-left: 18px; padding-right: 18px; }
    .ay-done-num { flex-direction: column; align-items: flex-start; padding: 16px 18px; }
    .ay-done-acts .ay-plan-go { width: 100%; min-width: 0; }
}

/* =========================================================================
   Detalhes do produto (clientareaproductdetails.tpl)
   Resumo do serviço no painel do tema; "Gerenciar" já aberto embaixo.
   ========================================================================= */
.l7-pd-head {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 16px;
    padding: 20px 24px;
    border-bottom: 1px solid var(--l7-border);
}

.l7-pd-name { min-width: 0; }
.l7-pd-name span { display: block; margin-bottom: 2px; color: var(--l7-muted); font-size: .82rem; }
.l7-pd-name h2 { margin: 0; color: var(--l7-heading); font-size: 1.4rem; font-weight: 700; letter-spacing: -.02em; }
.l7-pd-name small { display: block; margin-top: 3px; color: var(--l7-primary-700); font-size: .86rem; font-weight: 600; }
.l7-pd-head .l7-pill { flex: 0 0 auto; margin-top: 4px; }

/* Dados em grade: rótulo pequeno em cima, valor embaixo */
.l7-pd-facts {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(190px, 1fr));
    gap: 20px 28px;
    margin: 0;
    padding: 22px 24px;
}

.l7-pd-facts dt { margin: 0 0 3px; color: var(--l7-muted); font-size: .8rem; font-weight: 500; }
.l7-pd-facts dd { margin: 0; color: var(--l7-heading); font-size: .95rem; font-weight: 600; overflow-wrap: anywhere; }
.l7-pd-facts .is-wide { grid-column: 1 / -1; }
.l7-pd-facts .is-bad dd { color: var(--l7-danger); }

.l7-pd-acts {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 10px;
    padding: 16px 24px;
    background-color: var(--l7-surface-alt);
    border-top: 1px solid var(--l7-border);
}

.l7-pd-acts .btn { border-radius: 3px; }
/* Cancelamento: botão vazado vermelho à direita; enche ao passar o mouse.
   Solicitado: selo âmbar, sem clique. */
.l7-pd-cancel {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    margin-left: auto;
    padding: 8px 16px;
    color: var(--l7-danger);
    background-color: var(--l7-surface);
    border: 1px solid var(--l7-danger);
    border-radius: var(--l7-radius-sm);
    font-size: .88rem;
    font-weight: 600;
    line-height: 1.4;
    text-decoration: none;
    transition: background-color .15s ease, color .15s ease, box-shadow .15s ease;
}
.l7-pd-cancel:hover,
.l7-pd-cancel:focus-visible {
    color: #fff;
    background-color: var(--l7-danger);
    text-decoration: none;
    box-shadow: 0 2px 8px rgba(220, 74, 72, .25);
}
.l7-pd-cancel:focus-visible { outline: 2px solid var(--l7-danger-bg); outline-offset: 2px; }
.l7-pd-cancel.is-pending {
    color: #8a560f;
    background-color: var(--l7-warning-bg);
    border-color: var(--l7-warning);
    cursor: default;
    box-shadow: none;
}

/* "Gerenciar" */
.l7-pd-manage .module-client-area { padding: 22px 24px; }
.l7-pd-manage .l7-pd-facts + .module-client-area,
.l7-pd-manage .l7-pd-links + .module-client-area { border-top: 1px solid var(--l7-border); }
.l7-pd-links { display: flex; flex-wrap: wrap; gap: 10px; padding: 0 24px 22px; }
.l7-pd-links .btn { border-radius: 3px; }
.l7-pd-extra { padding: 22px 24px; border-top: 1px solid var(--l7-border); }
.l7-pd-manage > .l7-pd-extra:first-child { border-top: 0; }

@media (max-width: 575.98px) {
    .l7-pd-head, .l7-pd-facts, .l7-pd-acts, .l7-pd-manage .module-client-area, .l7-pd-extra { padding-left: 16px; padding-right: 16px; }
    .l7-pd-head { flex-direction: column; }
    .l7-pd-cancel { margin-left: 0; }
}

/* Página de produto sem barra lateral: conteúdo mais largo e centralizado */
body.l7-wide .l7-main section#main-body > .container,
body.l7-wide .l7-page-head > .container,
body.l7-wide .l7-main .master-breadcrumb > .container { max-width: 1440px; }

.l7-pd-acts .btn i { margin-right: 4px; }
.l7-pd-back { display: inline-block; margin-bottom: 14px; color: var(--l7-muted); font-size: .88rem; font-weight: 500; }
.l7-pd-back:hover { color: var(--l7-primary-700); }

/* Valor e vencimento: faixa azul-marinho, a mesma do carrinho e da fatura */
.l7-pd-money {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 14px 24px;
    padding: 18px 24px;
    background: linear-gradient(135deg, var(--l7-nav-bg) 0%, var(--l7-nav-bg-2) 100%);
    color: #fff;
}

.l7-pd-money > div { display: flex; flex-direction: column; gap: 2px; }
.l7-pd-money .is-r { align-items: flex-end; text-align: right; }
.l7-pd-money span { color: var(--l7-nav-text); font-size: .82rem; }
.l7-pd-money b { color: #fff; font-size: 1.55rem; font-weight: 700; letter-spacing: -.01em; font-variant-numeric: tabular-nums; }
.l7-pd-money small { color: var(--l7-nav-text); font-size: .82rem; }

/* Especificações | Faturamento: duas colunas com lista "rótulo ... valor" */
.l7-pd-cols { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); }
.l7-pd-cols.is-single { grid-template-columns: minmax(0, 1fr); }
.l7-pd-col { padding: 20px 24px 22px; }
.l7-pd-col + .l7-pd-col { border-left: 1px solid var(--l7-border); }
.l7-pd-col h3 { margin: 0 0 8px; color: var(--l7-heading); font-size: .98rem; font-weight: 700; }

.l7-pd-list { margin: 0; }

.l7-pd-list > div {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 16px;
    padding: 10px 0;
    border-bottom: 1px solid var(--l7-border);
}

.l7-pd-list > div:last-child { border-bottom: 0; }
.l7-pd-list dt { margin: 0; color: var(--l7-muted); font-size: .88rem; font-weight: 500; }
.l7-pd-list dd { margin: 0; color: var(--l7-heading); font-size: .92rem; font-weight: 600; text-align: right; overflow-wrap: anywhere; }
.l7-pd-list .is-bad dd { color: var(--l7-danger); }

@media (max-width: 767.98px) {
    .l7-pd-cols { grid-template-columns: minmax(0, 1fr); }
    .l7-pd-col + .l7-pd-col { border-left: 0; border-top: 1px solid var(--l7-border); }
    .l7-pd-money .is-r { align-items: flex-start; text-align: left; }
}

@media (max-width: 575.98px) {
    .l7-pd-money, .l7-pd-col { padding-left: 16px; padding-right: 16px; }
}

/* =========================================================================
   Upgrade e Serviços Adicionais (upgrade.tpl)
   Plano atual na faixa azul-marinho; planos em cartões como os da loja;
   opções adicionais em linhas "nome | escolha".
   ========================================================================= */
.l7-up-now {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 12px 32px;
    padding: 20px 24px;
    background: linear-gradient(135deg, var(--l7-nav-bg) 0%, var(--l7-nav-bg-2) 100%);
    border: 0;
    color: #fff;
}

.l7-up-now > div { display: flex; flex-direction: column; gap: 2px; }
.l7-up-now span { color: var(--l7-nav-text); font-size: .82rem; }
.l7-up-now b { color: #fff; font-size: 1.4rem; font-weight: 700; letter-spacing: -.01em; }
.l7-up-now small { color: var(--l7-nav-text); font-size: .84rem; }
.l7-up-now p { max-width: 460px; margin: 0; color: var(--l7-nav-text); font-size: .88rem; line-height: 1.55; }

.l7-up-cards { margin-top: 4px; }
.l7-up-label { display: block; margin-bottom: 6px; color: var(--l7-muted); font-size: .8rem; font-weight: 500; }
.l7-up-select { margin-bottom: 12px; border-radius: 3px; font-weight: 600; }
.l7-up-go { display: flex; align-items: center; justify-content: center; gap: 8px; border-radius: 3px; font-weight: 600; }
.l7-up-go i { font-size: .74rem; }
.l7-up-back { margin: 20px 0 0; }
.l7-up-back a { color: var(--l7-muted); font-size: .88rem; font-weight: 500; }
.l7-up-back a:hover { color: var(--l7-primary-700); }

/* Serviços Adicionais */
.l7-co-row {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(220px, 360px);
    align-items: center;
    gap: 12px 28px;
    padding: 16px 24px;
    border-bottom: 1px solid var(--l7-border);
}

.l7-co-name strong { display: block; color: var(--l7-heading); font-size: .95rem; font-weight: 600; }
.l7-co-name small { display: block; margin-top: 2px; color: var(--l7-muted); font-size: .84rem; }
.l7-co-new .custom-select,
.l7-co-new .form-control { border-radius: 3px; }
.l7-co-check { display: inline-flex; align-items: center; gap: 8px; margin: 0; font-weight: 500; cursor: pointer; }
.l7-co-qty { display: flex; align-items: center; gap: 10px; }
.l7-co-qty .form-control { max-width: 100px; }
.l7-co-qty span { color: var(--l7-muted); font-size: .88rem; }

.l7-co-foot {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 16px 24px;
    background-color: var(--l7-surface-alt);
}

.l7-co-foot .btn { border-radius: 3px; font-weight: 600; }
.l7-co-back { color: var(--l7-muted); font-size: .88rem; font-weight: 500; }
.l7-co-back:hover { color: var(--l7-primary-700); }

@media (max-width: 767.98px) {
    .l7-co-row { grid-template-columns: minmax(0, 1fr); padding: 14px 16px; }
    .l7-co-foot, .l7-up-now { padding-left: 16px; padding-right: 16px; }
}

/* Addons de produto (orderforms/standard_cart/addons.tpl): mesmo cartão da
   loja, mas com formulário dentro — o botão não cobre o cartão inteiro,
   senão a caixa de escolha do serviço não abre. */
.ay-addon .ay-plan-go::after { display: none; }
.ay-addon .ay-plan-go { border: 0; cursor: pointer; }
.ay-addon-label { display: block; margin-bottom: 6px; color: var(--l7-muted); font-size: .8rem; font-weight: 500; }
.ay-addon-select { margin-bottom: 12px; border-radius: 3px; }

/* Tela inicial com três números (sem Domínios) */
.l7h-stats.is-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }

@media (max-width: 767.98px) {
    .l7h-stats.is-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
    .l7h-stats.is-3 a:nth-child(3) { border-left: 1px solid var(--l7-border); }
    .l7h-stats.is-3 a:nth-child(n+3) { border-top: 0; }
    .l7h-stats.is-3 a { padding: 14px 12px; }
}

/* Bloco "Pagamentos Automáticos" que um hook do servidor injeta em
   Detalhes da Conta (id="mpBoxInject"). As colunas do formulário flutuam;
   sem o clear o bloco entrava POR CIMA delas e escondia todos os campos.
   Os !important vencem os estilos inline que o hook coloca. */
#mpBoxInject {
    clear: both;
    float: none !important;
    width: 100%;
    margin-top: 8px !important;
}

#mpBoxInject > .form-group {
    margin-bottom: 0;
    padding: 16px 18px !important;
    background-color: var(--l7-surface-alt) !important;
    border: 1px solid var(--l7-border) !important;
    border-radius: 0 !important;
}

#mpBoxInject .control-label {
    margin-bottom: 4px !important;
    color: var(--l7-heading) !important;
    font-size: .95rem !important;
    font-weight: 700 !important;
}

#mpBoxInject .control-label i { display: none; }
#mpBoxInject .control-label + div { color: var(--l7-muted) !important; font-size: .88rem !important; }

/* Registrar: logo e título centralizados no topo do card, como no Entrar */
.l7-panel-head.is-brand { text-align: center; }
.l7-panel-head.is-brand .l7-login-brand { margin-bottom: 14px; }
.l7-panel-head.is-brand h1 { margin: 0; }

/* Indicação de idioma/moeda sem clique (moeda travada em BRL) */
.l7-locale-static { cursor: default; }

/* Aviso quando o WHMCS desativa upgrade/opções (fatura em aberto) */
.l7-pd-acts .btn.disabled { opacity: .55; }
.l7-pd-lock { flex: 1 1 100%; order: 10; margin: 4px 0 0; color: #7a4f0e; font-size: .84rem; }
.l7-pd-lock a { margin-left: 4px; font-weight: 600; }

/* Configurar: caixa de erros do WHMCS (hostname/senha recusados etc.) */
.ay-verr { margin: 16px 24px 0; border-radius: 3px; font-size: .88rem; }
.ay-verr p { margin: 0 0 4px; font-weight: 600; }
.ay-verr ul { margin: 0; padding-left: 18px; }

/* Cupom no resumo "Seu pedido" (hook ayoo_promo_sidebar.php v7): uma linha
   verde logo antes do total, e o total com o valor cheio riscado em cima. */
.ay-osum .ayoo-promo { margin-top: 6px; padding-top: 6px; border-top: 1px solid var(--l7-border); }
.ay-osum-row.is-off > span,
.ay-osum-row.is-off em,
.ay-osum-row.is-off > b { color: var(--l7-success); }
.ay-osum-row.is-off em { letter-spacing: .02em; }
.ay-osum .ayoo-note { display: block; margin: -2px 0 4px; color: var(--l7-muted); font-size: .74rem; }
.ay-osum-total .amt { text-align: right; }
.ay-osum-total .ayoo-was {
    display: block;
    color: var(--l7-nav-text);
    font-size: .8rem;
    font-weight: 400;
    letter-spacing: 0;
    line-height: 1.4;
    text-decoration: line-through;
}