/* =====================================================
   Orbex — tema premium para area do cliente WHMCS (filho do Six)
   Produto licenciado. Ver includes/hooks/orbex_license.php
   Marca: violeta #6d28d9 | teal #0d9488 | destaque ouro #fbbf24
===================================================== */

@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700;800;900&display=swap');

:root {
    /* Marca - troque so estes valores para recolorir o tema inteiro */
    --obx-navy: #4c1d95;
    --obx-navy-d: #2e1065;
    --obx-navy-l: #6d28d9;
    --obx-green: #0d9488;
    --obx-green-d: #0f766e;
    --obx-yellow: #fbbf24;
    --obx-yellow-soft: #fef3c7;
    --obx-gray-50: #f8f7fc;
    --obx-gray-100: #efedf7;
    --obx-gray-200: #ded9ee;
    --obx-text: #0f0a1f;
    --obx-font: 'Inter', 'Open Sans', Verdana, Tahoma, sans-serif;

    /* Estados */
    --obx-success: #0d9488;
    --obx-warning: #fbbf24;
    --obx-danger: #dc2626;
    --obx-info: #6d28d9;

    /* Icones duotone (tons amarrados a marca - ver includes/icons.tpl) */
    --obx-icon-1: #ede9fe;
    --obx-icon-2: #6d28d9;
    --obx-icon-3: #2e1065;
    --obx-icon-4: #ffffff;

    /* Escala de radius e sombra */
    --obx-radius-sm: 4px;
    --obx-radius-base: 6px;
    --obx-radius-lg: 12px;
    --obx-shadow-sm: 0 1px 1px rgba(15,10,31,.05);
    --obx-shadow-base: 0 2px 24px rgba(15,10,31,.08);
    --obx-shadow-lg: 0 8px 32px rgba(15,10,31,.1);
}

/* ---------- Variantes de cor ----------
   Troca-se o tema inteiro mudando so o atributo data-obx-color no <body>
   (ver header.tpl, variavel $obxColor). Nenhum outro CSS precisa mudar -
   todo componente ja referencia estas variaveis, nunca cor fixa. */
[data-obx-color="azul"] {
    --obx-navy: #1e40af;
    --obx-navy-d: #172554;
    --obx-navy-l: #2563eb;
    --obx-icon-1: #dbeafe;
    --obx-icon-2: #2563eb;
    --obx-icon-3: #172554;
    --obx-info: #2563eb;
    --primary-50: #eff6ff;
    --primary-100: #dbeafe;
    --primary-200: #bfdbfe;
    --primary-300: #93c5fd;
    --primary-400: #60a5fa;
    --primary-500: #3b82f6;
    --primary-600: #2563eb;
    --primary-700: #1d4ed8;
    --primary-800: #1e40af;
    --primary-900: #1e3a8a;
    --primary-950: #172554;
    --info: #2563eb;
    --info-lifted: #1e40af;
    --info-accented: #172554;
}

[data-obx-color="verde"] {
    --obx-navy: #166534;
    --obx-navy-d: #052e16;
    --obx-navy-l: #16a34a;
    --obx-green: #2563eb;
    --obx-green-d: #1d4ed8;
    --obx-icon-1: #dcfce7;
    --obx-icon-2: #16a34a;
    --obx-icon-3: #052e16;
    --obx-info: #16a34a;
    --primary-50: #f0fdf4;
    --primary-100: #dcfce7;
    --primary-200: #bbf7d0;
    --primary-300: #86efac;
    --primary-400: #4ade80;
    --primary-500: #22c55e;
    --primary-600: #16a34a;
    --primary-700: #15803d;
    --primary-800: #166534;
    --primary-900: #14532d;
    --primary-950: #052e16;
    --success: #2563eb;
    --success-lifted: #1d4ed8;
    --success-accented: #172554;
    --info: #16a34a;
    --info-lifted: #166534;
    --info-accented: #052e16;
}

[data-obx-color="vermelho"] {
    --obx-navy: #991b1b;
    --obx-navy-d: #450a0a;
    --obx-navy-l: #dc2626;
    --obx-icon-1: #fee2e2;
    --obx-icon-2: #dc2626;
    --obx-icon-3: #450a0a;
    --obx-info: #dc2626;
    --primary-50: #fef2f2;
    --primary-100: #fee2e2;
    --primary-200: #fecaca;
    --primary-300: #fca5a5;
    --primary-400: #f87171;
    --primary-500: #ef4444;
    --primary-600: #dc2626;
    --primary-700: #b91c1c;
    --primary-800: #991b1b;
    --primary-900: #7f1d1d;
    --primary-950: #450a0a;
    --info: #dc2626;
    --info-lifted: #991b1b;
    --info-accented: #450a0a;
}

/* ---------- Base ---------- */
html {
    font-size: 15px;
}

body,
input,
button,
select,
textarea {
    font-family: var(--obx-font);
    color: var(--obx-text);
}

body {
    background-color: #f6f5fb;
    font-size: 15px;
}

/* Contraste editorial de peso: titulos grandes bem pesados, subtitulos leves */
h1, h2 {
    font-family: var(--obx-font);
    font-weight: 900;
    color: var(--obx-navy);
    letter-spacing: -.3px;
}

h3 {
    font-family: var(--obx-font);
    font-weight: 700;
    color: var(--obx-navy);
}

h4, h5, h6 {
    font-family: var(--obx-font);
    font-weight: 300;
    color: var(--obx-navy);
}

a {
    color: var(--obx-navy);
}

a:hover,
a:focus {
    color: var(--obx-green-d);
}

/* Icones duotone (Font Awesome Pro duotone, ja incluso no WHMCS) amarrados a marca.
   Use classe "fad" em vez de "fas" em qualquer icone para herdar o estilo. */
.fad, .fa-duotone {
    --fa-primary-color: var(--obx-icon-2);
    --fa-secondary-color: var(--obx-icon-1);
    --fa-secondary-opacity: 1;
}

.obx-login-badge .fad,
.panel-accent-primary .fad {
    --fa-primary-color: var(--obx-icon-4);
    --fa-secondary-color: rgba(255,255,255,.35);
}

.text-muted,
.help-block,
small,
.small {
    color: #222;
}

/* ---------- Layout: menu lateral + barra superior ---------- */
:root {
    --obx-sb: 132px;
    --obx-top: 84px;
    --obx-flyout-w: 248px;
}

#obx-sidebar {
    position: fixed;
    top: 0;
    left: 0;
    bottom: 0;
    width: var(--obx-sb);
    background: #fff;
    border-right: 1px solid var(--obx-gray-200);
    display: flex;
    flex-direction: column;
    z-index: 1040;
    overflow-y: auto;
}

#obx-sidebar .obx-brand {
    display: flex;
    align-items: center;
    justify-content: center;
    height: var(--obx-top);
    padding: 0 10px;
    border-bottom: 1px solid var(--obx-gray-200);
    flex-shrink: 0;
}

#obx-sidebar .obx-brand img {
    max-height: 40px;
    max-width: 80px;
    width: auto;
}

#obx-nav {
    flex: 1;
    display: flex;
    flex-direction: column;
    padding: 14px 12px;
}

.obx-menu {
    list-style: none;
    margin: 0;
    padding: 0;
}

.obx-menu > li {
    margin-bottom: 4px;
    position: relative;
}

.obx-menu a {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 11px 14px;
    border-radius: 10px;
    color: var(--obx-text);
    font-size: 15px;
    font-weight: 600;
    text-decoration: none;
    transition: background .15s, color .15s;
}

.obx-menu a:hover,
.obx-menu a:focus {
    background-color: var(--obx-yellow);
    color: var(--obx-navy);
}

.obx-menu .obx-ico {
    width: 22px;
    text-align: center;
    font-size: 16px;
    color: var(--obx-navy);
}

.obx-menu .obx-label {
    flex: 1;
}

.obx-menu .caret {
    margin-left: auto;
    transition: transform .15s;
}

/* Itens principais (nivel 1): icone grande em cima, rotulo embaixo,
   estilo "app launcher" como no Lagom. Os itens de dropdown (nivel 2)
   continuam no formato horizontal normal, definido mais abaixo. */
.obx-menu > li > a {
    flex-direction: column;
    justify-content: center;
    gap: 4px;
    padding: 14px 8px;
    border-radius: 14px;
    text-align: center;
}

.obx-menu > li > a:hover,
.obx-menu > li > a:focus {
    background-color: var(--obx-icon-1);
    color: var(--obx-navy);
}

.obx-menu > li > a .obx-ico {
    width: 42px;
    height: 42px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 21px;
    color: var(--obx-icon-2);
}

.obx-menu > li > a .obx-label {
    flex: none;
    font-size: 12.5px;
    font-weight: 700;
}

.obx-menu > li > a .caret {
    margin: 0;
    font-size: 10px;
    opacity: .55;
}

.obx-menu .open > a .caret {
    transform: rotate(180deg);
}

.obx-menu .open > a {
    background-color: var(--obx-icon-1);
}

/* Painel flutuante (flyout): em vez de expandir inline, o submenu abre
   como um painel fixo ao lado do trilho de icones - mesmo padrao do
   menu lateral do Lagom (rail estreito + flyout com os itens do grupo). */
.obx-menu .dropdown-menu {
    position: fixed;
    top: 0;
    left: var(--obx-sb);
    bottom: 0;
    float: none;
    display: none;
    width: var(--obx-flyout-w);
    min-width: 0;
    margin: 0;
    padding: 24px 14px;
    background: #fff;
    border: 0;
    border-right: 1px solid var(--obx-gray-200);
    box-shadow: 10px 0 28px rgba(10, 20, 50, .08);
    overflow-y: auto;
    z-index: 1038;
}

.obx-menu .open > .dropdown-menu {
    display: block;
}

.obx-flyout-title {
    padding: 2px 12px 14px;
    font-size: 11px;
    font-weight: 800;
    letter-spacing: .07em;
    text-transform: uppercase;
    color: #9ca3af;
}

.obx-menu .dropdown-menu > li > a {
    color: var(--obx-text);
    font-size: 14px;
    font-weight: 600;
    padding: 10px 12px;
    border-radius: 10px;
    white-space: normal;
}

.obx-menu .dropdown-menu > li > a:hover,
.obx-menu .dropdown-menu > li > a:focus,
.obx-menu .dropdown-menu > li.active > a {
    background-color: var(--obx-yellow);
    color: var(--obx-navy);
}

.obx-menu .nav-divider {
    height: 1px;
    margin: 6px 8px;
    background: var(--obx-gray-200);
}

.obx-menu .nav-divider > a {
    display: none;
}

.obx-menu .dropdown-menu > li.active > a {
    background-color: var(--obx-navy);
    color: #fff;
}

/* Item de nivel 1 ativo: destaque leve (estilo "app launcher"), nao
   preenchimento solido - mantem o icone colorido em vez de virar branco. */
.obx-menu > li.active > a {
    background-color: var(--obx-icon-1);
    color: var(--obx-navy);
}

.obx-menu > li.active > a .obx-ico {
    color: var(--obx-navy);
}

.obx-menu .badge {
    margin-left: auto;
    background: #000;
    color: #fff;
}

.obx-back-site {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 4px;
    margin-top: auto;
    margin: 12px;
    padding: 10px 6px;
    border-radius: 10px;
    border: 1px solid var(--obx-gray-200);
    color: var(--obx-text);
    font-weight: 600;
    font-size: 11.5px;
    line-height: 1.25;
    text-align: center;
    text-decoration: none;
    white-space: normal;
    word-break: break-word;
}

.obx-back-site i {
    font-size: 13px;
}

.obx-back-site:hover,
.obx-back-site:focus {
    background-color: var(--obx-yellow);
    border-color: var(--obx-yellow);
    color: var(--obx-navy);
    text-decoration: none;
}

#obx-content {
    margin-left: var(--obx-sb);
    min-height: 100vh;
    display: flex;
    flex-direction: column;
}

#obx-topbar {
    position: sticky;
    top: 0;
    z-index: 1030;
    height: var(--obx-top);
    background: #fff;
    border-bottom: 1px solid var(--obx-gray-200);
}

/* Em monitores muito largos (ultrawide, 4K etc.) o conteudo principal
   ja fica limitado a 1280px e centralizado - sem isso aqui, os itens da
   barra superior (notificacoes, conta) ficariam colados no canto da tela,
   bem longe do conteudo centralizado logo abaixo. Mantemos o fundo branco
   esticando a largura toda, mas o conteudo em si segue o mesmo limite. */
.obx-topbar-inner {
    max-width: 1280px;
    height: 100%;
    margin: 0 auto;
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 8px;
    padding: 0 28px;
}

#obx-topbar .top-nav,
#obx-topbar .obx-account {
    display: flex;
    align-items: center;
    gap: 6px;
    margin: 0;
    padding: 0;
    list-style: none;
}

#obx-topbar .obx-account:before,
#obx-topbar .obx-account:after {
    display: none;
}

#obx-topbar .top-nav > li > a,
#obx-topbar .obx-account > li > a {
    display: block;
    padding: 8px 12px;
    border-radius: 8px;
    color: var(--obx-text);
    font-size: 15px;
    font-weight: 600;
    transition: background .15s, color .15s;
}

#obx-topbar .top-nav > li > a:hover,
#obx-topbar .top-nav > li > a:focus,
#obx-topbar .obx-account > li > a:hover,
#obx-topbar .obx-account > li > a:focus,
#obx-topbar .obx-account > .open > a {
    background-color: var(--obx-yellow);
    color: var(--obx-navy);
    text-decoration: none;
}

#obx-topbar .top-nav > li.primary-action > a.btn {
    background-color: var(--obx-green);
    border: 0;
    color: #fff;
    font-weight: 700;
}

#obx-topbar .top-nav > li.primary-action > a.btn:hover,
#obx-topbar .top-nav > li.primary-action > a.btn:focus {
    background-color: var(--obx-green-d);
    color: #fff;
}

#obx-topbar .obx-account .dropdown-menu {
    right: 0;
    left: auto;
    border: 1px solid var(--obx-gray-200);
    border-radius: 12px;
    box-shadow: 0 16px 36px rgba(10, 20, 50, .14);
    padding: 6px;
}

#obx-topbar .obx-account .dropdown-menu > li > a {
    color: var(--obx-text);
    font-size: 15px;
    padding: 9px 14px;
    border-radius: 7px;
}

#obx-topbar .obx-account .dropdown-menu > li > a:hover,
#obx-topbar .obx-account .dropdown-menu > li > a:focus {
    background-color: var(--obx-yellow);
    color: var(--obx-navy);
}

.obx-burger {
    display: none;
    margin-right: auto;
    padding: 8px 12px;
    font-size: 20px;
    color: var(--obx-navy);
    background: transparent;
    border: 1px solid var(--obx-gray-200);
    border-radius: 8px;
}

.obx-overlay {
    display: none;
}

#obx-content .container {
    width: auto;
    max-width: 1280px;
    padding-left: 32px;
    padding-right: 32px;
}

section#main-body {
    flex: 1;
    padding: 28px 0;
    background: transparent;
}

section#footer {
    margin-top: auto;
}

@media (max-width: 991px) {
    #obx-sidebar {
        width: 220px;
        transform: translateX(-100%);
        transition: transform .2s ease;
    }

    #obx-sidebar .obx-menu > li > a {
        flex-direction: row;
        text-align: left;
        border-radius: 10px;
    }

    #obx-sidebar .obx-menu > li > a .obx-ico {
        width: 28px;
        height: 28px;
        font-size: 16px;
    }

    #obx-sidebar .obx-menu > li > a .obx-label {
        font-size: 14.5px;
    }

    #obx-shell.obx-open #obx-sidebar {
        transform: none;
        box-shadow: 0 0 40px rgba(0, 0, 0, .25);
    }

    .obx-menu .dropdown-menu {
        left: 220px;
        width: calc(100vw - 220px);
    }

    #obx-shell.obx-open .obx-overlay {
        display: block;
        position: fixed;
        top: 0;
        right: 0;
        bottom: 0;
        left: 0;
        z-index: 1035;
        background: rgba(0, 0, 0, .4);
    }

    #obx-content {
        margin-left: 0;
    }

    .obx-burger {
        display: inline-flex;
    }

    .obx-topbar-inner {
        padding: 0 14px;
    }

    #obx-content .container {
        padding-left: 16px;
        padding-right: 16px;
    }
}

/* ---------- Titulo da pagina ---------- */
.header-lined {
    border-bottom: 0;
    margin-bottom: 20px;
}

.header-lined h1 {
    font-size: 2.1rem;
    font-weight: 800;
    color: var(--obx-text);
}

.header-lined h1 small {
    color: #222;
}

.breadcrumb {
    padding: 0;
    background: transparent;
}

.breadcrumb a {
    color: var(--obx-text);
}

/* ---------- Home da area do cliente ---------- */
.obx-welcome h2 {
    margin: 0 0 4px;
    font-size: 2rem;
    font-weight: 800;
    color: var(--obx-text);
}

.obx-welcome p {
    margin: 0 0 22px;
    color: #222;
}

.obx-quick {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    margin: 4px 0 26px;
}

.obx-quick-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: 1 1 200px;
    gap: 10px;
    padding: 12px 20px;
    border: 1px solid var(--obx-gray-200);
    border-radius: 12px;
    background: #fff;
    color: var(--obx-text);
    font-weight: 600;
    text-decoration: none;
    box-shadow: 0 2px 8px rgba(10, 20, 50, .05);
    transition: background .15s, border-color .15s, color .15s;
}

.obx-quick-btn i {
    color: var(--obx-green);
}

.obx-quick-btn:hover,
.obx-quick-btn:focus {
    background-color: var(--obx-yellow);
    border-color: var(--obx-yellow);
    color: var(--obx-navy);
    text-decoration: none;
}

.obx-quick-btn:hover i {
    color: var(--obx-navy);
}

/* ---------- Card de perfil (dashboard) ---------- */
.obx-dash-top {
    margin-bottom: 20px;
}

.obx-profile-card {
    background: linear-gradient(135deg, var(--obx-navy-l), var(--obx-navy) 70%);
    border-radius: 16px;
    padding: 26px 24px;
    color: #fff;
    max-width: 320px;
    box-shadow: 0 10px 30px rgba(46, 16, 101, .18);
}

.obx-profile-avatar {
    width: 54px;
    height: 54px;
    border-radius: 50%;
    background: rgba(255, 255, 255, .18);
    border: 1px solid rgba(255, 255, 255, .3);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 18px;
    font-weight: 900;
    letter-spacing: .02em;
    margin-bottom: 14px;
}

.obx-profile-card h3 {
    color: #fff;
    font-size: 17px;
    font-weight: 800;
    margin: 0 0 3px;
}

.obx-profile-contact {
    font-size: 13px;
    color: rgba(255, 255, 255, .78);
}

.obx-profile-address {
    font-size: 12.5px;
    color: rgba(255, 255, 255, .6);
    line-height: 1.6;
    margin: 12px 0 18px;
}

.obx-profile-card .btn {
    font-size: 12.5px;
    font-weight: 700;
    padding: 7px 15px;
    border-radius: 7px;
    margin-right: 6px;
}

.obx-btn-light {
    background: #fff;
    color: var(--obx-navy);
    border: 0;
}

.obx-btn-light:hover {
    background: var(--obx-yellow-soft);
    color: var(--obx-navy-d);
}

.obx-btn-ghost-light {
    background: transparent;
    border: 1px solid rgba(255, 255, 255, .4);
    color: #fff;
}

.obx-btn-ghost-light:hover {
    background: rgba(255, 255, 255, .12);
    color: #fff;
}

/* ---------- Tiles de indicadores (KPI) ---------- */
.tiles {
    background: transparent !important;
    border: 0 !important;
    box-shadow: none !important;
    margin-bottom: 8px;
}

.tiles .tile {
    background: transparent !important;
    border: 0 !important;
    padding-bottom: 16px;
}

.tiles .tile > a {
    display: block;
    position: relative;
    padding: 20px 20px 18px;
    background: #fff;
    border: 1px solid var(--obx-gray-200);
    border-radius: 14px;
    box-shadow: 0 2px 8px rgba(10, 20, 50, .05);
    text-align: left;
    transition: box-shadow .15s, border-color .15s;
}

.tiles .tile:hover > a {
    box-shadow: 0 12px 28px rgba(76, 29, 149, .14);
    border-color: var(--obx-navy-l);
}

.tiles .tile .highlight {
    display: none;
}

.tiles .tile .icon {
    top: 14px;
    right: 14px;
    width: 36px;
    height: 36px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--obx-icon-1);
    font-size: 15px;
    color: var(--obx-icon-2);
}

/* Cores por categoria (reaproveitando os nomes ja usados no .highlight) */
.tiles .tile .icon.icon-blue {
    background: #dbeafe;
    color: #2563eb;
}

.tiles .tile .icon.icon-green {
    background: #d1fae5;
    color: #0d9488;
}

.tiles .tile .icon.icon-red {
    background: #fee2e2;
    color: #dc2626;
}

.tiles .tile .icon.icon-gold {
    background: var(--obx-yellow-soft);
    color: #b45309;
}

.tiles .tile .stat {
    margin-top: 2px;
    font-size: 32px;
    font-weight: 900;
    color: var(--obx-text);
    line-height: 1;
}

.tiles .tile .title {
    margin-top: 7px;
    font-size: 12.5px;
    letter-spacing: .01em;
    color: #6b7280;
    font-weight: 600;
    text-transform: none;
}

/* ---------- Paineis do dashboard (servicos ativos, tickets etc) ---------- */
.client-home-panels .panel {
    border: 1px solid var(--obx-gray-200);
    border-radius: 14px;
    box-shadow: 0 2px 8px rgba(10, 20, 50, .04);
    overflow: hidden;
}

.client-home-panels .panel-heading {
    background: #fff;
    border-bottom: 1px solid var(--obx-gray-100);
    padding: 16px 20px 16px 17px;
    border-left: 3px solid var(--obx-green);
}

.client-home-panels .panel-title {
    font-size: 14.5px;
    font-weight: 800;
    color: var(--obx-text);
}

.client-home-panels .panel-title i {
    color: var(--obx-icon-2);
    margin-right: 6px;
}

.client-home-panels .list-group-item {
    border: 0;
    border-bottom: 1px solid var(--obx-gray-100);
    padding: 14px 20px;
    font-size: 13.5px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
}

.client-home-panels .list-group-item:last-child {
    border-bottom: 0;
}

/* Linhas de "Seus produtos/servicos ativos" (div-service-item) - painel
   proprio do WHMCS, separado do .list-group-item generico acima. Sem
   borda entre linhas e com a area de botoes "Ver Detalhes"/cPanel numa
   largura fixa, pra nao ficar desalinhada quando uma linha tem o dropdown
   extra (ex: "Faca login no cPanel") e outra nao. */
.div-service-item {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 14px 20px;
    border-bottom: 1px solid var(--obx-gray-100);
}

.div-service-item:last-child {
    border-bottom: 0;
}

.div-service-status {
    flex: 0 0 auto;
    min-width: 78px;
}

.div-service-name {
    flex: 1 1 auto;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.div-service-name .font-weight-bold {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.div-service-buttons {
    flex: 0 0 auto;
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 8px;
    min-width: 128px;
}

.div-service-buttons .btn-view-details {
    min-width: 124px;
    justify-content: center;
}

.client-home-panels .label,
.label {
    display: inline-block;
    padding: 5px 13px;
    border-radius: 999px;
    font-size: 12px;
    font-weight: 800;
    letter-spacing: .02em;
    text-transform: uppercase;
}

.label-success,
.label-active,
.label-paid,
.label-completed {
    background: #d1fae5 !important;
    color: #065f46 !important;
}

.label-danger,
.label-terminated,
.label-cancelled,
.label-fraud,
.label-unpaid,
.label-overdue {
    background: #fee2e2 !important;
    color: #991b1b !important;
}

.label-warning,
.label-suspended,
.label-pending,
.label-pendingtransfer {
    background: #fef3c7 !important;
    color: #92400e !important;
}

.label-default,
.label-closed,
.label-expired {
    background: var(--obx-gray-100) !important;
    color: #444 !important;
}

.label-info,
.label-awaitingdocuments {
    background: #ede9fe !important;
    color: #4c1d95 !important;
}

/* ---------- Homepage: hero ---------- */
.obx-hero {
    position: relative;
    overflow: hidden;
    padding: 90px 0 100px;
    background: linear-gradient(135deg, var(--obx-navy-l), var(--obx-navy) 60%, var(--obx-navy-d));
    color: #fff;
}

.obx-hero-shape-a {
    position: absolute;
    top: -140px;
    right: -110px;
    width: 500px;
    height: 500px;
    background: rgba(255, 255, 255, .06);
    border-radius: 50%;
    pointer-events: none;
}

.obx-hero-shape-b {
    position: absolute;
    bottom: -190px;
    right: 100px;
    width: 340px;
    height: 340px;
    background: var(--obx-yellow);
    opacity: .12;
    border-radius: 50%;
    pointer-events: none;
}

.obx-hero-inner {
    position: relative;
    z-index: 1;
    max-width: 680px;
    margin: 0 auto;
    text-align: center;
}

.obx-hero-inner h1 {
    color: #fff;
    font-size: clamp(30px, 4vw, 46px);
    font-weight: 900;
    line-height: 1.15;
    margin: 0 0 18px;
}

.obx-hero-inner p {
    font-size: 17px;
    color: rgba(255, 255, 255, .84);
    margin: 0 0 32px;
    line-height: 1.6;
}

.obx-hero-actions {
    display: flex;
    gap: 14px;
    justify-content: center;
    flex-wrap: wrap;
}


.obx-btn-cta-primary {
    background: var(--obx-green);
    color: #fff;
    font-weight: 700;
    padding: 14px 30px;
    border-radius: 10px;
    border: 0;
}

.obx-btn-cta-primary:hover,
.obx-btn-cta-primary:focus {
    background: var(--obx-green-d);
    color: #fff;
}

.obx-btn-cta-outline {
    background: transparent;
    border: 1.5px solid rgba(255, 255, 255, .5);
    color: #fff;
    font-weight: 700;
    padding: 13px 28px;
    border-radius: 10px;
}

.obx-btn-cta-outline:hover,
.obx-btn-cta-outline:focus {
    background: rgba(255, 255, 255, .12);
    color: #fff;
    border-color: #fff;
}

/* ---------- Homepage: busca de dominio ---------- */
.obx-domain-search {
    background: #fff;
    padding: 50px 0;
    border-bottom: 1px solid var(--obx-gray-100);
}

.obx-domain-search h2 {
    font-size: 22px;
    font-weight: 800;
    color: var(--obx-text);
    margin-bottom: 24px;
}

.obx-domain-search .btn.search {
    background-color: var(--obx-green);
    border-color: var(--obx-green-d);
    color: #fff;
    font-weight: 700;
}

.obx-domain-search .btn.transfer {
    background-color: var(--obx-yellow);
    border-color: var(--obx-yellow);
    color: var(--obx-navy);
    font-weight: 700;
}

/* ---------- Homepage: titulo/subtitulo de secao ---------- */
.obx-section-title {
    text-align: center;
    font-size: clamp(24px, 3vw, 32px);
    font-weight: 900;
    color: var(--obx-text);
    margin: 0 0 8px;
}

.obx-section-sub {
    text-align: center;
    color: #6b7280;
    font-size: 15px;
    margin: 0 0 40px;
}

/* ---------- Homepage: cards de produto ---------- */
.obx-products {
    padding: 70px 0;
    background: var(--obx-gray-50);
}

.obx-products-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 26px;
    max-width: 1000px;
    margin: 0 auto;
}

.obx-product-card {
    position: relative;
    background: #fff;
    border-radius: 16px;
    padding: 34px 28px;
    text-align: center;
    box-shadow: 0 2px 10px rgba(10, 20, 50, .05);
    border: 1px solid var(--obx-gray-200);
    transition: transform .2s, box-shadow .2s;
}

.obx-product-card:hover {
    transform: translateY(-6px);
    box-shadow: 0 20px 40px rgba(10, 20, 50, .1);
}

.obx-product-featured {
    border-color: var(--obx-navy-l);
    box-shadow: 0 10px 30px rgba(76, 29, 149, .14);
}

.obx-product-badge {
    position: absolute;
    top: -13px;
    left: 50%;
    transform: translateX(-50%);
    background: var(--obx-yellow);
    color: #78350f;
    font-size: 11px;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: .04em;
    padding: 5px 14px;
    border-radius: 999px;
    white-space: nowrap;
}

.obx-product-icon {
    width: 64px;
    height: 64px;
    border-radius: 18px;
    background: var(--obx-icon-1);
    color: var(--obx-icon-2);
    font-size: 28px;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto 18px;
}

.obx-product-card h3 {
    font-size: 18px;
    font-weight: 800;
    color: var(--obx-text);
    margin: 0 0 8px;
}

.obx-product-card p {
    font-size: 13.5px;
    color: #6b7280;
    line-height: 1.6;
    min-height: 44px;
    margin: 0 0 18px;
}

.obx-product-price {
    margin-bottom: 20px;
}

.obx-product-price span {
    display: block;
    font-size: 11px;
    color: #9ca3af;
    text-transform: uppercase;
    letter-spacing: .04em;
}

.obx-product-price strong {
    font-size: 24px;
    font-weight: 900;
    color: var(--obx-navy);
}

/* ---------- Homepage: garantias ---------- */
.obx-guarantees {
    padding: 70px 0;
    background: linear-gradient(180deg, var(--obx-navy-d), var(--obx-navy));
    color: #fff;
}

.obx-guarantees .obx-section-title,
.obx-guarantees .obx-section-sub {
    color: #fff;
}

.obx-guarantees .obx-section-sub {
    color: rgba(255, 255, 255, .65);
}

.obx-guarantees-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 30px;
    max-width: 1100px;
    margin: 0 auto;
}

.obx-guarantee-item {
    text-align: center;
}

.obx-guarantee-item i {
    font-size: 34px;
    color: var(--obx-yellow);
    margin-bottom: 14px;
}

.obx-guarantee-item h4 {
    color: #fff;
    font-size: 15.5px;
    font-weight: 800;
    margin: 0 0 8px;
}

.obx-guarantee-item p {
    font-size: 13px;
    color: rgba(255, 255, 255, .7);
    line-height: 1.6;
    margin: 0;
}

@media (max-width: 900px) {
    .obx-products-grid,
    .obx-guarantees-grid {
        grid-template-columns: 1fr;
    }
}

.home-shortcuts li a,
.home-shortcuts .lead,
.home-shortcuts li p {
    color: var(--obx-text);
}

/* ---------- Botoes ---------- */
.btn {
    font-weight: 600;
    border-radius: 8px;
    font-size: 15px;
}

.btn-primary,
.btn-success {
    background-color: var(--obx-green);
    border-color: var(--obx-green-d);
    color: #fff;
}

.btn-primary:hover,
.btn-primary:focus,
.btn-primary:active,
.btn-success:hover,
.btn-success:focus,
.btn-success:active {
    background-color: var(--obx-green-d);
    border-color: var(--obx-green-d);
    color: #fff;
}

.btn-info {
    background-color: var(--obx-navy);
    border-color: var(--obx-navy-d);
    color: #fff;
}

.btn-info:hover,
.btn-info:focus {
    background-color: var(--obx-navy-l);
    border-color: var(--obx-navy-l);
    color: #fff;
}

.btn-default {
    color: var(--obx-text);
    border-color: var(--obx-gray-200);
}

.btn-default:hover,
.btn-default:focus {
    background-color: var(--obx-yellow);
    border-color: var(--obx-yellow);
    color: var(--obx-navy);
}

/* ---------- Paineis e menus laterais ---------- */
.panel {
    font-size: 1em;
    border-radius: 10px;
    border-color: var(--obx-gray-200);
    box-shadow: 0 2px 8px rgba(10, 20, 50, .05);
}

.panel-default > .panel-heading,
.panel-heading {
    color: var(--obx-text);
    font-weight: 700;
    background-color: var(--obx-gray-50);
    border-bottom: 1px solid var(--obx-gray-200);
}

.panel-sidebar {
    font-size: 15px;
    border-color: var(--obx-gray-200);
}

.panel-sidebar > .panel-heading {
    color: var(--obx-text);
    background-color: var(--obx-gray-100);
}

.panel-sidebar .panel-title {
    font-family: var(--obx-font);
    font-weight: 700;
    color: var(--obx-text);
}

.panel-sidebar .list-group-item {
    color: var(--obx-text);
    font-weight: 500;
}

/* Paineis laterais com 2 botoes lado a lado (ex: "Pagar Todas" +
   "Adicionar Fundos" no resumo de faturas) - o WHMCS coloca cada botao
   numa coluna Bootstrap flutuante (div.col-xs-6), entao numa coluna
   lateral estreita o texto do segundo botao ("Adicionar Fundos") estoura
   pra fora do painel. Tira o float e empilha as colunas em largura total. */
.panel-sidebar .panel-footer > div[class*="col-xs-"] {
    float: none;
    width: 100%;
}

.panel-sidebar .panel-footer > div[class*="col-xs-"] + div[class*="col-xs-"] {
    margin-top: 8px;
}

.panel-sidebar .panel-footer .btn.btn-block {
    white-space: normal;
}

.panel-sidebar a.list-group-item:hover,
.panel-sidebar a.list-group-item:focus {
    background-color: var(--obx-yellow);
    color: var(--obx-navy);
}

/* Painel "Suas Informacoes" (perfil) na barra lateral - destaque colorido,
   igual ao card de perfil das referencias (so que sem duplicar o conteudo
   nativo do WHMCS em outro lugar da pagina). */
.panel[menuItemName="Client Details"] {
    background: linear-gradient(165deg, var(--obx-navy-l), var(--obx-navy-d) 75%);
    border: 0;
    border-top: 3px solid var(--obx-green);
    box-shadow: 0 10px 30px rgba(10, 10, 12, .2);
}

.panel[menuItemName="Client Details"] > .panel-heading {
    background: transparent;
    border-bottom: 1px solid rgba(255, 255, 255, .1);
}

/* Avatar padrao (quando o cliente nao tem foto/gravatar real cadastrada -
   ver script em footer.tpl que troca a imagem por este icone). */
.obx-avatar-fallback {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 64px;
    height: 64px;
    margin: 0 auto;
    border-radius: 50%;
    background: linear-gradient(135deg, var(--obx-navy-l), var(--obx-navy));
    border: 2px solid var(--obx-green);
}

.obx-avatar-fallback i {
    font-size: 26px;
    color: #fff;
}

.panel[menuItemName="Client Details"] .panel-title,
.panel[menuItemName="Client Details"] .panel-title i {
    color: #fff;
}

.panel[menuItemName="Client Details"] .panel-body {
    color: rgba(255, 255, 255, .82);
    font-size: 13px;
    line-height: 1.6;
}

.panel[menuItemName="Client Details"] .panel-body strong,
.panel[menuItemName="Client Details"] .panel-body b {
    color: #fff;
}

.panel[menuItemName="Client Details"] .panel-body a:not(.btn) {
    color: #fff;
    text-decoration: underline;
}

.panel[menuItemName="Client Details"] .panel-body .btn,
.panel[menuItemName="Client Details"] .panel-footer .btn {
    background: var(--obx-green);
    color: #fff;
    border: 0;
    font-weight: 700;
}

.panel[menuItemName="Client Details"] .panel-body .btn:hover,
.panel[menuItemName="Client Details"] .panel-footer .btn:hover {
    background: var(--obx-green-d);
}

/* Segundo botao (Sair) fica em tom neutro escuro, nao verde, pra
   diferenciar das acoes primarias - WHMCS costuma marcar o 2o botao
   com classe btn-default; cobrimos os dois casos comuns. */
.panel[menuItemName="Client Details"] .panel-body .btn.btn-default,
.panel[menuItemName="Client Details"] .panel-footer .btn.btn-default,
.panel[menuItemName="Client Details"] .panel-body .btn:nth-of-type(2),
.panel[menuItemName="Client Details"] .panel-footer .btn:nth-of-type(2) {
    background: rgba(255, 255, 255, .12);
    color: #fff;
}

.panel[menuItemName="Client Details"] .panel-body .btn.btn-default:hover,
.panel[menuItemName="Client Details"] .panel-footer .btn.btn-default:hover,
.panel[menuItemName="Client Details"] .panel-body .btn:nth-of-type(2):hover,
.panel[menuItemName="Client Details"] .panel-footer .btn:nth-of-type(2):hover {
    background: rgba(255, 255, 255, .2);
}

.panel[menuItemName="Client Details"] .panel-footer {
    background: transparent;
    border-top: 1px solid rgba(255, 255, 255, .1);
    display: flex;
    gap: 8px;
}

.panel-sidebar a.list-group-item.active,
.panel-sidebar a.list-group-item.active:focus,
.panel-sidebar a.list-group-item.active:hover {
    background-color: var(--obx-navy);
    border-color: var(--obx-navy);
    color: #fff;
}

/* ---------- Tabelas ---------- */
.table > thead > tr > th {
    color: var(--obx-text);
    font-weight: 700;
}

.table-list > thead > tr > th {
    background-color: var(--obx-gray-100);
}

.table-hover > tbody > tr:hover,
.table-list > tbody > tr:hover {
    background-color: var(--obx-yellow-soft);
}

/* ---------- Formularios ---------- */
.form-control {
    border-radius: 8px;
    border-color: #c9d2e0;
    color: var(--obx-text);
    font-size: 15px;
}

.form-control:focus {
    border-color: var(--obx-green);
    box-shadow: 0 0 0 3px rgba(82, 162, 52, .2);
}

label,
.control-label {
    color: var(--obx-text);
    font-weight: 600;
}

/* ---------- Rodape ---------- */
section#footer {
    background-color: var(--obx-navy-d);
    border-top: 0;
    color: #fff;
    font-size: 14px;
    text-align: center;
}

section#footer .container {
    text-align: center;
}

section#footer p,
section#footer a {
    color: #fff;
}

section#footer p {
    width: 100%;
    text-align: center;
    margin: 0 auto;
}

section#footer a:hover {
    color: var(--obx-yellow);
}

.obx-social {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 10px;
    margin: 10px 0 0;
    width: 100%;
    flex-basis: 100%;
}

.obx-social a {
    width: 36px;
    height: 36px;
    border-radius: 50%;
    background: rgba(255, 255, 255, .08);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 15px;
    transition: background .15s, color .15s, transform .15s;
}

.obx-social a:hover {
    background: var(--obx-green);
    color: #fff;
    transform: translateY(-2px);
}

/* =====================================================
   Nexus Cart (loja / carrinho) - paleta da marca
===================================================== */
:root {
    --white: #fff;

    --neutral-50: #fbf9fa;
    --neutral-100: #f4f5f7;
    --neutral-200: #e4e4e7;
    --neutral-300: #d0d5dd;
    --neutral-400: #9ca3af;
    --neutral-500: #4b5563;
    --neutral-600: #374151;
    --neutral-700: #1f2937;
    --neutral-800: #111827;
    --neutral-900: #000;
    --neutral-950: #000;

    --primary-50: #f5f3ff;
    --primary-100: #ede9fe;
    --primary-200: #ddd6fe;
    --primary-300: #c4b5fd;
    --primary-400: #a78bfa;
    --primary-500: #8b5cf6;
    --primary-600: #6d28d9;
    --primary-700: #5b21b6;
    --primary-800: #4c1d95;
    --primary-900: #3b0764;
    --primary-950: #2e1065;

    --primary: var(--primary-600);
    --primary-lifted: var(--primary-700);
    --primary-accented: var(--primary-800);

    --secondary: var(--neutral-500);
    --secondary-lifted: var(--neutral-600);
    --secondary-accented: var(--neutral-700);

    --success: #0d9488;
    --success-lifted: #0f766e;
    --success-accented: #115e59;

    --info: #6d28d9;
    --info-lifted: #4c1d95;
    --info-accented: #2e1065;

    --warning: #f59e0b;
    --warning-lifted: #d97706;
    --warning-accented: #b45309;

    --error: #e7000b;
    --error-lifted: #c10007;
    --error-accented: #9f0712;

    --grayscale: var(--neutral-900);
    --grayscale-lifted: var(--neutral-800);
    --grayscale-accented: var(--neutral-700);

    --neutral: var(--neutral-500);
    --neutral-lifted: var(--neutral-600);
    --neutral-accented: var(--neutral-700);

    --text-inverted: var(--white);
    --text-muted: #374151;
    --text-lifted: #1f2937;
    --text-accented: #111827;
    --text: #000;

    --border-muted: var(--neutral-200);
    --border: var(--neutral-300);
    --border-lifted: var(--neutral-400);
    --border-accented: var(--neutral-600);

    --bg: var(--white);
    --bg-muted: var(--neutral-50);
    --bg-lifted: var(--neutral-100);
    --bg-accented: var(--neutral-200);
    --bg-inverted: var(--primary-800);

    --yellow-200: #fde68a;
    --yellow-300: #fbbf24;
    --teal-300: #46edd5;
    --teal-400: #00d5be;
    --emerald-300: #5ee9b5;
    --pink-400: #fb64b6;

    --text-xs: 0.7rem;
    --text-sm: 0.8rem;
    --text-md: 0.95rem;
    --text-lg: 1.1rem;

    --outline-sm: 1px;
    --outline-md: 2px;
    --outline-lg: 3px;

    --rounding-sm: 0.25rem;
    --rounding-md: 0.5rem;
    --rounding-lg: 0.75rem;

    --letter-spacing: 0em;
    --disabled-opacity: 25%;
}

/* =====================================================
   Acabamento da home
===================================================== */
section#home-banner {
    padding: 56px 0 64px;
}

section#home-banner h2 {
    font-size: 2.2rem;
    padding-bottom: 22px;
    color: #fff;
}

section#home-banner .form-control {
    height: 54px;
    border-radius: 12px 0 0 12px;
    font-size: 16px;
    font-weight: 500;
    color: var(--obx-text);
}

section#home-banner .input-group-btn .btn {
    height: 54px;
    padding: 0 26px;
    font-size: 16px;
    font-weight: 700;
}

section#home-banner .input-group-btn:last-child .btn:last-child {
    border-radius: 0 12px 12px 0;
}

.home-shortcuts {
    background: #fff;
    border-bottom: 1px solid var(--obx-gray-200);
    color: var(--obx-text);
}

.home-shortcuts .lead {
    color: var(--obx-text);
    font-weight: 700;
    line-height: 72px;
}

.home-shortcuts li {
    padding: 12px 6px;
    border-right: 1px solid var(--obx-gray-200);
    font-size: 13px;
    font-weight: 600;
    transition: background .15s;
}

.home-shortcuts li:first-child {
    border-left: 1px solid var(--obx-gray-200);
}

.home-shortcuts li a {
    color: var(--obx-text);
}

.home-shortcuts li i {
    color: var(--obx-green);
    font-size: 24px;
}

.home-shortcuts li:hover {
    background-color: var(--obx-yellow);
}

.home-shortcuts li:hover a,
.home-shortcuts li:hover i {
    color: var(--obx-navy);
}

/* =====================================================
   Tela de login
===================================================== */
.obx-login {
    position: fixed;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    z-index: 2000;
    display: flex;
    background: #fff;
}

.obx-login-brand {
    flex: 1 1 54%;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    padding: 56px 64px 32px;
    color: #fff;
    background:
        radial-gradient(circle at 85% 12%, rgba(82, 162, 52, .38), transparent 42%),
        radial-gradient(circle at 10% 95%, rgba(253, 224, 71, .16), transparent 38%),
        linear-gradient(135deg, var(--obx-navy-d), var(--obx-navy));
}

.obx-login-brand-inner {
    max-width: clamp(520px, 40vw, 920px);
    margin: auto 0;
}

.obx-login-badge {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 7px 14px;
    border-radius: 999px;
    background: rgba(255, 255, 255, .12);
    font-size: 13px;
    font-weight: 700;
    letter-spacing: .04em;
    text-transform: uppercase;
}

.obx-login-brand h1 {
    margin: 22px 0 14px;
    font-size: clamp(3rem, 3.4vw, 5.2rem);
    line-height: 1.1;
    font-weight: 800;
    color: #fff;
}

.obx-login-lead {
    margin: 0 0 34px;
    font-size: clamp(1.15rem, 1.1vw, 1.6rem);
    line-height: 1.55;
    color: rgba(255, 255, 255, .88);
}

.obx-login-features {
    list-style: none;
    margin: 0;
    padding: 0;
}

.obx-login-features li {
    display: flex;
    align-items: flex-start;
    gap: 16px;
    margin-bottom: 20px;
}

.obx-login-features li i {
    flex: 0 0 46px;
    height: 46px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 12px;
    background: rgba(255, 255, 255, .14);
    color: var(--obx-yellow);
    font-size: 19px;
}

.obx-login-features strong {
    display: block;
    font-size: 1.05rem;
    color: #fff;
}

.obx-login-features span {
    display: block;
    margin-top: 2px;
    font-size: .95rem;
    color: rgba(255, 255, 255, .8);
}

.obx-login-copy {
    font-size: 13px;
    color: rgba(255, 255, 255, .75);
}

.obx-login-panel {
    flex: 0 0 46%;
    max-width: clamp(640px, 34vw, 1200px);
    display: flex;
    align-items: center;
    justify-content: center;
    padding: clamp(32px, 2.6vw, 64px);
    overflow-y: auto;
    background: #fff;
}

.obx-login-box {
    width: 100%;
    max-width: clamp(400px, 21vw, 680px);
}

.obx-login-logo img {
    max-height: clamp(72px, 5vw, 108px);
    width: auto;
    margin-bottom: clamp(28px, 2vw, 42px);
}

.obx-login-box h2 {
    margin: 0 0 6px;
    font-size: clamp(1.9rem, 1.7vw, 3rem);
    font-weight: 800;
    color: var(--obx-text);
}

.obx-login-sub {
    margin: 0 0 24px;
    font-size: clamp(15px, .9vw, 19px);
    color: #222;
}

.obx-login-box .form-group {
    margin-bottom: 18px;
}

.obx-input {
    position: relative;
}

.obx-input i {
    position: absolute;
    top: 50%;
    left: 16px;
    transform: translateY(-50%);
    color: var(--obx-navy);
    pointer-events: none;
}

.obx-input .form-control {
    height: clamp(50px, 3.2vw, 72px);
    padding-left: clamp(44px, 2.6vw, 58px);
    border-radius: 12px;
    font-size: clamp(16px, .95vw, 20px);
}

.obx-input i {
    font-size: clamp(15px, .9vw, 19px);
}

.obx-login-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 20px;
}

.obx-check {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    margin: 0;
    font-weight: 500;
    cursor: pointer;
}

.obx-forgot {
    font-weight: 600;
}

.obx-login-btn {
    width: 100%;
    height: clamp(52px, 3.4vw, 76px);
    border-radius: 12px;
    font-size: clamp(16px, .95vw, 20px);
    font-weight: 700;
}

.obx-login-social {
    margin-top: 22px;
}

.obx-login-foot {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    margin-top: 28px;
    padding-top: 20px;
    border-top: 1px solid var(--obx-gray-200);
    font-size: 14px;
}

.obx-login-foot a {
    font-weight: 600;
}

@media (max-width: 991px) {
    .obx-login-brand {
        display: none;
    }

    .obx-login-panel {
        flex: 1 1 auto;
        max-width: none;
    }
}

/* Telas bem largas (monitores 2K/4K/ultrawide): os tamanhos acima
   (clamp) ja crescem sozinhos com a largura real da janela — sem
   depender de acertar um ponto de quebra exato. */

/* =====================================================
   Loja / carrinho (standard_cart): cards dos planos
===================================================== */
body #order-standard_cart .products .row-eq-height {
    display: flex;
    flex-wrap: wrap;
}

body #order-standard_cart .products .row-eq-height > [class*="col-"] {
    display: flex;
}

body #order-standard_cart .products .product {
    display: flex;
    flex-direction: column;
    width: 100%;
    margin: 0 0 24px;
    padding: 0;
    background: #fff;
    border: 1px solid var(--obx-gray-200);
    border-radius: 16px;
    box-shadow: 0 4px 16px rgba(10, 20, 50, .06);
    overflow: hidden;
    transition: border-color .15s, box-shadow .15s;
}

body #order-standard_cart .products .product:hover {
    border-color: var(--obx-yellow);
    box-shadow: 0 10px 28px rgba(10, 20, 50, .12);
}

body #order-standard_cart .products .product header {
    margin: 0;
    padding: 18px 24px;
    background: linear-gradient(135deg, var(--obx-navy-d), var(--obx-navy));
    border-radius: 0;
}

body #order-standard_cart .products .product header span {
    color: #fff;
    font-size: 1.5rem;
    font-weight: 800;
}

body #order-standard_cart .products .product div.product-desc {
    float: none;
    flex: 1;
    width: auto;
    padding: 20px 24px 8px;
    font-size: 15px;
}

body #order-standard_cart .products .product div.product-desc p {
    margin: 0;
    line-height: 2.1;
    color: var(--obx-text);
}

body #order-standard_cart .products .product div.product-desc p i {
    width: 26px;
    margin-right: 4px;
    text-align: center;
    color: var(--obx-green);
}

body #order-standard_cart .products .product footer {
    float: none;
    width: auto;
    margin: 0;
    padding: 18px 24px 22px;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    font-size: 1rem;
    text-align: left;
    background: var(--obx-gray-50);
    border-top: 1px solid var(--obx-gray-200);
}

body #order-standard_cart .products .product div.product-pricing {
    margin: 0;
    line-height: 1.35;
    color: var(--obx-text);
}

body #order-standard_cart .products .product div.product-pricing span.price {
    font-size: 1.7rem;
    font-weight: 800;
    color: var(--obx-text);
}

body #order-standard_cart .products .product .btn-order-now {
    padding: 12px 22px;
    font-size: 15px;
    font-weight: 700;
    border-radius: 10px;
    white-space: nowrap !important;
}

/* ---------- Configuracao do plano e resumo do pedido ---------- */
body #order-standard_cart .product-info {
    margin: 0 0 22px;
    padding: 20px 24px;
    font-size: 1rem;
    background: #fff;
    border: 1px solid var(--obx-gray-200);
    border-radius: 14px;
    box-shadow: 0 2px 8px rgba(10, 20, 50, .05);
}

body #order-standard_cart .product-info .product-title {
    margin: 0 0 10px;
    font-size: 1.8rem;
    font-weight: 800;
    color: var(--obx-navy);
}

body #order-standard_cart .product-info p {
    line-height: 2.1;
    color: var(--obx-text);
}

body #order-standard_cart .product-info p i {
    width: 26px;
    text-align: center;
    color: var(--obx-green);
}

body #order-standard_cart .order-summary {
    border: 1px solid var(--obx-gray-200);
    border-radius: 14px;
    overflow: hidden;
    background: #fff;
}

body #order-standard_cart .order-summary h2 {
    margin: 0;
    padding: 14px 20px;
    font-size: 1.25rem;
    font-weight: 800;
    color: #fff;
    background: var(--obx-navy);
}

body #order-standard_cart .btn-checkout {
    border-radius: 10px;
    font-weight: 700;
}

/* ---------- Ciclo de pagamento (tela Configurar) ---------- */
body #order-standard_cart .field-container label[for="inputBillingcycle"] {
    font-size: 16px;
    font-weight: 800;
    color: #000;
    margin-bottom: 8px;
}

body #order-standard_cart #inputBillingcycle {
    background-color: var(--obx-yellow);
    border: 2px solid #eab308;
    color: #000;
    font-weight: 800;
    font-size: 15px;
    padding: 9px 14px;
    border-radius: 10px;
    height: auto;
    box-shadow: none;
}

body #order-standard_cart #inputBillingcycle:focus {
    border-color: var(--obx-navy);
    box-shadow: 0 0 0 3px rgba(28, 53, 115, .15);
}

.obx-cycle-badge {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    margin-left: 12px;
    padding: 10px 18px;
    background: var(--obx-green);
    color: #fff;
    font-size: 15px;
    font-weight: 900;
    letter-spacing: .2px;
    line-height: 1.25;
    text-shadow: 0 1px 1px rgba(0, 0, 0, .18);
    border: 2px solid var(--obx-green-d);
    border-radius: 999px;
    vertical-align: middle;
    box-shadow: 0 3px 10px rgba(67, 136, 42, .35);
    animation: obx-cycle-pulse 1.8s ease-in-out infinite;
}

.obx-cycle-badge i {
    color: var(--obx-yellow);
    font-size: 15px;
}

@keyframes obx-cycle-pulse {
    0%, 100% { transform: scale(1); }
    50% { transform: scale(1.06); }
}

@media (max-width: 480px) {
    .obx-cycle-badge {
        display: flex;
        width: fit-content;
        margin: 10px 0 0;
    }
}


/* =====================================================
   Loja / carrinho - cartoes de produto
   O botao "Faca seu pedido agora" ficava mais largo que a coluna do
   preco e saia para fora do cartao. Aqui ele fica preso a coluna e o
   texto pode quebrar em duas linhas. (Bloco isolado: remova para desfazer.)
===================================================== */
body #order-standard_cart .products .product footer,
body #order-standard_cart .products .product .product-pricing {
    box-sizing: border-box;
    max-width: 100%;
}

body #order-standard_cart .products .product .btn-order-now,
body #order-standard_cart .products .product footer .btn {
    display: block;
    box-sizing: border-box;
    width: 100% !important;
    max-width: 100% !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
    padding: 9px 12px;
    white-space: normal !important;
    line-height: 1.3;
    text-align: center;
}