/**
 * ============================================
 * CHECKLINK - DESIGN SYSTEM PREMIUM
 * Dark Mode Profissional + Glassmorphism
 * Baseado no Design da pasta Design/
 * ============================================ */

/* Esconde elementos mobile-only no desktop */
.mobile-topbar,
.mobile-topbar-logo,
.floating-toggle {
    display: none;
}

:root {
    /* Cores Base - Dark Theme */
    --color-bg: #0f172a;
    --color-surface: #111827;
    --color-surface-elevated: #1f2937;
    
    /* Cores Primárias */
    --color-primary: #2563eb;
    --color-primary-dark: #1e40af;
    --color-primary-light: #38bdf8;
    --color-secondary: #0ea5e9;
    
    /* Cores de Status */
    --color-success: #22c55e;
    --color-alert: #f97316;
    --color-danger: #ef4444;
    
    /* Texto */
    --color-text: #f9fafb;
    --color-text-muted: #9ca3af;
    
    /* Borders */
    --color-border: rgba(148, 163, 184, 0.12);
    --color-border-strong: rgba(148, 163, 184, 0.32);
    
    /* Shadows */
    --shadow-soft: 0 24px 60px rgba(15, 23, 42, 0.38);
    --shadow-low: 0 10px 30px rgba(15, 23, 42, 0.22);
    --shadow-md: 0 4px 12px rgba(0, 0, 0, 0.5);
    --shadow-lg: 0 8px 24px rgba(0, 0, 0, 0.6);
    --shadow-xl: 0 16px 40px rgba(0, 0, 0, 0.7);
    --shadow-glow: 0 0 30px rgba(37, 99, 235, 0.3);
    
    /* Radius */
    --radius-pill: 999px;
    --radius-md: 12px;
    --radius-lg: 18px;
    --radius-xl: 24px;
    
    /* Spacing */
    --spacing-2: 8px;
    --spacing-3: 12px;
    --spacing-4: 16px;
    --spacing-5: 20px;
    --spacing-6: 24px;
    --spacing-8: 32px;
    --spacing-10: 40px;
    
    /* Transitions */
    --transition: 180ms ease;
    --transition-slow: 350ms ease;
    
    /* Gradientes */
    --gradient-primary: linear-gradient(135deg, #2563eb, #0ea5e9);
    --gradient-success: linear-gradient(135deg, #11998e 0%, #38ef7d 100%);
    --gradient-danger: linear-gradient(135deg, #eb3349 0%, #f45c43 100%);
}

/* Reset */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

body {
    font-family: "Inter", -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
    background: #0b1220;
    color: var(--color-text);
    line-height: 1.6;
    min-height: 100vh;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    position: relative;
    overflow-x: hidden;
}

/* Fundo animado com gradientes vibrantes */
body::before {
    content: "";
    position: fixed;
    inset: 0;
    z-index: -2;
    background: 
        radial-gradient(circle at 20% 20%, rgba(122, 92, 255, 0.08), transparent 50%),
        radial-gradient(circle at 80% 80%, rgba(0, 212, 255, 0.08), transparent 50%),
        radial-gradient(circle at 50% 50%, rgba(249, 77, 157, 0.06), transparent 60%);
    animation: backgroundPulse 20s ease-in-out infinite alternate;
}

/* Blobs flutuantes no fundo */
body::after {
    content: "";
    position: fixed;
    inset: 0;
    z-index: -1;
    background: 
        radial-gradient(ellipse at 10% 30%, rgba(122, 92, 255, 0.12), transparent 40%),
        radial-gradient(ellipse at 90% 70%, rgba(0, 212, 255, 0.1), transparent 45%),
        radial-gradient(ellipse at 50% 90%, rgba(249, 77, 157, 0.08), transparent 50%);
    filter: blur(60px);
    animation: blobsFloat 30s ease-in-out infinite;
}

@keyframes backgroundPulse {
    0%, 100% { 
        opacity: 1;
        transform: scale(1);
    }
    50% { 
        opacity: 0.85;
        transform: scale(1.03);
    }
}

@keyframes blobsFloat {
    0%, 100% { 
        transform: translate(0, 0) rotate(0deg);
    }
    33% { 
        transform: translate(3%, -3%) rotate(3deg);
    }
    66% { 
        transform: translate(-3%, 3%) rotate(-3deg);
    }
}

/* Partículas/estrelas sutis no fundo */
.animated-background {
    position: fixed;
    inset: 0;
    z-index: -3;
    pointer-events: none;
}

.animated-background::before,
.animated-background::after {
    content: "";
    position: absolute;
    width: 2px;
    height: 2px;
    background: rgba(255, 255, 255, 0.3);
    border-radius: 50%;
    box-shadow: 
        100px 200px rgba(255, 255, 255, 0.2),
        300px 400px rgba(122, 92, 255, 0.3),
        500px 100px rgba(0, 212, 255, 0.25),
        700px 300px rgba(249, 77, 157, 0.2),
        900px 500px rgba(255, 255, 255, 0.15),
        200px 600px rgba(122, 92, 255, 0.25),
        1100px 200px rgba(0, 212, 255, 0.2),
        1300px 400px rgba(249, 77, 157, 0.15),
        400px 800px rgba(255, 255, 255, 0.2),
        800px 700px rgba(122, 92, 255, 0.2);
    animation: particlesFloat 40s linear infinite;
}

.animated-background::after {
    animation-delay: -20s;
    animation-duration: 60s;
}

@keyframes particlesFloat {
    0% { 
        transform: translateY(0) scale(1);
        opacity: 0;
    }
    10% {
        opacity: 1;
    }
    90% {
        opacity: 1;
    }
    100% { 
        transform: translateY(-100vh) scale(0.5);
        opacity: 0;
    }
}

/* Scrollbar Moderna */
::-webkit-scrollbar {
    width: 10px;
    height: 10px;
}

::-webkit-scrollbar-track {
    background: var(--color-surface);
}

::-webkit-scrollbar-thumb {
    background: var(--gradient-primary);
    border-radius: var(--radius-pill);
}

::-webkit-scrollbar-thumb:hover {
    background: linear-gradient(135deg, #1e40af, #0284c7);
}

::selection {
    background: rgba(37, 99, 235, 0.3);
    color: var(--color-text);
}

/* Container Principal */
.container {
    min-height: 100vh;
    display: flex;
    position: relative;
}

/* =============================================
   SIDEBAR MODERNA
   ============================================= */

.sidebar {
    width: 240px;
    background: linear-gradient(135deg, rgba(15, 23, 42, 0.96), rgba(17, 24, 39, 0.96));
    backdrop-filter: blur(18px);
    border-right: 1px solid var(--color-border);
    display: flex;
    flex-direction: column;
    position: fixed;
    height: 100vh;
    z-index: 1000;
    overflow-y: auto;
    transition: all var(--transition-slow);
    box-shadow: var(--shadow-low);
}

/* Classe collapsed removida - sem funcionalidade de minimizar no desktop */

/* Sidebar Header */
.sidebar-header {
    padding: var(--spacing-6);
    display: flex;
    justify-content: center;
    align-items: center;
    border-bottom: 1px solid var(--color-border);
}

.logo {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    transition: all var(--transition);
}

  .logo img {
    width: 140px;
    height: auto;
      object-fit: contain;
    transition: all var(--transition);
}

/* Navegação */
.sidebar-nav {
    flex: 1;
    padding: var(--spacing-4) 0;
}

.nav-list {
    list-style: none;
}

.nav-item {
    margin: 4px 0;
}

.nav-link {
    display: flex;
    align-items: center;
    gap: var(--spacing-4);
    padding: 12px var(--spacing-4);
    margin: 0 var(--spacing-3);
    color: var(--color-text-muted);
    text-decoration: none;
    border-radius: var(--radius-md);
    transition: all var(--transition);
    font-weight: 500;
    position: relative;
}

.nav-link::before {
    content: "";
    position: absolute;
    left: -12px;
    top: 50%;
    transform: translateY(-50%);
    width: 4px;
    height: 26px;
    border-radius: var(--radius-pill);
    background: transparent;
    transition: all var(--transition);
}

.nav-link:hover {
    background: rgba(37, 99, 235, 0.16);
    color: var(--color-text);
}

.nav-item.active .nav-link {
    color: var(--color-text);
    background: linear-gradient(135deg, rgba(37, 99, 235, 0.28), rgba(30, 64, 175, 0.55));
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.04), var(--shadow-low);
}

.nav-item.active .nav-link::before {
    background: linear-gradient(180deg, var(--color-primary), var(--color-secondary));
}

.nav-link i {
    width: 22px;
    height: 22px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 1.1rem;
}

.nav-separator {
    height: 1px;
    background: var(--color-border);
    margin: var(--spacing-4) var(--spacing-3);
}

/* Manager Section */
.manager-section {
    margin: var(--spacing-4) 0;
}

.manager-separator {
    height: 1px;
    background: var(--color-border);
    margin: var(--spacing-3) 0;
}

.manager-header {
    display: flex;
    align-items: center;
    gap: var(--spacing-2);
    padding: var(--spacing-3) var(--spacing-4);
    margin: 0 var(--spacing-3);
    color: #fbbf24;
    font-size: 0.85rem;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    font-weight: 600;
}

.manager-nav-list {
    list-style: none;
}

.manager-link {
    border-left: 2px solid rgba(251, 191, 36, 0.3);
}

/* Nav Bottom */
.nav-list-bottom {
    margin-top: auto;
    padding-top: var(--spacing-4);
    border-top: 1px solid var(--color-border);
}

/* Sidebar Footer */
.sidebar-footer {
    padding: var(--spacing-4);
    border-top: 1px solid var(--color-border);
    background: rgba(8, 15, 33, 0.92);
}

.user-profile {
    display: flex;
    align-items: center;
    gap: var(--spacing-3);
}

.user-avatar {
    width: 38px;
    height: 38px;
    border-radius: var(--radius-xl);
    background: rgba(59, 130, 246, 0.3);
    display: grid;
    place-items: center;
    font-weight: 600;
    color: var(--color-text);
    font-size: 0.9rem;
}

.user-details {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.user-name {
    font-weight: 600;
    color: var(--color-text);
    font-size: 0.9rem;
    max-width: 140px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.sidebar.collapsed .user-details {
    display: none;
}

/* Floating Toggle */
.floating-toggle {
    position: fixed;
    bottom: 30px;
    left: 30px;
    width: 56px;
    height: 56px;
    background: var(--gradient-primary);
    border: none;
    border-radius: 50%;
    color: white;
    font-size: 1.2rem;
    cursor: pointer;
    z-index: 1001;
    display: none;
    align-items: center;
    justify-content: center;
    box-shadow: var(--shadow-xl);
    transition: all var(--transition);
}

.floating-toggle:hover {
    transform: scale(1.1);
    box-shadow: var(--shadow-glow);
}

/* Botão de fechar sidebar - escondido no desktop */
.sidebar-close-btn {
    display: none;
}

/* =============================================
   MAIN WRAPPER
   ============================================= */

.main-wrapper {
    flex: 1;
    display: flex;
    flex-direction: column;
    margin-left: 240px;
    transition: margin-left var(--transition-slow);
}

.sidebar.collapsed + .main-wrapper {
    margin-left: 88px;
}

/* Header */
.header {
    position: sticky;
    top: 0;
    z-index: 100;
    background: rgba(15, 23, 42, 0.65);
    backdrop-filter: blur(36px);
    border-bottom: 1px solid var(--color-border);
    padding: 0 var(--spacing-8);
    height: 84px;
    box-shadow: var(--shadow-low);
}

.header-content {
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--spacing-6);
}

.header-content h1 {
    font-size: 1.35rem;
    font-weight: 600;
    color: var(--color-text);
    display: flex;
    align-items: center;
    gap: var(--spacing-3);
}

.header-content h1 i {
    color: var(--color-primary-light);
}

.mobile-menu-toggle {
    display: none;
    background: none;
    border: none;
    color: var(--color-text);
    font-size: 1.4rem;
    cursor: pointer;
    padding: var(--spacing-2);
}

.user-info {
    display: flex;
    align-items: center;
    gap: var(--spacing-4);
    color: var(--color-text-muted);
    font-size: 0.95rem;
}

.logout-btn {
    background: rgba(37, 99, 235, 0.16);
    border: 1px solid rgba(37, 99, 235, 0.3);
    color: var(--color-text);
    padding: var(--spacing-2) var(--spacing-4);
    border-radius: var(--radius-pill);
    cursor: pointer;
    transition: all var(--transition);
    display: flex;
    align-items: center;
    gap: var(--spacing-2);
    font-weight: 500;
}

.logout-btn:hover {
    background: rgba(37, 99, 235, 0.28);
    border-color: rgba(56, 189, 248, 0.55);
    transform: translateY(-1px);
    box-shadow: 0 4px 12px rgba(37, 99, 235, 0.3);
}

/* =============================================
   MAIN CONTENT
   ============================================= */

.main-content {
    flex: 1;
    padding: var(--spacing-8);
    overflow-y: auto;
}

/* Grid System */
.grid {
    display: grid;
    gap: var(--spacing-6);
    margin-bottom: var(--spacing-6);
}

.grid--2 {
    grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
}

.grid--4 {
    grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
}

/* =============================================
   CARDS DE MÉTRICAS
   ============================================= */

.metric-card {
    background: var(--color-surface);
    border-radius: var(--radius-xl);
    padding: var(--spacing-6);
    border: 1px solid rgba(148, 163, 184, 0.06);
    box-shadow: var(--shadow-low);
    display: flex;
    align-items: center;
    gap: var(--spacing-5);
    transition: all var(--transition);
    position: relative;
    overflow: hidden;
}

.metric-card::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 3px;
    background: var(--gradient-primary);
    opacity: 0;
    transition: opacity var(--transition);
}

.metric-card:hover {
    transform: translateY(-4px);
    box-shadow: var(--shadow-xl);
    border-color: rgba(148, 163, 184, 0.15);
}

.metric-card:hover::before {
    opacity: 1;
}

.metric-icon {
    width: 56px;
    height: 56px;
    border-radius: var(--radius-lg);
    background: linear-gradient(135deg, rgba(37, 99, 235, 0.28), rgba(14, 165, 233, 0.18));
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.5rem;
    color: var(--color-primary-light);
    flex-shrink: 0;
}

.metric-info {
    flex: 1;
}

.metric-info h3 {
    font-size: 0.85rem;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--color-text-muted);
    margin-bottom: var(--spacing-2);
    font-weight: 500;
}

.metric-value {
    font-size: 1.8rem;
    font-weight: 700;
    color: var(--color-text);
    margin-bottom: var(--spacing-2);
}

.metric-change {
    font-size: 0.85rem;
}

/* Badges */
.badge {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 4px 10px;
    border-radius: var(--radius-pill);
    font-size: 0.78rem;
    font-weight: 500;
}

.badge--success {
    background: rgba(34, 197, 94, 0.16);
    color: #22c55e;
}

.badge--danger {
    background: rgba(239, 68, 68, 0.16);
    color: var(--color-danger);
}

.badge--warning {
    background: rgba(249, 115, 22, 0.18);
    color: var(--color-alert);
}

.badge--primary {
    background: rgba(37, 99, 235, 0.16);
    color: var(--color-primary-light);
}

.badge--neutral {
    background: rgba(56, 189, 248, 0.18);
    color: #38bdf8;
}

/* =============================================
   SECTIONS
   ============================================= */

.page-header {
    margin-bottom: var(--spacing-8);
}

.page-header h2 {
    font-size: 1.8rem;
    font-weight: 600;
    color: var(--color-text);
    display: flex;
    align-items: center;
    gap: var(--spacing-3);
    margin-bottom: var(--spacing-2);
}

.page-header h2 i {
    color: var(--color-primary-light);
}

.page-header p {
    color: var(--color-text-muted);
    font-size: 1rem;
}

/* Charts Section */
.charts-section {
    margin-bottom: var(--spacing-8);
}

.chart-container {
    background: var(--color-surface);
    border-radius: var(--radius-xl);
    padding: var(--spacing-6);
    border: 1px solid rgba(148, 163, 184, 0.06);
    box-shadow: var(--shadow-low);
}

.chart-full-width {
    width: 100%;
}

.chart-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: var(--spacing-6);
}

.chart-header h3 {
    font-size: 1.2rem;
    font-weight: 600;
    color: var(--color-text);
    display: flex;
    align-items: center;
    gap: var(--spacing-2);
}

.surface--glass {
    background: rgba(17, 24, 39, 0.66);
    backdrop-filter: blur(12px);
}

/* Empty State */
.empty-state {
    background: var(--color-surface);
    border-radius: var(--radius-xl);
    padding: var(--spacing-10);
    text-align: center;
    border: 1px solid rgba(148, 163, 184, 0.06);
    box-shadow: var(--shadow-low);
}

.empty-state__icon {
    width: 80px;
    height: 80px;
    margin: 0 auto var(--spacing-6);
    border-radius: 50%;
    background: linear-gradient(135deg, rgba(37, 99, 235, 0.28), rgba(14, 165, 233, 0.18));
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 2rem;
    color: var(--color-primary-light);
}

.empty-state__title {
    font-size: 1.3rem;
    font-weight: 600;
    color: var(--color-text);
    margin-bottom: var(--spacing-2);
}

.empty-state__description {
    color: var(--color-text-muted);
    margin-bottom: var(--spacing-6);
    max-width: 500px;
    margin-left: auto;
    margin-right: auto;
}

.surface {
    background: var(--color-surface);
    border-radius: var(--radius-xl);
    padding: var(--spacing-6);
}

/* Sections Header */
.section-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: var(--spacing-6);
}

.section-header h3 {
    font-size: 1.2rem;
    font-weight: 600;
    color: var(--color-text);
    display: flex;
    align-items: center;
    gap: var(--spacing-2);
}

/* =============================================
   BUTTONS
   ============================================= */

.btn-primary-solid,
.btn-primary,
.button--primary {
    background: linear-gradient(135deg, var(--color-primary), var(--color-secondary));
    color: var(--color-text);
    padding: 10px 20px;
    border: none;
    border-radius: var(--radius-pill);
    font-weight: 500;
    cursor: pointer;
    transition: all var(--transition);
    display: inline-flex;
    align-items: center;
    gap: var(--spacing-2);
    box-shadow: 0 12px 30px rgba(37, 99, 235, 0.35);
}

.btn-primary-solid:hover,
.btn-primary:hover,
.button--primary:hover {
    transform: translateY(-2px);
    box-shadow: 0 16px 40px rgba(37, 99, 235, 0.45);
    filter: brightness(1.05);
}

.btn-secondary,
.button--secondary {
    background: rgba(37, 99, 235, 0.16);
    border: 1px solid rgba(37, 99, 235, 0.5);
    color: var(--color-text);
    padding: 10px 20px;
    border-radius: var(--radius-pill);
    font-weight: 500;
    cursor: pointer;
    transition: all var(--transition);
    display: inline-flex;
    align-items: center;
    gap: var(--spacing-2);
}

.btn-secondary:hover,
.button--secondary:hover {
    background: rgba(37, 99, 235, 0.28);
    border-color: rgba(56, 189, 248, 0.55);
    transform: translateY(-1px);
}

.btn-ghost,
.button--ghost {
    background: rgba(255, 255, 255, 0.03);
    border: 1px solid rgba(148, 163, 184, 0.18);
    color: var(--color-text);
    padding: 10px 20px;
    border-radius: var(--radius-pill);
    font-weight: 500;
    cursor: pointer;
    transition: all var(--transition);
    display: inline-flex;
    align-items: center;
    gap: var(--spacing-2);
}

.btn-ghost:hover,
.button--ghost:hover {
    border-color: rgba(56, 189, 248, 0.45);
    background: rgba(37, 99, 235, 0.08);
}

/* ========================================
   🎨 BOTÕES PREMIUM - MODAL FOOTER
   ======================================== */

.btn-cancel {
    background: rgba(148, 163, 184, 0.1);
    border: 1px solid rgba(148, 163, 184, 0.2);
    color: var(--color-text-muted);
    padding: 0.75rem 1.5rem;
    border-radius: 10px;
    font-weight: 600;
    font-size: 0.95rem;
    cursor: pointer;
    transition: all 0.3s ease;
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
}

.btn-cancel:hover {
    background: rgba(148, 163, 184, 0.15);
    border-color: rgba(148, 163, 184, 0.3);
    transform: translateY(-1px);
}

.btn-create {
    position: relative;
    background: linear-gradient(135deg, #3b82f6 0%, #2563eb 100%);
    color: white;
    border: none;
    border-radius: 10px;
    padding: 0.75rem 1.5rem;
    font-weight: 700;
    font-size: 0.95rem;
    cursor: pointer;
    transition: all 0.3s ease;
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    box-shadow: 
        0 4px 12px rgba(59, 130, 246, 0.4),
        inset 0 1px 0 rgba(255, 255, 255, 0.1);
    overflow: hidden;
}

/* Shine effect no hover */
.btn-create::before {
    content: '';
    position: absolute;
    top: 0;
    left: -100%;
    width: 100%;
    height: 100%;
    background: linear-gradient(90deg, transparent, rgba(255,255,255,0.2), transparent);
    transition: left 0.5s ease;
}

.btn-create:hover::before {
    left: 100%;
}

.btn-create:hover {
    background: linear-gradient(135deg, #2563eb 0%, #1d4ed8 100%);
    transform: translateY(-2px);
    box-shadow: 
        0 8px 20px rgba(59, 130, 246, 0.5),
        inset 0 1px 0 rgba(255, 255, 255, 0.15);
}

.btn-create:active {
    transform: translateY(0);
    box-shadow: 
        0 4px 12px rgba(59, 130, 246, 0.4),
        inset 0 1px 0 rgba(255, 255, 255, 0.1);
}

.btn-create i {
    font-size: 1rem;
}

/* Estado loading */
.btn-create.loading {
    pointer-events: none;
    opacity: 0.7;
}

.btn-create.loading i {
    animation: spin 1s linear infinite;
}

@keyframes spin {
    from { transform: rotate(0deg); }
    to { transform: rotate(360deg); }
}

.btn-delete {
    background: var(--gradient-danger);
    color: white;
    padding: 10px 20px;
    border: none;
    border-radius: var(--radius-pill);
    font-weight: 500;
    cursor: pointer;
    transition: all var(--transition);
}

.btn-delete:hover {
    transform: translateY(-2px);
    box-shadow: 0 8px 20px rgba(239, 68, 68, 0.4);
    filter: brightness(1.1);
}

.pressable {
    position: relative;
    transition: all var(--transition);
}

.pressable:active {
    transform: scale(0.98);
}

.hover-lift {
    transition: all var(--transition);
}

.hover-lift:hover {
    transform: translateY(-4px);
}

/* =============================================
   INTEGRATIONS
   ============================================= */

.integrations-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: var(--spacing-6);
    margin-bottom: var(--spacing-8);
}

.integration-card {
    background: rgba(17, 24, 39, 0.66);
    border: 1px solid rgba(148, 163, 184, 0.08);
    border-radius: var(--radius-xl);
    padding: var(--spacing-5);
    transition: all var(--transition);
    position: relative;
}

.integration-card:hover {
    transform: translateY(-4px);
    box-shadow: 0 18px 40px rgba(37, 99, 235, 0.28);
    border-color: rgba(148, 163, 184, 0.15);
}

.integration-card:active {
    transform: translateY(-2px);
    transition: all 0.1s ease;
}

.integration-card.is-active {
    border-color: rgba(56, 189, 248, 0.45);
}

/* Estado: Conectado (Vidro Verde) */
.integration-card.is-connected {
    background: linear-gradient(135deg, rgba(16,185,129,0.10) 0%, rgba(5,150,105,0.08) 100%), rgba(17,24,39,0.66);
    border-color: rgba(16, 185, 129, 0.35);
    box-shadow: 0 18px 40px rgba(16,185,129,0.20), inset 0 1px 0 rgba(255,255,255,0.04);
}

.integration-card.is-connected:hover {
    transform: translateY(-4px);
    box-shadow: 0 22px 46px rgba(16,185,129,0.28);
}

.integration-header {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    margin-bottom: var(--spacing-4);
}

.integration-selector {
    display: flex;
    align-items: center;
}

.provider-radio {
    display: none;
}

.radio-label {
    display: flex;
    align-items: center;
    gap: var(--spacing-3);
    cursor: pointer;
    color: var(--color-text-muted);
    font-size: 0.9rem;
    font-weight: 600;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    padding: 4px 8px;
    border-radius: 6px;
}

.radio-label:hover {
    color: var(--color-text);
    background: rgba(255, 255, 255, 0.03);
}

.radio-custom {
    width: 24px;
    height: 24px;
    border: 3px solid var(--color-border-strong);
    border-radius: 50%;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    position: relative;
    flex-shrink: 0;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
}

.radio-custom:hover {
    border-color: var(--color-primary-light);
    box-shadow: 0 4px 12px rgba(59, 130, 246, 0.25);
    transform: scale(1.05);
}

.provider-radio:checked + .radio-label .radio-custom {
    border-color: var(--color-primary-light);
    background: linear-gradient(135deg, var(--color-primary) 0%, #2563eb 100%);
    box-shadow: 0 4px 16px rgba(59, 130, 246, 0.4), 0 0 0 4px rgba(59, 130, 246, 0.1);
    transform: scale(1.1);
}

.provider-radio:checked + .radio-label .radio-custom::after {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%) scale(1);
    width: 10px;
    height: 10px;
    background: white;
    border-radius: 50%;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
    animation: radioCheckIn 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

@keyframes radioCheckIn {
    0% {
        transform: translate(-50%, -50%) scale(0);
        opacity: 0;
    }
    50% {
        transform: translate(-50%, -50%) scale(1.2);
    }
    100% {
        transform: translate(-50%, -50%) scale(1);
        opacity: 1;
    }
}

.provider-radio:checked + .radio-label {
    color: var(--color-text);
    font-weight: 700;
}

.integration-status {
    display: flex;
    align-items: center;
}

.integration-logo {
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: var(--spacing-4);
    padding: var(--spacing-4);
}

.logo-img {
    max-width: 120px;
    height: auto;
    object-fit: contain;
    border-radius: var(--radius-md);
}

.integration-info { text-align: center; }

.integration-info h3 {
    font-size: 1.2rem;
    font-weight: 600;
    color: var(--color-text);
    margin-bottom: var(--spacing-2);
}

.integration-info p {
    color: var(--color-text-muted);
    font-size: 0.9rem;
    line-height: 1.5;
    margin-bottom: var(--spacing-4);
}

.integration-features {
    display: flex;
    flex-wrap: wrap;
    gap: var(--spacing-2);
    margin-bottom: var(--spacing-4);
}

.integration-actions {
    margin-top: var(--spacing-4);
    display: flex;
    justify-content: center;
    align-items: center;
}

.integration-actions button {
    width: auto;
    min-width: 140px;
    max-width: 200px;
}


/* =============================================
   BOTÕES DE INTEGRAÇÃO (PREMIUM)
   ============================================= */
.btn-integration {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    padding: 14px 22px; /* aumentado */
    border-radius: var(--radius-md);
    border: 1px solid rgba(148, 163, 184, 0.25);
    background: linear-gradient(180deg, rgba(31,41,55,0.85) 0%, rgba(17,24,39,0.85) 100%);
    color: var(--color-text);
    font-weight: 800;
    font-size: 0.98rem; /* levemente maior */
    letter-spacing: 0.2px;
    min-width: 200px; /* largura mínima para presença visual */
    box-shadow: 0 8px 24px rgba(0,0,0,0.35), inset 0 1px 0 rgba(255,255,255,0.05);
    transition: transform .15s ease, box-shadow .2s ease, filter .2s ease;
    will-change: transform, filter;
    cursor: pointer;
    user-select: none;
}

.btn-integration i { opacity: 0.95; }

.btn-integration:hover {
    transform: translateY(-1px);
    filter: brightness(1.03);
    box-shadow: 0 12px 28px rgba(0,0,0,0.45), inset 0 1px 0 rgba(255,255,255,0.08);
}

.btn-integration:active {
    transform: translateY(0);
    filter: brightness(0.98);
    box-shadow: 0 6px 14px rgba(0,0,0,0.35), inset 0 2px 6px rgba(0,0,0,0.35);
}

.btn-integration:focus-visible {
    outline: none;
    box-shadow: 0 0 0 3px rgba(59,130,246,0.35), 0 10px 26px rgba(0,0,0,0.5);
}

.btn-integration::before {
    content: "";
    position: absolute;
    inset: 0;
    border-radius: inherit;
    background: linear-gradient(180deg, rgba(255,255,255,0.1), rgba(255,255,255,0));
    opacity: 0.6;
    pointer-events: none;
}

/* Conectar (VERDE) */
.btn-integration.is-connect {
    background: linear-gradient(135deg, #22c55e 0%, #16a34a 100%);
    border-color: rgba(34,197,94,0.5);
    color: #ffffff;
    text-shadow: 0 1px 0 rgba(0,0,0,0.25);
}
.btn-integration.is-connect:hover { box-shadow: 0 16px 36px rgba(34,197,94,0.35); }
.btn-integration.is-connect:focus-visible { box-shadow: 0 0 0 3px rgba(34,197,94,0.35); }

/* Desconectar (VERMELHO) */
.btn-integration.is-disconnect {
    background: linear-gradient(135deg, #ef4444 0%, #dc2626 100%);
    border-color: rgba(239,68,68,0.5);
    color: #ffffff;
    text-shadow: 0 1px 0 rgba(0,0,0,0.25);
}
.btn-integration.is-disconnect:hover { box-shadow: 0 16px 36px rgba(239,68,68,0.35); }
.btn-integration.is-disconnect:focus-visible { box-shadow: 0 0 0 3px rgba(239,68,68,0.35); }

/* Reconfigurar (ÂMBAR) */
.btn-integration.is-reconfig {
    background: linear-gradient(135deg, #f59e0b 0%, #d97706 100%);
    border-color: rgba(245,158,11,0.5);
    color: #111827;
}
.btn-integration.is-reconfig:hover { box-shadow: 0 16px 36px rgba(245,158,11,0.35); }
.btn-integration.is-reconfig:focus-visible { box-shadow: 0 0 0 3px rgba(245,158,11,0.35); }

@media (prefers-reduced-motion: reduce) {
    .btn-integration,
    .btn-integration:hover,
    .btn-integration:active {
        transition: none !important;
    }
}

/* Badge de status de integração */
.integration-status {
    display: inline-flex;
    align-items: center;
    font-size: 0.75rem;
    font-weight: 600;
    padding: 4px 10px;
    border-radius: var(--radius-pill);
    transition: all 0.3s ease;
    animation: fadeIn 0.3s ease;
}

@keyframes fadeIn {
    from {
        opacity: 0;
        transform: scale(0.9);
    }
    to {
        opacity: 1;
        transform: scale(1);
    }
}

/* Versão premium e posicionamento no topo direito do card */
.integration-card .integration-status {
    position: absolute;
    top: 14px;
    right: 16px;
    padding: 8px 14px;
    font-size: 0.9rem;
    font-weight: 800;
    letter-spacing: 0.3px;
    border-radius: var(--radius-pill);
    backdrop-filter: blur(6px);
    border: 1px solid rgba(148, 163, 184, 0.25);
    box-shadow: 0 6px 18px rgba(0,0,0,0.35);
    width: auto;
    max-width: 150px;
    white-space: nowrap;
    z-index: 10;
}

.integration-card .integration-status.badge--success {
    background: linear-gradient(135deg, #22c55e 0%, #16a34a 100%);
    color: #ffffff;
    border-color: rgba(34,197,94,0.5);
    text-shadow: 0 1px 0 rgba(0,0,0,0.25);
    box-shadow: 0 8px 24px rgba(34,197,94,0.35), 0 0 0 3px rgba(34,197,94,0.15) inset;
    animation: popIn 300ms ease, statusGlow 2s ease-in-out infinite 600ms;
}

.integration-card .integration-status.badge--success::before {
    content: '✔';
    margin-right: 8px;
    filter: drop-shadow(0 1px 0 rgba(0,0,0,0.25));
}

@keyframes popIn {
    0% { transform: translateY(-6px) scale(0.95); opacity: 0; }
    100% { transform: translateY(0) scale(1); opacity: 1; }
}

@keyframes statusGlow {
    0%, 100% { box-shadow: 0 8px 24px rgba(34,197,94,0.35), 0 0 0 3px rgba(34,197,94,0.15) inset; }
    50% { box-shadow: 0 12px 32px rgba(34,197,94,0.5), 0 0 0 4px rgba(34,197,94,0.22) inset; }
}

/* =============================================
   MODALS
   ============================================= */

/* =============================================
   EMPTY STATE – SEUS CHECKOUTS (SEM GATEWAY)
   ============================================= */
.empty-state {
    position: relative;
    max-width: 860px;
    margin: 32px auto;
    padding: 28px;
    border-radius: var(--radius-xl);
    border: 1px solid var(--color-border);
    background: linear-gradient(135deg, rgba(17,24,39,0.66), rgba(31,41,55,0.55));
    box-shadow: var(--shadow-low);
    backdrop-filter: blur(8px);
    display: grid;
    grid-template-columns: 88px 1fr;
    gap: 22px;
    overflow: hidden;
}

.empty-state::before {
    content: "";
    position: absolute;
    inset: -30% -10% auto auto;
    height: 220px;
    width: 220px;
    background: radial-gradient(ellipse at center, rgba(56,189,248,0.16), rgba(56,189,248,0));
    filter: blur(12px);
    pointer-events: none;
}

.empty-state-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 88px;
    height: 88px;
    border-radius: 18px;
    background: linear-gradient(135deg, rgba(59,130,246,0.28), rgba(37,99,235,0.18));
    border: 1px solid rgba(59,130,246,0.35);
    box-shadow: 0 10px 24px rgba(37,99,235,0.25) inset, 0 6px 20px rgba(0,0,0,0.35);
}

.empty-state-icon i {
    color: #93c5fd;
    font-size: 1.6rem;
}

.empty-state-content h3 {
    margin: 0 0 8px 0;
    font-size: 1.25rem;
    font-weight: 800;
    color: var(--color-text);
}

.empty-state-content p {
    margin: 0 0 14px 0;
    color: var(--color-text-muted);
}

.empty-state-features {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 10px 18px;
    margin-top: 8px;
}

.empty-state-features .feature-item {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    color: var(--color-text);
    font-size: 0.92rem;
}

.empty-state-features .feature-item i {
    color: #22c55e;
}

.empty-state-actions {
    grid-column: 1 / -1;
    display: flex;
    justify-content: center;
    margin-top: 8px;
}

/* Botão CTA para configurar integração (verde premium) */
.btn-integration-config {
    position: relative;
    display: inline-flex;
    align-items: center;
    gap: 10px;
    padding: 12px 20px;
    min-width: 220px;
    border-radius: var(--radius-md);
    border: 1px solid rgba(34,197,94,0.45);
    background: linear-gradient(135deg, #22c55e 0%, #16a34a 100%);
    color: #ffffff;
    font-weight: 800;
    letter-spacing: 0.2px;
    box-shadow: 0 12px 28px rgba(34,197,94,0.25), inset 0 1px 0 rgba(255,255,255,0.08);
    transition: transform .15s ease, box-shadow .2s ease, filter .2s ease;
}

.btn-integration-config:hover {
    transform: translateY(-1px);
    box-shadow: 0 18px 36px rgba(34,197,94,0.35), inset 0 1px 0 rgba(255,255,255,0.1);
}

.btn-integration-config:focus-visible {
    outline: none;
    box-shadow: 0 0 0 3px rgba(34,197,94,0.35), 0 10px 26px rgba(0,0,0,0.5);
}

.btn-integration-config i:last-child { opacity: 0.85; }

@media (max-width: 640px) {
    .empty-state {
        grid-template-columns: 1fr;
        gap: 16px;
        padding: 22px;
    }
    .empty-state-icon { width: 74px; height: 74px; border-radius: 16px; }
    .empty-state-features { grid-template-columns: 1fr; }
}

.modal-overlay,
.syncpay-modal-overlay {
    position: fixed;
    inset: 0;
    background: rgba(15, 23, 42, 0.75);
    backdrop-filter: blur(8px);
    display: none; /* escondido por padrão */
    align-items: center;
    justify-content: center;
    z-index: 100000; /* acima de tudo, incluindo loading-screen (99999) */
    padding: var(--spacing-6);
}

/* Modal visível quando ativo */
.modal-overlay.active,
.syncpay-modal-overlay.active {
    display: flex;
}

.modal-container,
.modal-content {
    background: var(--color-surface);
    border-radius: var(--radius-xl);
    border: 1px solid rgba(148, 163, 184, 0.15);
    box-shadow: var(--shadow-soft);
    max-width: 600px;
    width: 100%;
    max-height: 90vh;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    animation: modalSlideIn 0.3s ease;
    position: relative;
    z-index: 100001; /* acima do overlay */
}

.modal-container.large-modal {
    max-width: 900px;
}

@keyframes modalSlideIn {
    from {
        opacity: 0;
        transform: translateY(-20px) scale(0.95);
    }
    to {
        opacity: 1;
        transform: translateY(0) scale(1);
    }
}

.modal-header {
    padding: var(--spacing-6);
    border-bottom: 1px solid var(--color-border);
    display: flex;
    justify-content: space-between;
    align-items: center;
    background: rgba(37, 99, 235, 0.05);
}

.modal-header h3 {
    font-size: 1.25rem;
    font-weight: 600;
    color: var(--color-text);
    display: flex;
    align-items: center;
    gap: var(--spacing-2);
}

.modal-header h3 i {
    color: var(--color-primary-light);
}

.modal-close {
    background: none;
    border: none;
    color: var(--color-text-muted);
    cursor: pointer;
    padding: var(--spacing-2);
    border-radius: var(--radius-md);
    transition: all var(--transition);
    font-size: 1.2rem;
}

.modal-close:hover {
    background: rgba(239, 68, 68, 0.16);
    color: var(--color-danger);
}

.modal-body {
    padding: var(--spacing-6);
    overflow-y: auto;
    flex: 1;
    }
    
    .modal-footer {
    padding: var(--spacing-6);
    border-top: 1px solid var(--color-border);
    display: flex;
    justify-content: flex-end;
    gap: var(--spacing-3);
    background: rgba(17, 24, 39, 0.3);
}

.modal-warning {
    margin-top: var(--spacing-3);
    padding: var(--spacing-3) var(--spacing-4);
    background: rgba(239, 68, 68, 0.1);
    border-left: 3px solid var(--color-danger);
    border-radius: var(--radius-md);
    color: var(--color-text-muted);
    font-size: 0.9rem;
}

/* Form Elements */
.form-group {
    margin-bottom: var(--spacing-5);
}

.form-group label {
    display: block;
    margin-bottom: var(--spacing-2);
    color: var(--color-text);
    font-weight: 500;
    font-size: 0.95rem;
}

.form-group input[type="text"],
.form-group input[type="number"],
.form-group input[type="url"],
.form-group input[type="password"],
.form-group select,
.form-select {
    width: 100%;
    padding: 12px 16px;
    background: rgba(17, 24, 39, 0.7);
    border: 1px solid rgba(148, 163, 184, 0.2);
    border-radius: var(--radius-md);
    color: var(--color-text);
    font-size: 0.95rem;
    transition: all var(--transition);
}

.form-group input:focus,
.form-group select:focus,
.form-select:focus {
    outline: none;
    border-color: var(--color-primary);
    background: rgba(17, 24, 39, 0.9);
    box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.1);
}

.form-help,
small.form-help,
small.field-help {
    display: block;
    margin-top: var(--spacing-2);
    color: var(--color-text-muted);
    font-size: 0.85rem;
}

/* Toggle Switch */
.toggle-container {
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.toggle-label {
    color: var(--color-text);
    font-weight: 500;
    display: flex;
    align-items: center;
    gap: var(--spacing-2);
}

.switch {
    position: relative;
    width: 52px;
    height: 28px;
}

.switch input {
    opacity: 0;
    width: 0;
    height: 0;
}

.slider {
    position: absolute;
    cursor: pointer;
    inset: 0;
    background: rgba(148, 163, 184, 0.2);
    transition: var(--transition);
}

.slider.round {
    border-radius: var(--radius-pill);
}

.slider:before {
    position: absolute;
    content: "";
    height: 22px;
    width: 22px;
    left: 3px;
    bottom: 3px;
    background: var(--color-text);
    transition: var(--transition);
    border-radius: 50%;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
}

.switch input:checked + .slider {
    background: var(--gradient-primary);
}

.switch input:checked + .slider:before {
    transform: translateX(24px);
}

/* =============================================
   ANIMATIONS
   ============================================= */

.fade-in {
    animation: fadeIn 320ms ease;
}

@keyframes fadeIn {
    from {
        opacity: 0;
        transform: translateY(6px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* =============================================
   UTILITIES
   ============================================= */

.divider--gradient {
    height: 2px;
    background: linear-gradient(90deg, transparent, var(--color-primary), transparent);
    margin: var(--spacing-6) 0;
}

[data-tooltip] {
    position: relative;
}

[data-tooltip]:hover::after {
    content: attr(data-tooltip);
    position: absolute;
    bottom: 100%;
    left: 50%;
    transform: translateX(-50%);
    padding: var(--spacing-2) var(--spacing-3);
    background: var(--color-surface-elevated);
    color: var(--color-text);
    font-size: 0.8rem;
    border-radius: var(--radius-md);
    white-space: nowrap;
    box-shadow: var(--shadow-lg);
    z-index: 1000;
    margin-bottom: var(--spacing-2);
}

/* =============================================
   TAXA PAGE
   ============================================= */

.taxa-container {
    display: grid;
    gap: var(--spacing-6);
}

.taxa-current-card,
.taxa-reduction-card,
.taxa-history-card {
    background: var(--color-surface);
    border-radius: var(--radius-xl);
    padding: var(--spacing-6);
    border: 1px solid rgba(148, 163, 184, 0.06);
    box-shadow: var(--shadow-low);
}

.taxa-current-header,
.taxa-reduction-header,
.taxa-history-header {
        display: flex;
        align-items: center;
    gap: var(--spacing-3);
    margin-bottom: var(--spacing-6);
    color: var(--color-text);
    font-size: 1.2rem;
    font-weight: 600;
}

.taxa-current-header i,
.taxa-reduction-header i,
.taxa-history-header i {
    color: var(--color-primary-light);
}

.taxa-current-value {
    text-align: center;
    padding: var(--spacing-8) 0;
}

.taxa-currency {
    font-size: 1.5rem;
    color: var(--color-text-muted);
}

.taxa-amount {
    font-size: 3.5rem;
    font-weight: 700;
    color: var(--color-text);
}

.taxa-label {
    display: block;
    margin-top: var(--spacing-2);
    color: var(--color-text-muted);
    font-size: 0.9rem;
}

.taxa-info {
    background: rgba(37, 99, 235, 0.08);
    padding: var(--spacing-4);
    border-radius: var(--radius-md);
    margin-top: var(--spacing-6);
}

.taxa-info p {
    color: var(--color-text-muted);
    font-size: 0.9rem;
    display: flex;
    align-items: center;
    gap: var(--spacing-2);
}

.taxa-info i {
    color: var(--color-primary-light);
}

.taxa-reduction-content {
    margin-bottom: var(--spacing-6);
}

.taxa-reduction-description {
    color: var(--color-text-muted);
    margin-bottom: var(--spacing-4);
    line-height: 1.5;
}

.taxa-reduction-status {
    background: rgba(17, 24, 39, 0.5);
    padding: var(--spacing-4);
    border-radius: var(--radius-md);
    border: 1px solid var(--color-border);
}

.no-code-applied {
    display: flex;
    align-items: center;
    gap: var(--spacing-2);
    color: var(--color-text-muted);
}

.no-code-applied i {
    color: var(--color-danger);
}

.taxa-reduction-actions {
    display: flex;
    justify-content: center;
}

.btn-insert-code {
    position: relative;
    background: linear-gradient(135deg, #667eea 0%, #764ba2 50%, #f093fb 100%);
    background-size: 200% 200%;
    color: white;
    padding: 18px 36px;
    border: none;
    border-radius: 50px;
    font-size: 1.1rem;
    font-weight: 700;
    letter-spacing: 0.5px;
    cursor: pointer;
    transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 12px;
    box-shadow: 
        0 8px 24px rgba(102, 126, 234, 0.4),
        0 4px 12px rgba(118, 75, 162, 0.3),
        inset 0 1px 0 rgba(255, 255, 255, 0.2);
    overflow: hidden;
    animation: gradientShift 4s ease infinite;
}

@keyframes gradientShift {
    0%, 100% {
        background-position: 0% 50%;
    }
    50% {
        background-position: 100% 50%;
    }
}

.btn-insert-code::before {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    width: 0;
    height: 0;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.2);
    transform: translate(-50%, -50%);
    transition: width 0.6s, height 0.6s;
}

.btn-insert-code:hover::before {
    width: 300px;
    height: 300px;
}

.btn-insert-code i {
    font-size: 1.2rem;
    transition: transform 0.3s ease;
}

.btn-insert-code:hover {
    transform: translateY(-4px) scale(1.02);
    box-shadow: 
        0 12px 32px rgba(102, 126, 234, 0.5),
        0 8px 16px rgba(118, 75, 162, 0.4),
        0 0 40px rgba(240, 147, 251, 0.3),
        inset 0 1px 0 rgba(255, 255, 255, 0.3);
}

.btn-insert-code:hover i {
    transform: rotate(90deg) scale(1.1);
}

.btn-insert-code:active {
    transform: translateY(-2px) scale(0.98);
}

.empty-history {
    text-align: center;
    padding: var(--spacing-6);
    color: var(--color-text-muted);
}

.empty-history i {
    font-size: 2rem;
    margin-bottom: var(--spacing-3);
    opacity: 0.5;
}

/* =============================================
   CHECKOUT PAGE
   ============================================= */

.checkout-page,
.taxa-page,
.integration-page,
.financial-page,
.manage-attendants-page,
.fee-settings-page,
.attendants-metrics-page {
    display: none;
}

/* Checkout List Header */
.checkout-list-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: var(--spacing-6);
}

.checkout-list-header h2 {
    font-size: 1.5rem;
    font-weight: 600;
    color: var(--color-text);
}

.checkout-count {
    color: var(--color-text-muted);
    font-size: 1.2rem;
    margin-left: var(--spacing-2);
}

.checkout-list-description {
    color: var(--color-text-muted);
    margin-bottom: var(--spacing-6);
        font-size: 1rem;
}

/* Checkout Cards Grid */
.checkouts-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(420px, 1fr));
    gap: var(--spacing-6);
    margin-bottom: var(--spacing-8);
    justify-content: center;
}

/* Individual Checkout Card */
.checkout-card {
    background: var(--color-surface);
    border-radius: var(--radius-xl);
    padding: var(--spacing-6);
    border: 1px solid rgba(148, 163, 184, 0.06);
    box-shadow: var(--shadow-low);
    transition: all var(--transition);
    position: relative;
    display: flex;
        flex-direction: column;
    gap: var(--spacing-4);
}

.checkout-card::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 3px;
    background: var(--gradient-primary);
    opacity: 0;
    transition: opacity var(--transition);
    border-radius: var(--radius-xl) var(--radius-xl) 0 0;
}

.checkout-card:hover {
    transform: translateY(-4px);
    box-shadow: var(--shadow-xl);
    border-color: rgba(148, 163, 184, 0.15);
}

.checkout-card:hover::before {
    opacity: 1;
}

/* Checkout Card Header */
.checkout-card-header {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    margin-bottom: var(--spacing-3);
}

.checkout-card-status {
    display: flex;
    align-items: center;
    gap: var(--spacing-2);
}

.checkout-card-actions {
    display: flex;
    gap: var(--spacing-2);
}

.checkout-action-btn {
    background: rgba(37, 99, 235, 0.08);
    border: 1px solid rgba(37, 99, 235, 0.2);
    color: var(--color-text);
    padding: var(--spacing-2) var(--spacing-3);
    border-radius: var(--radius-md);
    cursor: pointer;
    transition: all var(--transition);
    font-size: 0.85rem;
    display: inline-flex;
    align-items: center;
    gap: var(--spacing-2);
    width: 100%;
    justify-content: center;
    text-align: center;
    white-space: normal;
}

.checkout-action-btn:hover {
    background: rgba(37, 99, 235, 0.16);
    border-color: rgba(56, 189, 248, 0.4);
    transform: translateY(-1px);
}

.checkout-action-btn i {
    font-size: 0.9rem;
}

/* Checkout Card Title */
.checkout-card-title {
    display: flex;
    align-items: center;
    gap: var(--spacing-3);
    margin-bottom: var(--spacing-4);
}

.checkout-type-badge {
    display: inline-flex;
    align-items: center;
    gap: var(--spacing-2);
    padding: 4px 10px;
    border-radius: var(--radius-pill);
    font-size: 0.75rem;
    font-weight: 500;
    background: rgba(56, 189, 248, 0.15);
    color: var(--color-primary-light);
    border: 1px solid rgba(56, 189, 248, 0.3);
}

.checkout-name {
    font-size: 1.2rem;
    font-weight: 600;
    color: var(--color-text);
    flex: 1;
}

.checkout-value {
    font-size: 1.5rem;
    font-weight: 700;
    color: var(--color-primary-light);
    margin-bottom: var(--spacing-4);
}

/* Checkout Card Stats */
.checkout-stats {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: var(--spacing-3);
    padding: var(--spacing-4);
    background: rgba(17, 24, 39, 0.5);
    border-radius: var(--radius-lg);
    margin-bottom: var(--spacing-4);
}

.checkout-stat {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
}

.checkout-stat-label {
    font-size: 0.75rem;
    color: var(--color-text-muted);
    margin-bottom: var(--spacing-1);
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

.checkout-stat-value {
    font-size: 1.1rem;
    font-weight: 600;
    color: var(--color-text);
}

/* Checkout Card Meta */
.checkout-meta {
    display: flex;
    align-items: center;
    gap: var(--spacing-2);
    color: var(--color-text-muted);
    font-size: 0.85rem;
    margin-bottom: var(--spacing-4);
}

.checkout-meta i {
    color: var(--color-primary-light);
}

/* Checkout Card Link */
.checkout-link {
    background: rgba(17, 24, 39, 0.5);
    padding: var(--spacing-3);
    border-radius: var(--radius-md);
    border: 1px solid var(--color-border);
    margin-bottom: var(--spacing-4);
}

.checkout-url {
    display: flex;
    align-items: center;
    gap: var(--spacing-2);
    color: var(--color-text-muted);
    font-size: 0.85rem;
    word-break: break-all;
}

.checkout-url i {
    color: var(--color-primary-light);
    flex-shrink: 0;
}

/* Checkout Card Footer Actions */
.checkout-footer-actions {
    display: flex;
    gap: var(--spacing-2);
    flex-wrap: wrap;
}

.checkout-footer-btn {
    flex: 1;
    min-width: 120px;
    background: rgba(37, 99, 235, 0.08);
    border: 1px solid rgba(37, 99, 235, 0.2);
    color: var(--color-text);
    padding: var(--spacing-3) var(--spacing-4);
    border-radius: var(--radius-md);
    cursor: pointer;
    transition: all var(--transition);
    font-size: 0.9rem;
    font-weight: 500;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--spacing-2);
}

.checkout-footer-btn:hover {
    background: rgba(37, 99, 235, 0.16);
    border-color: rgba(56, 189, 248, 0.4);
    transform: translateY(-1px);
}

.checkout-footer-btn.btn-primary-action {
    background: var(--gradient-primary);
    border: none;
    color: white;
    box-shadow: 0 4px 12px rgba(37, 99, 235, 0.3);
}

.checkout-footer-btn.btn-primary-action:hover {
    box-shadow: 0 6px 16px rgba(37, 99, 235, 0.4);
    filter: brightness(1.05);
}

/* Empty State for Checkouts */
.checkouts-empty {
    text-align: center;
    padding: var(--spacing-10);
    background: var(--color-surface);
    border-radius: var(--radius-xl);
    border: 1px solid rgba(148, 163, 184, 0.06);
}

.checkouts-empty-icon {
    width: 80px;
    height: 80px;
    margin: 0 auto var(--spacing-6);
    border-radius: 50%;
    background: linear-gradient(135deg, rgba(37, 99, 235, 0.28), rgba(14, 165, 233, 0.18));
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 2.5rem;
    color: var(--color-primary-light);
}

.checkouts-empty-title {
        font-size: 1.3rem;
    font-weight: 600;
    color: var(--color-text);
    margin-bottom: var(--spacing-2);
}

.checkouts-empty-description {
    color: var(--color-text-muted);
    margin-bottom: var(--spacing-6);
}

.checkout-help,
.integration-help {
    margin-top: var(--spacing-8);
}

/* =============================================
   CHECKOUT PAGE - Estilos Script.js Compatíveis
   ============================================= */

/* Container principal da lista de checkouts */
.checkouts-page-list {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-6);
}

/* Header da página de checkouts */
.checkouts-page-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    background: rgba(17, 24, 39, 0.5);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-xl);
    padding: var(--spacing-5) var(--spacing-6);
    flex-wrap: wrap;
    gap: var(--spacing-4);
}

.checkouts-page-header .header-info {
    flex: 1;
    min-width: 250px;
}

.checkouts-page-header .header-info h3 {
    font-size: 1.6rem;
    font-weight: 700;
    color: var(--color-text);
    margin-bottom: 4px;
}

.checkouts-page-header .header-info p {
    color: var(--color-text-muted);
    font-size: 1rem;
}

/* Botão criar checkout */
.btn-create-checkout {
    background: var(--gradient-primary);
    color: white;
    border: none;
    border-radius: var(--radius-pill);
    padding: 12px 20px;
    font-weight: 600;
    font-size: 0.95rem;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    cursor: pointer;
    box-shadow: 0 12px 30px rgba(37, 99, 235, 0.35);
    transition: all var(--transition);
}

.btn-create-checkout:hover {
    transform: translateY(-2px);
    box-shadow: 0 16px 40px rgba(37, 99, 235, 0.45);
    filter: brightness(1.05);
}

.btn-create-checkout i {
    font-size: 1rem;
}

/* Grid de checkouts (compatível com script.js) */
.checkouts-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(360px, 1fr));
    gap: var(--spacing-6);
    max-width: 100%;
    justify-content: start;
}

/* Limitar largura máxima dos cards individuais */
.checkouts-grid .checkout-page-card {
    max-width: 420px;
}

/* Card individual do checkout */
.checkout-page-card {
    /* 🎨 Variáveis de cor personalizadas por card */
    --accent: #7a5cff;
    --accent-2: #00d4ff;
    
    background: var(--color-surface);
    border: 1px solid rgba(148, 163, 184, 0.06);
    border-radius: var(--radius-xl);
    padding: var(--spacing-6);
    box-shadow: var(--shadow-low);
    transition: all var(--transition);
    position: relative;
    display: flex;
        flex-direction: column;
    gap: var(--spacing-4);
}

.checkout-page-card::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 3px;
    background: linear-gradient(90deg, var(--accent), var(--accent-2));
    opacity: 0;
    transition: opacity var(--transition);
    border-radius: var(--radius-xl) var(--radius-xl) 0 0;
}

.checkout-page-card:hover {
    transform: translateY(-4px);
    box-shadow: var(--shadow-xl);
    border-color: var(--accent);
}

.checkout-page-card:hover::before {
    opacity: 1;
}

/* Header do card de checkout */
.checkout-page-card .checkout-card-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: var(--spacing-2);
    position: relative;
    z-index: 100;
}

/* Status do checkout */
.checkout-status {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    color: var(--color-text);
    font-weight: 500;
        font-size: 0.9rem;
    }
    
.status-indicator {
    width: 10px;
    height: 10px;
    border-radius: 50%;
    background: var(--color-success);
    box-shadow: 0 0 0 6px rgba(34, 197, 94, 0.12);
}

.status-indicator.inactive {
    background: var(--color-text-muted);
    box-shadow: 0 0 0 6px rgba(148, 163, 184, 0.12);
}

/* Menu de 3 pontinhos */
.checkout-menu {
    position: relative;
    z-index: 200;
}

.menu-btn {
    width: 36px;
    height: 36px;
    display: grid;
    place-items: center;
    border-radius: var(--radius-md);
    border: 1px solid var(--color-border);
    background: rgba(17, 24, 39, 0.5);
    color: var(--color-text-muted);
    transition: all var(--transition);
    cursor: pointer;
    font-size: 1rem;
}

.menu-btn:hover {
    color: var(--color-text);
    border-color: rgba(56, 189, 248, 0.45);
    background: rgba(37, 99, 235, 0.18);
}

/* Dropdown menu (escondido por padrão) */
.dropdown-menu {
        display: none;
    position: absolute;
    top: 42px;
    right: 0;
    z-index: 9999;
    background: var(--color-surface-elevated);
    border: 1px solid rgba(148, 163, 184, 0.15);
    border-radius: 12px;
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.3);
    min-width: 200px;
    overflow: visible;
    animation: dropdownSlideIn 0.2s ease;
}

.dropdown-menu.active {
    display: block;
}

@keyframes dropdownSlideIn {
    from {
        opacity: 0;
        transform: translateY(-10px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* Items do dropdown */
.dropdown-menu-item {
    width: 100%;
    background: transparent;
    color: var(--color-text);
    text-align: left;
    border: none;
    padding: 12px 14px;
    display: flex;
    align-items: center;
    gap: 10px;
    cursor: pointer;
    transition: all var(--transition);
    font-size: 0.9rem;
    font-weight: 500;
}

.dropdown-menu-item:hover {
    background: rgba(37, 99, 235, 0.12);
}

.dropdown-menu-item i {
    width: 18px;
    text-align: center;
}

.dropdown-menu-item.danger {
    color: var(--color-danger);
}

.dropdown-menu-item.danger:hover {
    background: rgba(239, 68, 68, 0.12);
}

/* Badge de tipo do checkout */
.checkout-type-badge {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 6px 12px;
    border-radius: var(--radius-pill);
    font-size: 0.8rem;
    font-weight: 600;
    background: rgba(56, 189, 248, 0.15);
    border: 1px solid rgba(56, 189, 248, 0.3);
    color: var(--color-primary-light);
    width: fit-content;
}

.checkout-type-badge.type-custom {
    background: rgba(249, 115, 22, 0.15);
    border-color: rgba(249, 115, 22, 0.3);
    color: var(--color-alert);
}

.checkout-type-badge i {
    font-size: 0.85rem;
}

/* Badge do template laranjinha 🧡 */
.checkout-template-badge {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 6px 12px;
    border-radius: var(--radius-pill);
    font-size: 0.8rem;
    font-weight: 600;
    background: linear-gradient(135deg, #ff7a36 0%, #ffb072 100%) !important;
    color: white !important;
    width: fit-content;
    box-shadow: 0 4px 12px rgba(255, 122, 54, 0.3);
    animation: pulse-orange 2s ease-in-out infinite;
}

.checkout-template-badge i {
    font-size: 0.85rem;
}

@keyframes pulse-orange {
    0%, 100% {
        box-shadow: 0 4px 12px rgba(255, 122, 54, 0.3);
    }
    50% {
        box-shadow: 0 6px 16px rgba(255, 122, 54, 0.5);
    }
}

/* ============================================
   CARDS NORMAL (VALOR FIXO) E CUSTOM (LEAD)
   DESIGN PROFISSIONAL POR TIPO
   ============================================ */

/* 🔵 CARD NORMAL - VALOR FIXO (FUNDO AZUL VIBRANTE)
   Aplica em todos os cards que NÃO são laranjinha E não têm cor customizada */
.checkout-page-card.checkout-normal:not(.template-laranjinha):not(.checkout-has-custom-color) {
    /* Paleta azul "confiança" */
    --accent: #3b82f6;   /* azul principal */
    --accent-2: #0ea5e9; /* ciano */

    /* Fundo azul vibrante IGUAL ao laranjinha */
    background: 
        linear-gradient(135deg, rgba(59, 130, 246, 0.08) 0%, rgba(14, 165, 233, 0.12) 100%),
        radial-gradient(circle at 20% 50%, rgba(59, 130, 246, 0.15) 0%, transparent 50%),
        radial-gradient(circle at 80% 80%, rgba(14, 165, 233, 0.12) 0%, transparent 50%),
        var(--color-surface) !important;
    border: 2px solid #3b82f6 !important;
    box-shadow: 
        0 4px 12px rgba(59, 130, 246, 0.25),
        inset 0 0 60px rgba(59, 130, 246, 0.05),
        0 1px 3px rgba(0, 0, 0, 0.1) !important;
    position: relative;
}

/* Barra superior AZUL GROSSA */
.checkout-page-card.checkout-normal:not(.template-laranjinha):not(.checkout-has-custom-color)::before {
    opacity: 1 !important;
    background: linear-gradient(90deg, #3b82f6, #0ea5e9, #3b82f6) !important;
    height: 6px !important;
    box-shadow: 0 2px 8px rgba(59, 130, 246, 0.4);
}

/* Barra lateral AZUL GROSSA */
.checkout-page-card.checkout-normal:not(.template-laranjinha):not(.checkout-has-custom-color)::after {
    content: "";
    position: absolute;
    left: 0;
    top: 0;
    bottom: 0;
    width: 5px;
    background: linear-gradient(180deg, #3b82f6, #0ea5e9, #3b82f6);
    border-radius: var(--radius-xl) 0 0 var(--radius-xl);
    box-shadow: 2px 0 12px rgba(59, 130, 246, 0.5);
    z-index: 10;
}

/* Título e texto com tom azul */
.checkout-page-card.checkout-normal:not(.template-laranjinha) .checkout-card-content h4 {
    color: #3b82f6 !important;
    text-shadow: 0 0 20px rgba(59, 130, 246, 0.3);
}

.checkout-page-card.checkout-normal:not(.template-laranjinha) .checkout-price .price-value {
    color: #60a5fa !important;
    font-weight: 700;
}

/* Badge de tipo AZUL */
.checkout-page-card.checkout-normal:not(.template-laranjinha) .checkout-type-badge {
    background: rgba(59, 130, 246, 0.2) !important;
    border-color: rgba(59, 130, 246, 0.5) !important;
    color: #3b82f6 !important;
}

/* Status indicator em tom azul */
.checkout-page-card.checkout-normal:not(.template-laranjinha) .status-indicator.active {
    background: #3b82f6 !important;
    box-shadow: 0 0 0 6px rgba(59, 130, 246, 0.2) !important;
}

/* Botão PERSONALIZAR do card VALOR FIXO - Fundo vinho brilhante */
.checkout-page-card.checkout-normal:not(.template-laranjinha) .action-btn.primary {
    background: linear-gradient(135deg, #4a2030, #6a3550) !important;
    color: white !important;
    border: 1px solid rgba(220, 80, 120, 0.5) !important;
    box-shadow: 0 2px 8px rgba(220, 80, 120, 0.4) !important;
}

.checkout-page-card.checkout-normal:not(.template-laranjinha) .action-btn.primary:hover {
    background: linear-gradient(135deg, #6a3550, #8a4570) !important;
    border-color: rgba(240, 100, 140, 0.7) !important;
    box-shadow: 0 4px 16px rgba(220, 80, 120, 0.6) !important;
    transform: translateY(-2px);
}


/* 🔮 CARD CUSTOM - VALOR PERSONALIZÁVEL PELO LEAD (AZUL + ROXO VIBRANTE)
   Aplica em todos os cards custom que NÃO são laranjinha */
.checkout-page-card.checkout-custom:not(.template-laranjinha) {
    /* Paleta azul + roxo "criativo" */
    --accent: #6366f1;   /* indigo */
    --accent-2: #a855f7; /* roxo */

    /* Fundo azul+roxo vibrante IGUAL ao laranjinha */
    background: 
        linear-gradient(135deg, rgba(99, 102, 241, 0.08) 0%, rgba(168, 85, 247, 0.12) 100%),
        radial-gradient(circle at 20% 50%, rgba(99, 102, 241, 0.15) 0%, transparent 50%),
        radial-gradient(circle at 80% 80%, rgba(168, 85, 247, 0.12) 0%, transparent 50%),
        var(--color-surface) !important;
    border: 2px solid #6366f1 !important;
    box-shadow: 
        0 4px 12px rgba(99, 102, 241, 0.25),
        inset 0 0 60px rgba(139, 92, 246, 0.05),
        0 1px 3px rgba(0, 0, 0, 0.1) !important;
    position: relative;
}

/* Barra superior ROXO+AZUL GROSSA */
.checkout-page-card.checkout-custom:not(.template-laranjinha)::before {
    opacity: 1 !important;
    background: linear-gradient(90deg, #6366f1, #a855f7, #6366f1) !important;
    height: 6px !important;
    box-shadow: 0 2px 8px rgba(139, 92, 246, 0.4);
}

/* Barra lateral ROXO+AZUL GROSSA */
.checkout-page-card.checkout-custom:not(.template-laranjinha)::after {
    content: "";
    position: absolute;
    left: 0;
    top: 0;
    bottom: 0;
    width: 5px;
    background: linear-gradient(180deg, #6366f1, #a855f7, #6366f1);
    border-radius: var(--radius-xl) 0 0 var(--radius-xl);
    box-shadow: 2px 0 12px rgba(139, 92, 246, 0.5);
    z-index: 10;
}

/* Título e texto com tom roxo */
.checkout-page-card.checkout-custom:not(.template-laranjinha) .checkout-card-content h4 {
    color: #8b5cf6 !important;
    text-shadow: 0 0 20px rgba(139, 92, 246, 0.3);
}

.checkout-page-card.checkout-custom:not(.template-laranjinha) .checkout-price .price-value {
    color: #a78bfa !important;
    font-weight: 700;
}

/* Badge de tipo ROXO+AZUL */
.checkout-page-card.checkout-custom:not(.template-laranjinha) .checkout-type-badge {
    background: rgba(139, 92, 246, 0.2) !important;
    border-color: rgba(139, 92, 246, 0.5) !important;
    color: #a78bfa !important;
}

/* Status indicator em tom roxo */
.checkout-page-card.checkout-custom:not(.template-laranjinha) .status-indicator.active {
    background: #8b5cf6 !important;
    box-shadow: 0 0 0 6px rgba(139, 92, 246, 0.2) !important;
}

/* Hover AZUL para valor fixo */
.checkout-page-card.checkout-normal:not(.template-laranjinha):not(.checkout-has-custom-color):hover {
    border-color: #3b82f6 !important;
    background: 
        linear-gradient(135deg, rgba(59, 130, 246, 0.12) 0%, rgba(14, 165, 233, 0.16) 100%),
        radial-gradient(circle at 20% 50%, rgba(59, 130, 246, 0.2) 0%, transparent 50%),
        radial-gradient(circle at 80% 80%, rgba(14, 165, 233, 0.16) 0%, transparent 50%),
        var(--color-surface) !important;
    box-shadow: 
        0 6px 20px rgba(59, 130, 246, 0.4),
        inset 0 0 80px rgba(59, 130, 246, 0.08),
        0 4px 8px rgba(0, 0, 0, 0.15);
    transform: translateY(-4px) scale(1.01);
}

.checkout-page-card.checkout-normal:not(.template-laranjinha):hover::after {
    width: 8px;
    box-shadow: 3px 0 16px rgba(59, 130, 246, 0.7);
}

.checkout-page-card.checkout-normal:not(.template-laranjinha):hover::before {
    height: 8px !important;
}

/* ============================================
   🎨 CARDS COM COR CUSTOMIZADA (ETIQUETA)
   ============================================ */
/* Card normal com cor customizada - USA AS VARIÁVEIS --accent */
.checkout-page-card.checkout-has-custom-color {
    border: 2px solid var(--accent) !important;
    background: 
        linear-gradient(135deg, var(--accent-2, var(--accent)) 0%, rgba(0, 0, 0, 0.02) 100%),
        radial-gradient(circle at 20% 50%, var(--accent-2, var(--accent)) 0%, transparent 50%),
        radial-gradient(circle at 80% 80%, var(--accent-2, var(--accent)) 0%, transparent 50%),
        var(--color-surface) !important;
    box-shadow: 
        0 4px 12px rgba(0, 0, 0, 0.15),
        inset 0 0 60px rgba(255, 255, 255, 0.05),
        0 1px 3px rgba(0, 0, 0, 0.1) !important;
    position: relative;
}

/* Barra superior com cor customizada */
.checkout-page-card.checkout-has-custom-color::before {
    opacity: 1 !important;
    background: linear-gradient(90deg, var(--accent), var(--accent-2, var(--accent)), var(--accent)) !important;
    height: 6px !important;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.3);
}

/* Barra lateral com cor customizada */
.checkout-page-card.checkout-has-custom-color::after {
    content: "";
    position: absolute;
    left: 0;
    top: 0;
    bottom: 0;
    width: 6px;
    background: linear-gradient(180deg, var(--accent), var(--accent-2, var(--accent)), var(--accent)) !important;
    border-radius: 16px 0 0 16px;
    box-shadow: 3px 0 12px rgba(0, 0, 0, 0.3);
}

/* Título e texto com cor customizada */
.checkout-page-card.checkout-has-custom-color .checkout-card-content h4 {
    color: var(--accent) !important;
}

.checkout-page-card.checkout-has-custom-color .checkout-price .price-value {
    color: var(--accent-2, var(--accent)) !important;
}

/* Badge de tipo com cor customizada */
.checkout-page-card.checkout-has-custom-color .checkout-type-badge {
    background: rgba(0, 0, 0, 0.1) !important;
    color: var(--accent) !important;
    border-color: var(--accent) !important;
}

/* Status indicator com cor customizada */
.checkout-page-card.checkout-has-custom-color .status-indicator.active {
    background: var(--accent) !important;
}

.checkout-page-card.checkout-has-custom-color:hover {
    /* Mantém EXATAMENTE o mesmo background do estado normal */
    border-color: var(--accent) !important;
    box-shadow:
        0 6px 20px rgba(0, 0, 0, 0.22),
        0 4px 10px rgba(0, 0, 0, 0.18) !important;
    transform: translateY(-4px) scale(1.01) !important;
}

.checkout-page-card.checkout-has-custom-color:hover::after {
    width: 8px;
    box-shadow: 3px 0 16px rgba(0, 0, 0, 0.45);
}

.checkout-page-card.checkout-has-custom-color:hover::before {
    height: 8px !important;
}

/* Hover ROXO+AZUL para personalizável */
.checkout-page-card.checkout-custom:not(.template-laranjinha):not(.checkout-has-custom-color):hover {
    border-color: #8b5cf6 !important;
    background: 
        linear-gradient(135deg, rgba(99, 102, 241, 0.12) 0%, rgba(168, 85, 247, 0.16) 100%),
        radial-gradient(circle at 20% 50%, rgba(99, 102, 241, 0.2) 0%, transparent 50%),
        radial-gradient(circle at 80% 80%, rgba(168, 85, 247, 0.16) 0%, transparent 50%),
        var(--color-surface) !important;
    box-shadow: 
        0 6px 20px rgba(139, 92, 246, 0.4),
        inset 0 0 80px rgba(139, 92, 246, 0.08),
        0 4px 8px rgba(0, 0, 0, 0.15);
    transform: translateY(-4px) scale(1.01);
}

.checkout-page-card.checkout-custom:not(.template-laranjinha):hover::after {
    width: 8px;
    box-shadow: 3px 0 16px rgba(139, 92, 246, 0.7);
}

.checkout-page-card.checkout-custom:not(.template-laranjinha):hover::before {
    height: 8px !important;
}

/* Card com template laranjinha - DESIGN INTERNO LARANJA 🧡 */
.checkout-page-card.template-laranjinha {
    border: 2px solid #ff7a36 !important;
    /* Background laranja vibrante com padrão */
    background: 
        linear-gradient(135deg, rgba(255, 122, 54, 0.08) 0%, rgba(255, 176, 114, 0.12) 100%),
        radial-gradient(circle at 20% 50%, rgba(255, 122, 54, 0.15) 0%, transparent 50%),
        radial-gradient(circle at 80% 80%, rgba(255, 176, 114, 0.12) 0%, transparent 50%),
        var(--color-surface) !important;
    box-shadow: 
        0 4px 12px rgba(255, 122, 54, 0.25),
        inset 0 0 60px rgba(255, 122, 54, 0.05),
        0 1px 3px rgba(0, 0, 0, 0.1);
    position: relative;
}

/* Barra superior LARANJA GROSSA */
.checkout-page-card.template-laranjinha::before {
    opacity: 1 !important;
    background: linear-gradient(90deg, #ff7a36, #ffb072, #ff7a36) !important;
    height: 6px !important;
    box-shadow: 0 2px 8px rgba(255, 122, 54, 0.4);
}

/* Barra lateral LARANJA GROSSA */
.checkout-page-card.template-laranjinha::after {
    content: "";
    position: absolute;
    left: 0;
    top: 0;
    bottom: 0;
    width: 6px;
    background: linear-gradient(180deg, #ff7a36 0%, #ffb072 50%, #ff7a36 100%);
    border-radius: var(--radius-xl) 0 0 var(--radius-xl);
    box-shadow: 2px 0 12px rgba(255, 122, 54, 0.5);
    z-index: 10;
}

/* Título e texto com tom laranja */
.checkout-page-card.template-laranjinha .checkout-card-content h4 {
    color: #ff7a36 !important;
    text-shadow: 0 0 20px rgba(255, 122, 54, 0.3);
}

.checkout-page-card.template-laranjinha .checkout-price .price-value {
    color: #ff8c52 !important;
    font-weight: 700;
}

/* Status indicator laranja */
.checkout-page-card.template-laranjinha .status-indicator {
    background: #ff7a36 !important;
    box-shadow: 0 0 0 6px rgba(255, 122, 54, 0.2) !important;
}

/* Badges laranjas */
.checkout-page-card.template-laranjinha .checkout-type-badge {
    background: rgba(255, 122, 54, 0.2) !important;
    border-color: rgba(255, 122, 54, 0.5) !important;
    color: #ff7a36 !important;
}

.checkout-page-card.template-laranjinha:hover {
    border-color: #ff7a36 !important;
    background: 
        linear-gradient(135deg, rgba(255, 122, 54, 0.12) 0%, rgba(255, 176, 114, 0.16) 100%),
        radial-gradient(circle at 20% 50%, rgba(255, 122, 54, 0.2) 0%, transparent 50%),
        radial-gradient(circle at 80% 80%, rgba(255, 176, 114, 0.18) 0%, transparent 50%),
        var(--color-surface) !important;
    box-shadow: 
        0 8px 24px rgba(255, 122, 54, 0.4),
        inset 0 0 80px rgba(255, 122, 54, 0.08),
        0 4px 8px rgba(0, 0, 0, 0.15);
    transform: translateY(-4px) scale(1.01);
}

.checkout-page-card.template-laranjinha:hover::after {
    width: 8px;
    box-shadow: 3px 0 16px rgba(255, 122, 54, 0.7);
}

.checkout-page-card.template-laranjinha:hover::before {
    height: 8px !important;
}

/* Conteúdo do card */
.checkout-card-content {
    display: flex;
        flex-direction: column;
    gap: var(--spacing-3);
    position: relative;
    z-index: 1;
}

.checkout-card-content h4 {
    font-size: 1.2rem;
    font-weight: 700;
    color: var(--color-text);
    margin: 0;
}

/* Preço do checkout */
.checkout-price {
    margin: var(--spacing-2) 0;
}

.checkout-price .price-value {
    font-size: 1.6rem;
    font-weight: 800;
    color: var(--color-primary-light);
}

/* Estatísticas do checkout */
.checkout-stats {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: var(--spacing-3);
    padding: var(--spacing-4);
    background: rgba(17, 24, 39, 0.5);
    border-radius: var(--radius-lg);
    border: 1px solid rgba(148, 163, 184, 0.06);
    position: relative;
    z-index: 1;
}

.stat-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    gap: 4px;
}

.stat-label {
    font-size: 0.75rem;
    color: var(--color-text-muted);
    text-transform: uppercase;
    letter-spacing: 0.06em;
    font-weight: 500;
}

.stat-value {
    font-size: 1.1rem;
    font-weight: 700;
    color: var(--color-text);
}

/* Meta informações (data, link) */
.checkout-meta {
    display: flex;
    flex-direction: column;
    gap: 8px;
    color: var(--color-text-muted);
    font-size: 0.85rem;
}

.checkout-meta .meta-item {
    display: flex;
    align-items: center;
    gap: 8px;
    word-break: break-all;
}

.checkout-meta .meta-item i {
    color: var(--color-primary-light);
    flex-shrink: 0;
    width: 16px;
}

/* Ações do card (botões inferiores) - Global */
.checkout-card-actions {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    grid-auto-rows: minmax(60px, auto);
    gap: var(--spacing-2);
    margin-top: var(--spacing-2);
    width: 100%;
    align-items: stretch;
}

.checkout-card-actions .action-btn {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    white-space: normal;
    height: 100%;
    padding: 14px 16px;
    min-height: 58px;
}

.checkout-card-actions .action-btn.primary {
    padding: 18px 20px;
    min-height: 64px;
    border-radius: var(--radius-lg);
}

.checkout-video-fake-page .checkout-card-actions {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 0.75rem;
    margin-top: 1rem;
    width: 100%;
}

/* Cards na página de vídeo fake */
.checkout-video-fake-page .checkout-page-card {
    background: var(--pro-surface-1);
    border: 1px solid var(--pro-border-soft);
    border-radius: var(--radius-lg);
    padding: 1.5rem;
    transition: all 0.3s ease;
}

.checkout-video-fake-page .checkout-page-card:hover {
    transform: translateY(-2px);
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.12);
    border-color: var(--pro-border-muted);
}

.checkout-video-fake-page .checkout-card-header {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    margin-bottom: 1rem;
}

.checkout-video-fake-page .checkout-card-content h4 {
    color: var(--pro-text-primary);
    font-size: 1.125rem;
    font-weight: 600;
    margin: 0 0 0.75rem 0;
}

.checkout-video-fake-page .checkout-value {
    display: flex;
    align-items: baseline;
    gap: 0.5rem;
    color: var(--pro-text-secondary);
}

.checkout-video-fake-page .value-label {
    font-size: 0.875rem;
    color: var(--pro-text-muted);
}

.checkout-video-fake-page .value-amount {
    font-size: 1.25rem;
    font-weight: 700;
    color: #22c55e;
}

/* Status e badges */
.checkout-video-fake-page .checkout-status {
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.checkout-video-fake-page .status-indicator {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: #22c55e;
    box-shadow: 0 0 8px rgba(34, 197, 94, 0.5);
}

.checkout-video-fake-page .status-indicator.active {
    background: #22c55e;
    box-shadow: 0 0 8px rgba(34, 197, 94, 0.5);
}

.checkout-video-fake-page .badge {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    padding: 0.3rem 0.65rem;
    border-radius: 999px;
    font-size: 0.75rem;
    font-weight: 600;
    letter-spacing: 0.02em;
}

.checkout-video-fake-page .checkout-menu {
    position: relative;
    z-index: 100;
}

.checkout-video-fake-page .menu-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    background: var(--pro-surface-2);
    border: 1px solid var(--pro-border-soft);
    border-radius: var(--radius-md);
    color: var(--pro-text-muted);
    cursor: pointer;
    transition: all 0.2s ease;
}

.checkout-video-fake-page .menu-btn:hover {
    background: var(--pro-surface-3);
    color: var(--pro-text-primary);
}

.checkout-video-fake-page .dropdown-menu {
    display: none;
    position: absolute;
    top: 100%;
    right: 0;
    margin-top: 0.5rem;
    background: var(--pro-surface-1);
    border: 1px solid var(--pro-border-soft);
    border-radius: var(--radius-md);
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.3);
    min-width: 180px;
    z-index: 9999;
}

.checkout-video-fake-page .dropdown-menu.show {
    display: block;
}

.checkout-video-fake-page .dropdown-menu-item {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    width: 100%;
    padding: 0.75rem 1rem;
    background: transparent;
    border: none;
    color: var(--pro-text-primary);
    font-size: 0.875rem;
    cursor: pointer;
    transition: all 0.2s ease;
    text-align: left;
}

.checkout-video-fake-page .dropdown-menu-item:hover {
    background: var(--pro-surface-2);
}

.checkout-video-fake-page .dropdown-menu-item.danger {
    color: #ef4444;
}

.checkout-video-fake-page .dropdown-menu-item.danger:hover {
    background: rgba(239, 68, 68, 0.1);
}

/* Grid de checkouts de vídeo fake */
.checkout-video-fake-page .checkouts-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
    gap: 1.5rem;
    margin-top: 1.5rem;
}

/* Estado de "precisa configurar" nos cards de vídeo fake */
.checkout-video-fake-page .checkout-card-setup {
    display: grid;
    gap: 0.75rem;
    padding: 1rem;
    background: var(--pro-surface-2);
    border: 1px dashed var(--pro-border-soft);
    border-radius: var(--radius-md);
    margin-top: 1rem;
}

.checkout-video-fake-page .setup-warning {
    color: var(--pro-text-secondary);
    font-size: 0.9rem;
    line-height: 1.5;
    text-align: center;
}

.checkout-video-fake-page .setup-warning i {
    color: #60a5fa;
    margin-right: 0.5rem;
    font-size: 1rem;
}

.checkout-video-fake-page .btn-setup {
    background: linear-gradient(135deg, #be185d 0%, #9f1239 100%);
    color: #fff;
    border: 1px solid rgba(190,24,93,0.5);
    font-weight: 600;
    padding: 0.75rem 1.25rem;
}

.checkout-video-fake-page .btn-setup:hover {
    background: linear-gradient(135deg, #9f1239 0%, #881337 100%);
    border-color: rgba(190,24,93,0.8);
    box-shadow: 0 8px 20px rgba(190,24,93,0.4);
}

.checkout-video-fake-page .btn-setup i {
    opacity: 1;
}

@media (max-width: 768px) {
    .checkout-video-fake-page .checkouts-grid {
        grid-template-columns: 1fr;
    }
    
    .checkout-video-fake-page .checkout-card-actions {
        grid-template-columns: 1fr;
    }
}

/* ============================================
   MODAL DE CONFIGURAÇÃO DE VÍDEO FAKE
   ============================================ */

.modal-container--large {
    max-width: 700px;
    max-height: 90vh;
    overflow-y: auto;
}

.space-y-6 > * + * {
    margin-top: 1.5rem;
}

.space-y-4 > * + * {
    margin-top: 1rem;
}

.mt-4 {
    margin-top: 1rem;
}

.form-label-bold {
    display: block;
    font-size: 0.875rem;
    font-weight: 700;
    color: var(--pro-text-primary);
    margin-bottom: 0.5rem;
}

.form-input {
    width: 100%;
    padding: 0.75rem 1rem;
    border: 1px solid var(--pro-border-soft);
    background: var(--pro-surface-1);
    color: var(--pro-text-primary);
    border-radius: var(--radius-md);
    font-size: 0.9375rem;
    transition: all 0.2s ease;
}

.form-input:focus {
    outline: none;
    border-color: rgba(190, 24, 93, 0.5);
    box-shadow: 0 0 0 3px rgba(190, 24, 93, 0.1);
}

.form-input:disabled {
    opacity: 0.5;
    cursor: not-allowed;
}

.form-help {
    font-size: 0.8125rem;
    color: var(--pro-text-muted);
    margin-top: 0.5rem;
}

.text-xs {
    font-size: 0.75rem;
    color: var(--pro-text-muted);
}

/* Video Dropzone */
.video-dropzone {
    position: relative;
    border: 2px dashed var(--pro-border-muted);
    border-radius: var(--radius-lg);
    padding: 2rem;
    text-align: center;
    cursor: pointer;
    transition: all 0.3s ease;
    background: var(--pro-surface-1);
}

.video-dropzone:hover {
    border-color: rgba(190, 24, 93, 0.5);
    background: rgba(190, 24, 93, 0.03);
}

.video-dropzone-content {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.75rem;
}

.video-dropzone-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 60px;
    height: 60px;
    background: linear-gradient(135deg, rgba(190, 24, 93, 0.1), rgba(159, 18, 57, 0.1));
    border-radius: 50%;
    color: #be185d;
    font-size: 1.5rem;
}

.video-dropzone-title {
    font-weight: 600;
    color: var(--pro-text-primary);
    font-size: 1rem;
}

.video-dropzone-subtitle {
    font-size: 0.875rem;
    color: var(--pro-text-secondary);
    margin-top: 0.5rem;
}

.video-dropzone-info {
    padding-top: 0.5rem;
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
}

.video-preview {
    border: 1px solid var(--pro-border-soft);
    border-radius: var(--radius-lg);
    padding: 1rem;
    background: var(--pro-surface-1);
}

.video-preview video {
    width: 100%;
    max-height: 300px;
    border-radius: var(--radius-md);
    margin-bottom: 1rem;
    background: #000;
    object-fit: contain;
}

.btn-remove-video {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    width: 100%;
    padding: 0.625rem 1rem;
    background: rgba(239, 68, 68, 0.1);
    color: #ef4444;
    border: 1px solid rgba(239, 68, 68, 0.3);
    border-radius: var(--radius-md);
    font-weight: 600;
    cursor: pointer;
    transition: all 0.2s ease;
}

.btn-remove-video:hover {
    background: rgba(239, 68, 68, 0.2);
    border-color: rgba(239, 68, 68, 0.5);
}

/* Settings Card */
.settings-card {
    border: 1px solid var(--pro-border-soft);
    border-radius: var(--radius-lg);
    padding: 1.5rem;
    background: linear-gradient(to bottom right, rgba(190, 24, 93, 0.03), rgba(147, 51, 234, 0.03));
}

.settings-card-title {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    font-weight: 700;
    color: var(--pro-text-primary);
    font-size: 1rem;
    margin-bottom: 0.5rem;
}

.settings-card-title i {
    color: #be185d;
}

.settings-card-subtitle {
    font-size: 0.875rem;
    color: var(--pro-text-secondary);
    margin-bottom: 1.5rem;
}

/* Toggle Row */
.toggle-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 1rem;
    background: var(--pro-surface-1);
    border-radius: var(--radius-md);
    border: 1px solid var(--pro-border-soft);
}

.toggle-row--pink {
    border-color: rgba(190, 24, 93, 0.15);
}

.toggle-row--green {
    border-color: rgba(34, 197, 94, 0.15);
}

.toggle-row--simple {
    border: 1px solid var(--pro-border-soft);
}

.toggle-row-content {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    flex: 1;
}

.toggle-row-content > i {
    font-size: 1.25rem;
    flex-shrink: 0;
}

.toggle-row--pink .toggle-row-content > i {
    color: #be185d;
}

.toggle-row--green .toggle-row-content > i {
    color: #22c55e;
}

.toggle-row-title {
    font-weight: 600;
    color: var(--pro-text-primary);
    font-size: 0.9375rem;
}

.toggle-row-title-sm {
    font-size: 0.875rem;
    font-weight: 600;
    color: var(--pro-text-primary);
}

.toggle-row-subtitle {
    font-size: 0.75rem;
    color: var(--pro-text-muted);
    margin-top: 0.25rem;
}

/* Toggle Switch */
.toggle-switch {
    position: relative;
    display: inline-flex;
    width: 3rem;
    height: 1.75rem;
    cursor: pointer;
}

.toggle-switch--sm {
    width: 2.75rem;
    height: 1.5rem;
}

.toggle-switch input {
    opacity: 0;
    width: 0;
    height: 0;
}

.toggle-slider {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: var(--pro-border-muted);
    border-radius: 9999px;
    transition: all 0.3s ease;
}

.toggle-slider:before {
    content: '';
    position: absolute;
    height: 1.25rem;
    width: 1.25rem;
    left: 0.25rem;
    bottom: 0.25rem;
    background: white;
    border-radius: 50%;
    transition: all 0.3s ease;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
}

.toggle-switch--sm .toggle-slider:before {
    height: 1rem;
    width: 1rem;
    left: 0.25rem;
    bottom: 0.25rem;
}

.toggle-switch input:checked + .toggle-slider {
    background: linear-gradient(to right, #be185d, #9f1239);
}

.toggle-switch--pink input:checked + .toggle-slider {
    background: linear-gradient(to right, #be185d, #9333ea);
}

.toggle-switch--green input:checked + .toggle-slider {
    background: linear-gradient(to right, #22c55e, #10b981);
}

.toggle-switch input:checked + .toggle-slider:before {
    transform: translateX(1.25rem);
}

.toggle-switch--sm input:checked + .toggle-slider:before {
    transform: translateX(1.25rem);
}

.toggle-switch input:focus + .toggle-slider {
    box-shadow: 0 0 0 3px rgba(190, 24, 93, 0.2);
}

/* Info Boxes */
.info-box {
    padding: 0.75rem;
    border-radius: var(--radius-md);
    border: 1px solid;
    display: flex;
    align-items: start;
    gap: 0.5rem;
}

.info-box > i {
    flex-shrink: 0;
    font-size: 1.25rem;
    margin-top: 0.125rem;
}

.info-box--blue {
    background: linear-gradient(to right, rgba(59, 130, 246, 0.05), rgba(99, 102, 241, 0.05));
    border-color: rgba(59, 130, 246, 0.2);
}

.info-box--blue > i {
    color: #3b82f6;
}

.info-box--orange {
    background: linear-gradient(to right, rgba(249, 115, 22, 0.05), rgba(251, 146, 60, 0.05));
    border-color: rgba(249, 115, 22, 0.2);
}

.info-box--orange > i {
    color: #f97316;
}

.info-box--white {
    background: linear-gradient(to right, rgba(255, 255, 255, 0.03), rgba(248, 250, 252, 0.02));
    border-color: rgba(255, 255, 255, 0.1);
}

.info-box--white > i {
    color: #f8fafc;
}

.info-box-title {
    font-size: 0.875rem;
    font-weight: 600;
    margin-bottom: 0.5rem;
}

.info-box--blue .info-box-title {
    color: #1e40af;
}

.info-box--orange .info-box-title {
    color: #c2410c;
}

.info-box--white .info-box-title {
    color: #f8fafc;
}

.info-box-text {
    font-size: 0.75rem;
    line-height: 1.5;
    margin-bottom: 0.5rem;
}

.info-box--blue .info-box-text {
    color: #1e40af;
}

.info-box--orange .info-box-text {
    color: #c2410c;
}

.info-box--white .info-box-text {
    color: #e2e8f0;
}

.info-box-list {
    display: grid;
    gap: 0.5rem;
}

.info-box-item {
    display: flex;
    align-items: start;
    gap: 0.5rem;
}

.info-box-item span {
    flex-shrink: 0;
    font-size: 0.75rem;
}

.info-box-item p {
    font-size: 0.75rem;
    line-height: 1.4;
}

.info-box--blue .info-box-item p {
    color: #1e40af;
}

.info-box--white .info-box-item p {
    color: #e2e8f0;
}

.info-box-ul {
    list-style: none;
    padding: 0;
    margin: 0.5rem 0;
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
}

.info-box-ul li {
    display: flex;
    align-items: center;
    gap: 0.25rem;
    font-size: 0.75rem;
}

.info-box--orange .info-box-ul li {
    color: #c2410c;
}

.info-box-ul li span {
    color: inherit;
}

.info-box-footer {
    padding-top: 0.5rem;
    border-top: 1px solid;
    margin-top: 0.5rem;
}

.info-box--orange .info-box-footer {
    border-color: rgba(249, 115, 22, 0.2);
}

.info-box-footer-title {
    font-size: 0.75rem;
    font-weight: 600;
    margin-bottom: 0.25rem;
}

.info-box--orange .info-box-footer-title {
    color: #c2410c;
}

.info-box-footer-text {
    font-size: 0.75rem;
}

.info-box--orange .info-box-footer-text {
    color: #ea580c;
}

/* Redirect URL Group */
.redirect-url-group {
    padding: 1rem;
    background: rgba(34, 197, 94, 0.05);
    border-radius: var(--radius-md);
    border: 1px solid rgba(34, 197, 94, 0.2);
}

/* Auto Redirect Group */
.auto-redirect-group {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
}

/* Status Badge */
.status-badge {
    font-size: 0.75rem;
    font-weight: 600;
}

.status-badge--disabled {
    color: #ef4444;
}

.status-badge--enabled {
    color: #22c55e;
}

/* Button Variants */
.btn-secondary {
    padding: 0.75rem 1.25rem;
    border: 1px solid var(--pro-border-muted);
    background: var(--pro-surface-2);
    color: var(--pro-text-primary);
    border-radius: var(--radius-md);
    font-weight: 600;
    cursor: pointer;
    transition: all 0.2s ease;
}

.btn-secondary:hover {
    background: var(--pro-surface-3);
    border-color: var(--pro-border-soft);
}

.btn-primary--gradient {
    background: linear-gradient(to right, #be185d, #9333ea, #c026d3);
    border: none;
    box-shadow: 0 4px 12px rgba(190, 24, 93, 0.3);
}

.btn-primary--gradient:hover {
    background: linear-gradient(to right, #9f1239, #7e22ce, #a21caf);
    box-shadow: 0 8px 20px rgba(190, 24, 93, 0.4);
    transform: translateY(-1px);
}

.btn-primary--gradient:disabled {
    opacity: 0.5;
    cursor: not-allowed;
    transform: none;
}

/* ============================================
   CARDS DE VÍDEO FAKE - COR TEMÁTICA #f91392
   ============================================ */

.checkout-video-fake-page .checkout-page-card {
    --vf-accent: #f91392;
    border-color: rgba(249, 19, 146, 0.25);
}

.checkout-video-fake-page .checkout-page-card::after {
    background: conic-gradient(from var(--angle, 0deg),
        rgba(249, 19, 146, 0.8),
        rgba(249, 19, 146, 0.15) 35%,
        transparent 45% 100%);
}

.checkout-video-fake-page .badge {
    background: rgba(249, 19, 146, 0.20) !important;
    color: #f91392 !important;
}

/* ============================================
   ESTADO PAUSADO - CHECKOUTS
   ============================================ */

.checkout-page-card.is-paused {
    border-color: rgba(239, 68, 68, 0.45);
    background-image: linear-gradient(180deg, rgba(239, 68, 68, 0.06), transparent 45%);
    position: relative;
}

.checkout-page-card.is-paused::before {
    content: '';
    position: absolute;
    inset: 0;
    background: radial-gradient(circle at top right, rgba(239, 68, 68, 0.08), transparent 60%);
    pointer-events: none;
    border-radius: inherit;
    z-index: 0;
}

.checkout-page-card.is-paused .status-indicator {
    background: #ef4444;
    box-shadow: 0 0 10px rgba(239, 68, 68, 0.75), 0 0 20px rgba(239, 68, 68, 0.35);
}

.checkout-page-card.is-paused .status-indicator.paused {
    background: #ef4444;
    animation: pulse-paused 2s cubic-bezier(0.4, 0, 0.6, 1) infinite;
}

@keyframes pulse-paused {
    0%, 100% {
        opacity: 1;
        box-shadow: 0 0 10px rgba(239, 68, 68, 0.75);
    }
    50% {
        opacity: 0.6;
        box-shadow: 0 0 20px rgba(239, 68, 68, 0.95);
    }
}

.checkout-page-card .status-text {
    transition: color 0.3s ease;
}

.checkout-page-card.is-paused .status-text {
    color: #ef4444;
    font-weight: 600;
    text-shadow: 0 0 8px rgba(239, 68, 68, 0.3);
}

/* Botão Ligar (Despausar) */
.btn-turn-on {
    background: linear-gradient(135deg, #16a34a, #22c55e);
    border: 1px solid rgba(34, 197, 94, 0.45);
    color: #ffffff;
    font-weight: 600;
    padding: 0.75rem 1.5rem;
    border-radius: var(--radius-lg);
    cursor: pointer;
    transition: all 0.3s ease;
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    box-shadow: 0 4px 12px rgba(34, 197, 94, 0.25);
}

.btn-turn-on:hover {
    filter: brightness(1.15);
    box-shadow: 0 6px 16px rgba(34, 197, 94, 0.35);
    transform: translateY(-1px);
}

.btn-turn-on:active {
    transform: translateY(0);
    box-shadow: 0 2px 8px rgba(34, 197, 94, 0.3);
}

.btn-turn-on i {
    font-size: 1.1em;
}

/* Menu dropdown - ícones de pausar/ligar */
.dropdown-menu-item[data-action="pause"] i {
    color: #f59e0b;
}

.dropdown-menu-item[data-action="resume"] i {
    color: #22c55e;
}

/* ============================================
   DROPDOWN PORTAL - Solução Profissional
   ============================================ */

/* Visual base refinado */
.dropdown-menu {
    border-radius: 12px;
    padding: 6px;
    backdrop-filter: blur(6px);
    box-shadow: 0 12px 28px rgba(0, 0, 0, 0.22);
}

/* Portal: largura fixa e neutralizar right/bottom herdados */
.dropdown-menu.dropdown-portal {
    position: fixed !important;
    z-index: 99999 !important;
    width: 220px !important;
    min-width: 220px !important;
    max-width: 280px !important;
    max-height: calc(100vh - 24px);
    overflow-y: auto;
    right: auto !important;
    bottom: auto !important;
    left: 0;
    top: 0;
    white-space: normal;
    transform: none !important;
    opacity: 0;
    transition: opacity 0.15s ease, transform 0.15s ease;
}

/* Dropdown visível */
.dropdown-menu.dropdown-portal[style*="visibility: visible"] {
    opacity: 1;
}

/* Itens mais elegantes */
.dropdown-menu-item {
    padding: 10px 12px;
    border-radius: 8px;
}

.dropdown-menu-item:hover {
    background: rgba(148, 163, 184, 0.12);
}

.dropdown-menu-item i {
    opacity: 0.9;
    width: 18px;
}

/* Setinha (caret) para ficar premium */
.dropdown-menu.dropdown-portal::after {
    content: '';
    position: absolute;
    top: -6px;
    right: 12px;
    width: 10px;
    height: 10px;
    background: inherit;
    border-left: 1px solid rgba(148, 163, 184, 0.15);
    border-top: 1px solid rgba(148, 163, 184, 0.15);
    transform: rotate(45deg);
    border-radius: 2px;
}

/* Quando o menu abrir acima do botão, inverter a setinha */
.dropdown-menu.dropdown-portal[data-placement="top"]::after {
    top: auto;
    bottom: -6px;
    transform: rotate(225deg);
}

.action-btn {
    background: rgba(37, 99, 235, 0.08);
    border: 1px solid rgba(37, 99, 235, 0.2);
    color: var(--color-text);
    padding: 10px 12px;
    border-radius: var(--radius-md);
    cursor: pointer;
    transition: all var(--transition);
    font-weight: 600;
    font-size: 0.85rem;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
}

.action-btn:hover {
    background: rgba(37, 99, 235, 0.16);
    border-color: rgba(56, 189, 248, 0.4);
    transform: translateY(-1px);
}

.action-btn i {
    font-size: 0.9rem;
}

.action-btn.primary {
    background: linear-gradient(135deg, var(--accent) 0%, var(--accent-2) 100%);
    border: none;
    color: white;
    box-shadow: 0 6px 16px color-mix(in srgb, var(--accent), transparent 65%);
}

.action-btn.primary:hover {
    filter: brightness(1.1);
    box-shadow: 0 8px 20px color-mix(in srgb, var(--accent), transparent 55%);
}

/* Toolbar de seleção múltipla */
.selection-toolbar {
    display: none;
    align-items: center;
    justify-content: space-between;
    gap: var(--spacing-4);
    padding: var(--spacing-4) var(--spacing-5);
    border: 1px solid var(--color-border);
    background: rgba(37, 99, 235, 0.08);
    border-radius: var(--radius-lg);
}

.selection-toolbar[style*="display: flex"],
.selection-toolbar[style*="display:flex"] {
    display: flex !important;
}

.selection-info {
    color: var(--color-text);
    font-weight: 600;
}

.selection-actions {
    display: flex;
    gap: var(--spacing-2);
}

/* Botões secundários e de perigo */
.btn-secondary {
    background: rgba(255, 255, 255, 0.03);
    border: 1px solid rgba(148, 163, 184, 0.2);
    border-radius: var(--radius-pill);
    padding: 8px 14px;
    color: var(--color-text);
    cursor: pointer;
    transition: all var(--transition);
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-weight: 500;
    font-size: 0.9rem;
}

.btn-secondary:hover {
    border-color: rgba(56, 189, 248, 0.45);
    background: rgba(37, 99, 235, 0.08);
}

.btn-danger {
    background: rgba(239, 68, 68, 0.12);
    color: var(--color-danger);
    border: 1px solid rgba(239, 68, 68, 0.3);
    border-radius: var(--radius-pill);
    padding: 8px 14px;
    cursor: pointer;
    transition: all var(--transition);
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-weight: 500;
    font-size: 0.9rem;
}

.btn-danger:hover {
    background: rgba(239, 68, 68, 0.2);
    border-color: rgba(239, 68, 68, 0.5);
}

.btn-danger[disabled] {
    opacity: 0.5;
    pointer-events: none;
    cursor: not-allowed;
}

/* Checkbox de seleção */
/* =============================================
   CHECKBOX CUSTOMIZADO - MODO SELEÇÃO
   ============================================= */

.checkout-selection-checkbox {
    position: absolute;
    top: 12px;
    left: 12px;
    z-index: 10;
}

.checkout-selection-checkbox input[type="checkbox"] {
    /* Esconder checkbox padrão */
    appearance: none;
    -webkit-appearance: none;
    -moz-appearance: none;
    
    /* Tamanho aumentado */
    width: 28px;
    height: 28px;
    cursor: pointer;
    
    /* Visual padrão (não marcado) */
    background: rgba(15, 23, 42, 0.6);
    border: 2px solid rgba(148, 163, 184, 0.3);
    border-radius: 6px;
    
    /* Transições suaves */
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    
    /* Posicionamento do ícone */
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    
    /* Sombra sutil */
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
}

/* Hover - não marcado */
.checkout-selection-checkbox input[type="checkbox"]:hover {
    background: rgba(15, 23, 42, 0.8);
    border-color: rgba(99, 102, 241, 0.5);
    transform: scale(1.05);
    box-shadow: 0 4px 12px rgba(99, 102, 241, 0.2);
}

/* Estado marcado */
.checkout-selection-checkbox input[type="checkbox"]:checked {
    background: linear-gradient(135deg, #6366f1 0%, #8b5cf6 100%);
    border-color: #6366f1;
    box-shadow: 0 4px 16px rgba(99, 102, 241, 0.4);
}

/* Hover - marcado */
.checkout-selection-checkbox input[type="checkbox"]:checked:hover {
    background: linear-gradient(135deg, #4f46e5 0%, #7c3aed 100%);
    transform: scale(1.1);
    box-shadow: 0 6px 20px rgba(99, 102, 241, 0.5);
}

/* Ícone de check (usando ::after) - Ajustado para 28px */
.checkout-selection-checkbox input[type="checkbox"]::after {
    content: '';
    position: absolute;
    width: 12px;
    height: 7px;
    border-left: 2.5px solid white;
    border-bottom: 2.5px solid white;
    transform: rotate(-45deg) scale(0);
    opacity: 0;
    transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
    top: 7px;
    left: 6px;
}

/* Mostrar check quando marcado */
.checkout-selection-checkbox input[type="checkbox"]:checked::after {
    transform: rotate(-45deg) scale(1);
    opacity: 1;
}

/* Animação de pulse quando selecionado */
@keyframes checkboxPulse {
    0%, 100% {
        box-shadow: 0 4px 16px rgba(99, 102, 241, 0.4);
    }
    50% {
        box-shadow: 0 4px 20px rgba(99, 102, 241, 0.6);
    }
}

.checkout-selection-checkbox input[type="checkbox"]:checked {
    animation: checkboxPulse 2s ease-in-out infinite;
}

/* Estado focus (acessibilidade) */
.checkout-selection-checkbox input[type="checkbox"]:focus {
    outline: none;
    border-color: #6366f1;
    box-shadow: 0 0 0 3px rgba(99, 102, 241, 0.2);
}

.checkout-selection-checkbox label {
    display: none;
}

/* =============================================
   MODO SELEÇÃO - ESCONDER BOTÕES DE AÇÃO
   ============================================= */

/* Esconder botões de ação quando estiver no modo seleção */
.checkout-page-card.selection-mode-active .checkout-card-actions {
    display: none !important;
}

/* Esconder menu de 3 pontos quando estiver no modo seleção */
.checkout-page-card.selection-mode-active .checkout-menu {
    display: none !important;
}

/* Card clicável no modo seleção - cursor pointer */
.checkout-page-card.selection-mode-active {
    cursor: pointer !important;
    user-select: none; /* Evitar seleção de texto ao clicar rápido */
}

/* Hover sutil no card quando estiver no modo seleção */
.checkout-page-card.selection-mode-active:hover {
    background: rgba(99, 102, 241, 0.03);
    transform: translateY(-2px);
}

/* =============================================
   ANIMAÇÃO DE SHAKE QUANDO SELECIONADO
   ============================================= */

/* Animação sutil de shake */
@keyframes subtleShake {
    0%, 100% {
        transform: translateX(0) translateY(0);
    }
    10%, 30%, 50%, 70%, 90% {
        transform: translateX(-2px) translateY(-1px);
    }
    20%, 40%, 60%, 80% {
        transform: translateX(2px) translateY(1px);
    }
}

/* Aplicar shake quando checkbox for marcado */
.checkout-page-card.selected {
    animation: subtleShake 0.4s ease-in-out;
    border-color: rgba(99, 102, 241, 0.5) !important;
    box-shadow: 0 0 0 2px rgba(99, 102, 241, 0.2), 
                0 4px 12px rgba(99, 102, 241, 0.15) !important;
}

/* Borda persistente quando selecionado */
.checkout-page-card.selected {
    border: 2px solid rgba(99, 102, 241, 0.6) !important;
}

/* Empty state da lista de checkouts */
.empty-state-checkout {
    text-align: center;
    padding: var(--spacing-10);
    background: var(--color-surface);
    border-radius: var(--radius-xl);
    border: 1px solid rgba(148, 163, 184, 0.06);
}

.empty-state-icon {
    width: 80px;
    height: 80px;
    margin: 0 auto var(--spacing-6);
    border-radius: 50%;
    background: linear-gradient(135deg, rgba(37, 99, 235, 0.28), rgba(14, 165, 233, 0.18));
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 2.5rem;
    color: var(--color-primary-light);
}

/* Responsividade para checkouts */
@media (max-width: 960px) {
    .checkouts-grid {
        grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
    }
    
    .checkout-card-actions {
        grid-template-columns: 1fr;
    }
    
    .checkouts-page-header {
        flex-direction: column;
        align-items: stretch;
    }
    
    .btn-create-checkout {
        width: 100%;
        justify-content: center;
    }
    }
    
@media (max-width: 720px) {
    .checkouts-grid {
        grid-template-columns: 1fr;
    }
    
    .checkout-stats {
        grid-template-columns: 1fr;
    }
    
    .stat-item {
        flex-direction: row;
    justify-content: space-between;
        text-align: left;
    }
}

/* =============================================
   DASHBOARD KPI CARDS - Design Exemplo
   ============================================= */

.grid--kpi {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: var(--spacing-6);
    margin-bottom: var(--spacing-6);
}

.card--kpi {
    background: var(--color-surface);
    border: 1px solid rgba(148, 163, 184, 0.06);
    border-radius: var(--radius-xl);
    padding: var(--spacing-5);
    box-shadow: var(--shadow-low);
    transition: all var(--transition);
    position: relative;
    overflow: hidden;
}

.card--kpi.highlight {
    background: linear-gradient(135deg, 
        rgba(37, 99, 235, 0.35) 0%, 
        rgba(59, 130, 246, 0.25) 50%, 
        rgba(96, 165, 250, 0.15) 100%
    );
    border: 1px solid rgba(96, 165, 250, 0.25);
    box-shadow: 
        0 8px 32px rgba(37, 99, 235, 0.2),
        0 0 60px rgba(59, 130, 246, 0.12),
        inset 0 1px 0 rgba(255, 255, 255, 0.08);
}

.card--kpi.highlight::before {
    content: "";
    position: absolute;
    top: -50%;
    left: -50%;
    width: 200%;
    height: 200%;
    background: radial-gradient(
        circle at center,
        rgba(96, 165, 250, 0.15) 0%,
        rgba(59, 130, 246, 0.08) 25%,
        transparent 50%
    );
    animation: pulseGlow 4s ease-in-out infinite;
    pointer-events: none;
}

@keyframes pulseGlow {
    0%, 100% {
        opacity: 0.6;
        transform: scale(1);
    }
    50% {
        opacity: 1;
        transform: scale(1.05);
    }
}

.card--kpi:hover {
    transform: translateY(-2px);
    box-shadow: var(--shadow-xl);
}

.card--kpi.highlight:hover {
    box-shadow: 
        0 12px 40px rgba(37, 99, 235, 0.25),
        0 0 80px rgba(59, 130, 246, 0.15),
        inset 0 1px 0 rgba(255, 255, 255, 0.08);
}

.card-header-kpi {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: var(--spacing-4);
}

.card-label {
    font-size: 0.85rem;
    font-weight: 600;
    color: var(--color-text-muted);
    text-transform: uppercase;
    letter-spacing: 0.06em;
}

.badge {
    display: inline-flex;
    align-items: center;
    padding: 4px 10px;
    border-radius: var(--radius-pill);
    font-size: 0.75rem;
    font-weight: 600;
    line-height: 1;
}

.badge--success {
    background: rgba(34, 197, 94, 0.15);
    color: var(--color-success);
    border: 1px solid rgba(34, 197, 94, 0.3);
}

.badge--neutral {
    background: rgba(148, 163, 184, 0.15);
    color: var(--color-text);
    border: 1px solid rgba(148, 163, 184, 0.3);
}

.badge--alert {
    background: rgba(249, 115, 22, 0.15);
    color: var(--color-alert);
    border: 1px solid rgba(249, 115, 22, 0.3);
}

.card-body-kpi {
    display: flex;
        flex-direction: column;
    gap: var(--spacing-2);
}

.kpi-value {
    font-size: 2rem;
    font-weight: 800;
    color: var(--color-text);
    line-height: 1.2;
    margin: 0;
    transition: opacity 0.3s ease;
}

/* Efeito de pulsação para estado de carregamento */
.loading-placeholder {
    animation: pulse-loading 1.5s ease-in-out infinite;
    color: var(--color-text-muted) !important;
    font-size: 1.2rem !important;
    font-weight: 600 !important;
}

@keyframes pulse-loading {
    0%, 100% {
        opacity: 0.4;
    }
    50% {
        opacity: 0.8;
    }
}

/* ========================================
   🎯 MODAL DE SELEÇÃO DE TIPO DE CHECKOUT
   ======================================== */
.checkout-type-selection {
    padding: 1rem;
    display: grid;
    grid-template-columns: 1fr 1fr; /* ✅ Sempre lado a lado */
    gap: 1rem;
    max-width: 700px;
    margin-left: auto;
    margin-right: auto;
}

.checkout-type-grid {
    display: grid;
    grid-template-columns: 1fr 1fr; /* Sempre 2 colunas lado a lado */
    gap: 1rem;
    margin-top: 1rem;
    max-width: 700px; /* Limitar largura total */
    margin-left: auto;
    margin-right: auto;
}

.checkout-type-card {
    background: var(--color-card);
    border: 2px solid var(--color-border);
    border-radius: var(--radius-lg);
    padding: 1.25rem; /* Reduzido de 2rem para 1.25rem */
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.75rem; /* Reduzido de 1rem para 0.75rem */
    transition: all 0.3s ease;
    cursor: pointer;
    position: relative;
    overflow: hidden;
}

.checkout-type-card::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 4px;
    background: linear-gradient(90deg, #3b82f6, #06b6d4);
    opacity: 0;
    transition: opacity 0.3s ease;
}

.checkout-type-card:hover {
    border-color: #3b82f6;
    transform: translateY(-4px);
    box-shadow: 0 12px 24px rgba(59, 130, 246, 0.15);
}

.checkout-type-card:hover::before {
    opacity: 1;
}

.checkout-type-card.professional-card {
    background: linear-gradient(135deg, var(--color-card) 0%, rgba(59, 130, 246, 0.05) 100%);
}

.card-icon {
    width: 48px; /* Reduzido de 64px */
    height: 48px; /* Reduzido de 64px */
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.25rem; /* Reduzido de 1.75rem */
    margin-bottom: 0.25rem; /* Reduzido de 0.5rem */
}

.card-icon.normal-icon {
    background: linear-gradient(135deg, #3b82f6 0%, #2563eb 100%);
    color: white;
    box-shadow: 0 8px 16px rgba(59, 130, 246, 0.3);
}

.card-icon.customizable-icon {
    background: linear-gradient(135deg, #8b5cf6 0%, #7c3aed 100%);
    color: white;
    box-shadow: 0 8px 16px rgba(139, 92, 246, 0.3);
}

.type-icon {
    width: 48px; /* Reduzido de 64px */
    height: 48px; /* Reduzido de 64px */
    border-radius: 50%;
    background: linear-gradient(135deg, #3b82f6 0%, #06b6d4 100%);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.25rem; /* Reduzido de 1.75rem */
    color: white;
    margin-bottom: 0.5rem; /* Reduzido de 1rem */
    box-shadow: 0 8px 16px rgba(59, 130, 246, 0.3);
}

.card-content {
    text-align: center;
    flex: 1;
}

.card-content h4,
.checkout-type-card h4 {
    font-size: 1.05rem; /* Reduzido de 1.25rem */
    font-weight: 700;
    color: var(--color-text);
    margin: 0 0 0.25rem 0; /* Reduzido margem */
}

.card-subtitle,
.checkout-type-card > p {
    font-size: 0.85rem; /* Reduzido de 0.95rem */
    color: var(--color-text-muted);
    margin: 0 0 0.5rem 0; /* Reduzido de 1rem */
}

.type-features {
    display: flex;
    flex-direction: column;
    gap: 0.35rem; /* Reduzido de 0.5rem */
    width: 100%;
    margin: 0.5rem 0; /* Reduzido de 1rem */
}

.type-features span {
    display: flex;
    align-items: center;
    gap: 0.35rem; /* Reduzido de 0.5rem */
    font-size: 0.8rem; /* Reduzido de 0.9rem */
    color: var(--color-text-muted);
}

.type-features i {
    color: #22c55e;
    font-size: 0.75rem; /* Reduzido de 0.875rem */
}

.select-type-btn,
.btn-select-type {
    width: 100%;
    padding: 0.65rem 1rem; /* Reduzido de 0.875rem 1.5rem */
    border: none;
    border-radius: var(--radius-md);
    font-weight: 600;
    font-size: 0.875rem; /* Reduzido de 0.95rem */
    cursor: pointer;
    transition: all 0.3s ease;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.4rem; /* Reduzido de 0.5rem */
}

.select-type-btn.modern-btn,
.btn-select-type {
    background: linear-gradient(135deg, #3b82f6 0%, #2563eb 100%);
    color: white;
    box-shadow: 0 4px 12px rgba(59, 130, 246, 0.3);
}

.select-type-btn.modern-btn:hover,
.btn-select-type:hover {
    background: linear-gradient(135deg, #2563eb 0%, #1d4ed8 100%);
    box-shadow: 0 6px 16px rgba(59, 130, 246, 0.4);
    transform: translateY(-2px);
}

.checkout-type-card[data-type="customizable"] .select-type-btn.modern-btn {
    background: linear-gradient(135deg, #8b5cf6 0%, #7c3aed 100%);
    box-shadow: 0 4px 12px rgba(139, 92, 246, 0.3);
}

.checkout-type-card[data-type="customizable"] .select-type-btn.modern-btn:hover {
    background: linear-gradient(135deg, #7c3aed 0%, #6d28d9 100%);
    box-shadow: 0 6px 16px rgba(139, 92, 246, 0.4);
}

/* Responsivo */
@media (max-width: 768px) {
    .checkout-type-selection,
    .checkout-type-grid {
        grid-template-columns: 1fr 1fr; /* Manter lado a lado no mobile */
        gap: 0.75rem;
    }
    
    .checkout-type-card {
        padding: 1rem;
    }
    
    .card-icon,
    .type-icon {
        width: 40px;
        height: 40px;
        font-size: 1.1rem;
    }
    
    .card-content h4,
    .checkout-type-card h4 {
        font-size: 0.95rem;
    }
    
    .type-features span {
        font-size: 0.75rem;
    }
}

@media (max-width: 480px) {
    .checkout-type-selection,
    .checkout-type-grid {
        grid-template-columns: 1fr; /* Apenas no mobile muito pequeno fica um embaixo do outro */
    }
}

/* ========================================
   🎨 CHECKOUT TYPE CARDS - ULTRA PREMIUM
   ======================================== */

/* Cores de acento por card */
#normalCheckoutCard { --acc: #3b82f6; }
#customCheckoutCard { --acc: #8b5cf6; }

/* Base glass morphism + sombras em camadas */
.checkout-type-card {
    position: relative;
    background: linear-gradient(180deg, rgba(17,24,39,.85), rgba(17,24,39,.65));
    border: 1px solid rgba(148,163,184,.15);
    border-radius: 16px;
    backdrop-filter: blur(8px);
    box-shadow:
        0 10px 20px rgba(0,0,0,.25),
        inset 0 1px 0 rgba(255,255,255,.04);
    transition: transform .25s ease, box-shadow .25s ease, border-color .25s ease;
    isolation: isolate;
}

/* Borda animada com conic-gradient (efeito premium) */
.checkout-type-card::before {
    content: '';
    position: absolute;
    inset: 0;
    padding: 1px;
    border-radius: inherit;
    background: conic-gradient(
        from var(--_angle, 0deg),
        color-mix(in oklab, var(--acc) 80%, white 8%),
        transparent 20% 60%,
        color-mix(in oklab, var(--acc) 80%, black 12%)
    );
    -webkit-mask: 
        linear-gradient(#000 0 0) content-box, 
        linear-gradient(#000 0 0);
    -webkit-mask-composite: xor;
    mask-composite: exclude;
    opacity: .55;
    transition: opacity .25s ease;
    z-index: -1;
    animation: rotateBorder 8s linear infinite;
}

@keyframes rotateBorder {
    to { --_angle: 360deg; }
}

/* Aurora suave atrás do ícone */
.checkout-type-card::after {
    content: '';
    position: absolute;
    inset: -20% -10% 55% -10%;
    background: radial-gradient(
        120% 80% at 50% 100%,
        color-mix(in oklab, var(--acc) 80%, transparent 85%) 0%,
        transparent 65%
    );
    filter: blur(14px);
    opacity: .35;
    pointer-events: none;
    z-index: -1;
}

/* Estados: hover, focus, selected */
.checkout-type-card:hover,
.checkout-type-card:focus-within {
    transform: translateY(-4px);
    box-shadow:
        0 16px 32px rgba(0,0,0,.35),
        inset 0 1px 0 rgba(255,255,255,.06);
    border-color: color-mix(in oklab, var(--acc) 30%, #94a3b8 70%);
}

.checkout-type-card.is-selected {
    outline: 2px solid color-mix(in oklab, var(--acc) 60%, #ffffff 10%);
    outline-offset: 0;
    box-shadow:
        0 18px 36px rgba(0,0,0,.4),
        0 0 0 6px color-mix(in oklab, var(--acc) 20%, transparent),
        inset 0 1px 0 rgba(255,255,255,.07);
}

/* Chip "Selecionado" (aparece quando card é selecionado) */
.checkout-type-card .type-selected-chip {
    display: none;
    position: absolute;
    top: 10px;
    right: 10px;
    align-items: center;
    gap: .4rem;
    padding: .28rem .55rem;
    border-radius: 999px;
    background: color-mix(in oklab, var(--acc) 20%, #0b1220 80%);
    border: 1px solid color-mix(in oklab, var(--acc) 40%, transparent);
    color: #e5f0ff;
    font-size: .72rem;
    font-weight: 700;
    box-shadow: 0 4px 10px rgba(0,0,0,.25);
}

.checkout-type-card.is-selected .type-selected-chip {
    display: inline-flex;
}

/* Ícone compacto premium com gradiente */
.type-icon {
    width: 44px;
    height: 44px;
    font-size: 1.1rem;
    background: linear-gradient(
        145deg,
        color-mix(in oklab, var(--acc) 85%, #111827 15%),
        var(--acc)
    );
    box-shadow:
        0 8px 18px color-mix(in oklab, var(--acc) 30%, transparent),
        inset 0 1px 0 rgba(255,255,255,.08);
}

/* Tipografia refinada */
.checkout-type-card h4 {
    font-size: 1rem;
    letter-spacing: .2px;
}

.checkout-type-card > p {
    font-size: .85rem;
    margin-bottom: .4rem;
    color: var(--color-text-muted);
}

.type-features span {
    font-size: .78rem;
    opacity: .9;
}

/* Botão com borda gradiente animada */
.btn-select-type,
.select-type-btn {
    border: 0;
    border-radius: 12px;
    padding: .6rem 1rem;
    font-weight: 700;
    font-size: .9rem;
    background:
        linear-gradient(#0b1220, #0b1220) padding-box,
        conic-gradient(
            from var(--_angleBtn, 0deg),
            var(--acc),
            color-mix(in oklab, var(--acc) 50%, #22c55e 20%),
            var(--acc)
        ) border-box;
    border: 1.5px solid transparent;
    color: #e8f1ff;
    transition: transform .2s ease, box-shadow .2s ease, filter .2s ease;
    box-shadow: 0 8px 18px rgba(0,0,0,.25);
}

.btn-select-type:hover,
.select-type-btn:hover {
    transform: translateY(-1px);
    filter: brightness(1.04);
    animation: rotateBtn 6s linear infinite;
}

@keyframes rotateBtn {
    to { --_angleBtn: 360deg; }
}

/* Acessibilidade: respeitar preferências de movimento */
@media (prefers-reduced-motion: reduce) {
    .checkout-type-card,
    .btn-select-type,
    .select-type-btn {
        transition: none;
        animation: none;
    }
}

/* Responsivo fino */
@media (max-width: 768px) {
    .checkout-type-selection {
        max-width: 620px;
    }
}

@media (max-width: 480px) {
    .checkout-type-selection {
        grid-template-columns: 1fr;
    }
}

/* ========================================
   📱 PREVIEW DO CHECKOUT - DESIGN PREMIUM
   ======================================== */

.form-preview {
    margin-top: 2rem;
    padding: 1.5rem;
    background: linear-gradient(135deg, rgba(17,24,39,0.6), rgba(30,41,59,0.4));
    border: 1px solid rgba(148,163,184,0.2);
    border-radius: 16px;
    backdrop-filter: blur(8px);
}

.form-preview h4 {
    font-size: 1rem;
    font-weight: 700;
    color: var(--color-text);
    margin: 0 0 1rem 0;
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.form-preview h4 i {
    color: #3b82f6;
    font-size: 0.95rem;
}

.checkout-preview {
    background: linear-gradient(180deg, #0f172a 0%, #1e293b 100%);
    border: 2px solid rgba(59,130,246,0.3);
    border-radius: 12px;
    padding: 1.5rem;
    box-shadow: 
        0 10px 25px rgba(0,0,0,0.3),
        inset 0 1px 0 rgba(255,255,255,0.05);
    position: relative;
    overflow: hidden;
}

/* Glow sutil no preview */
.checkout-preview::before {
    content: '';
    position: absolute;
    top: -50%;
    left: -50%;
    width: 200%;
    height: 200%;
    background: radial-gradient(circle at center, rgba(59,130,246,0.15) 0%, transparent 60%);
    pointer-events: none;
    opacity: 0.6;
}

.preview-header {
    position: relative;
    text-align: center;
    padding-bottom: 1rem;
    border-bottom: 1px solid rgba(148,163,184,0.15);
    margin-bottom: 1.5rem;
}

.preview-name {
    font-size: 1.15rem;
    font-weight: 700;
    color: var(--color-text);
    display: block;
    letter-spacing: 0.3px;
}

.preview-qr {
    text-align: center;
    padding: 2rem 1rem;
    background: linear-gradient(135deg, rgba(59,130,246,0.1), rgba(6,182,212,0.05));
    border: 2px dashed rgba(59,130,246,0.3);
    border-radius: 12px;
    margin-bottom: 1.5rem;
    position: relative;
}

.preview-qr i {
    font-size: 3rem;
    color: rgba(59,130,246,0.5);
    display: block;
    margin-bottom: 0.75rem;
    animation: pulse-qr 2s ease-in-out infinite;
}

@keyframes pulse-qr {
    0%, 100% { opacity: 0.5; transform: scale(1); }
    50% { opacity: 0.8; transform: scale(1.05); }
}

.preview-qr p {
    color: var(--color-text-muted);
    font-size: 0.9rem;
    margin: 0;
    font-style: italic;
}

.preview-value {
    text-align: center;
    padding: 1rem;
    background: linear-gradient(135deg, rgba(34,197,94,0.15), rgba(16,185,129,0.1));
    border-radius: 10px;
    border: 1px solid rgba(34,197,94,0.3);
}

.preview-price {
    font-size: 2rem;
    font-weight: 800;
    color: #22c55e;
    display: block;
    text-shadow: 0 2px 8px rgba(34,197,94,0.3);
    font-family: 'Inter', -apple-system, sans-serif;
}

/* Preview Customizável */
.checkout-preview.custom-preview {
    border-color: rgba(139,92,246,0.3);
}

.preview-custom-input {
    padding: 1.5rem;
    background: linear-gradient(135deg, rgba(139,92,246,0.1), rgba(124,58,237,0.05));
    border: 2px dashed rgba(139,92,246,0.3);
    border-radius: 12px;
    text-align: center;
}

.preview-custom-input label {
    display: block;
    color: var(--color-text);
    font-size: 0.95rem;
    font-weight: 600;
    margin-bottom: 1rem;
}

.preview-custom-input input {
    width: 100%;
    max-width: 280px;
    padding: 0.875rem 1rem;
    background: rgba(15,23,42,0.6);
    border: 1px solid rgba(139,92,246,0.4);
    border-radius: 8px;
    color: var(--color-text);
    font-size: 1.25rem;
    font-weight: 700;
    text-align: center;
    margin-bottom: 1rem;
    transition: all 0.3s ease;
}

.preview-custom-input input:focus {
    outline: none;
    border-color: #8b5cf6;
    box-shadow: 0 0 0 3px rgba(139,92,246,0.2);
}

.preview-custom-input button {
    width: 100%;
    max-width: 280px;
    padding: 0.875rem 1.5rem;
    background: linear-gradient(135deg, #8b5cf6 0%, #7c3aed 100%);
    border: none;
    border-radius: 8px;
    color: white;
    font-size: 1rem;
    font-weight: 700;
    cursor: not-allowed;
    opacity: 0.6;
    box-shadow: 0 4px 12px rgba(139,92,246,0.3);
}

/* Responsivo */
@media (max-width: 768px) {
    .form-preview {
        padding: 1rem;
    }
    
    .checkout-preview {
        padding: 1rem;
    }
    
    .preview-price {
        font-size: 1.75rem;
    }
    
    .preview-qr i {
        font-size: 2.5rem;
    }
}

/* ========================================
   🌀 TELA DE CARREGAMENTO
   ======================================== */
.loading-screen {
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    background: linear-gradient(135deg, #0f172a 0%, #1e293b 100%);
    display: flex;
    align-items: center;
        justify-content: center;
    z-index: 99999;
    opacity: 1;
    transition: opacity 0.5s ease, visibility 0.5s ease;
}

.loading-screen.fade-out {
    opacity: 0;
    visibility: hidden;
}

.loading-content {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 2rem;
    animation: fadeInUp 0.6s ease-out;
}

.loading-logo {
    width: 200px;
    opacity: 0.95;
    animation: pulse-logo 2s ease-in-out infinite;
}

.loading-logo img {
    width: 100%;
    height: auto;
    filter: drop-shadow(0 8px 24px rgba(59, 130, 246, 0.3));
}

.loading-spinner {
    position: relative;
    width: 80px;
    height: 80px;
}

.spinner-ring {
    position: absolute;
    width: 100%;
    height: 100%;
    border: 3px solid transparent;
    border-top-color: #3b82f6;
    border-radius: 50%;
    animation: spin 1.5s cubic-bezier(0.68, -0.55, 0.265, 1.55) infinite;
}

.spinner-ring:nth-child(2) {
    width: 70%;
    height: 70%;
    top: 15%;
    left: 15%;
    border-top-color: #06b6d4;
    animation-delay: -0.5s;
}

.spinner-ring:nth-child(3) {
    width: 40%;
    height: 40%;
    top: 30%;
    left: 30%;
    border-top-color: #8b5cf6;
    animation-delay: -1s;
}

@keyframes spin {
    0% {
        transform: rotate(0deg);
    }
    100% {
        transform: rotate(360deg);
    }
}

@keyframes pulse-logo {
    0%, 100% {
        transform: scale(1);
        opacity: 0.95;
    }
    50% {
    transform: scale(1.05);
        opacity: 1;
    }
}

@keyframes fadeInUp {
    from {
        opacity: 0;
        transform: translateY(30px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.loading-text {
    color: var(--color-text-muted);
    font-size: 0.95rem;
    font-weight: 500;
    letter-spacing: 0.05em;
    animation: pulse-text 1.5s ease-in-out infinite;
}

@keyframes pulse-text {
    0%, 100% {
        opacity: 0.5;
    }
    50% {
        opacity: 1;
    }
}

.kpi-subtext {
    font-size: 0.85rem;
    color: var(--color-text-muted);
    transition: opacity 0.3s ease;
    margin: 0;
}

.trend {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    margin-top: var(--spacing-2);
}

.trend--up {
    color: var(--color-success);
}

.trend svg {
    width: 18px;
    height: 18px;
}

.trend span {
    font-weight: 600;
    font-size: 0.9rem;
}

/* Gauge (medidor circular) */
.gauge {
    position: relative;
    width: 120px;
    height: 120px;
    border-radius: 50%;
    background: conic-gradient(
        var(--color-primary-light) calc(var(--fill) * 1%),
        rgba(148, 163, 184, 0.15) 0
    );
    display: flex;
    align-items: center;
    justify-content: center;
    margin: var(--spacing-3) 0;
}

.gauge__fill {
    width: 100%;
    height: 100%;
    border-radius: 50%;
}

.gauge__cover {
    position: absolute;
    width: 90px;
    height: 90px;
    border-radius: 50%;
    background: var(--color-surface);
    display: flex;
    align-items: center;
        justify-content: center;
    font-size: 1.5rem;
    font-weight: 700;
    color: var(--color-text);
}

/* Grid Principal */
.grid--main {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    gap: var(--spacing-6);
    margin-bottom: var(--spacing-6);
}

/* Primeiro gráfico (Receita vs conversão) ocupa toda a largura no topo */
.grid--main .card--chart:first-child {
    grid-column: span 3;
}

/* Segundo gráfico (Receita 7 dias) ocupa toda a largura embaixo */
.grid--main .card--chart:nth-child(2) {
    grid-column: span 3;
}

/* Listas ficam na primeira coluna, colunas 2 e 3 */
.grid--main .card--list,
.grid--main .card--stack {
    /* Mantém posição natural no grid */
}

@media (max-width: 1200px) {
    .grid--main {
        grid-template-columns: 1fr;
    }
    
    .grid--main .card--chart:first-child,
    .grid--main .card--chart:nth-child(2) {
        grid-column: span 1;
    }
}

@media (max-width: 1000px) {
    .grid--main {
        grid-template-columns: 1fr;
    }
}

/* Cards de Lista */
.card--list,
.card--stack,
.card--chart {
    background: var(--color-surface);
    border: 1px solid rgba(148, 163, 184, 0.06);
    border-radius: var(--radius-xl);
    padding: var(--spacing-5);
    box-shadow: var(--shadow-low);
}

.card-header-list,
.card-header-chart {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    margin-bottom: var(--spacing-5);
    gap: var(--spacing-4);
    flex-wrap: wrap;
}

.card-title-list,
.card-title-chart {
    font-size: 1.2rem;
    font-weight: 700;
    color: var(--color-text);
    margin: 4px 0 0 0;
}

.card-description {
    font-size: 0.85rem;
    color: var(--color-text-muted);
    margin: 4px 0 0 0;
    font-weight: 400;
}

/* Card Footer (para gráficos) */
.card-footer-chart {
    padding: var(--spacing-4) 0 0 0;
    border-top: 1px solid rgba(148, 163, 184, 0.06);
    margin-top: var(--spacing-4);
}

.chart-trend {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 8px;
}

.trend-icon {
    width: 16px;
    height: 16px;
    color: var(--color-success);
    flex-shrink: 0;
}

.trend-text {
        font-size: 0.9rem;
    font-weight: 600;
    color: var(--color-text);
}

.chart-period {
    font-size: 0.85rem;
    color: var(--color-text-muted);
    margin: 0;
}

.button--ghost,
.button--ghost-sm {
    background: transparent;
    border: 1px solid rgba(148, 163, 184, 0.2);
    color: var(--color-text);
    padding: 8px 14px;
    border-radius: var(--radius-md);
    font-size: 0.85rem;
    font-weight: 600;
    cursor: pointer;
    transition: all var(--transition);
}

.button--ghost-sm {
    padding: 6px 12px;
    font-size: 0.8rem;
}

.button--ghost:hover,
.button--ghost-sm:hover {
    background: rgba(37, 99, 235, 0.08);
    border-color: rgba(56, 189, 248, 0.45);
}

/* Listas */
.list--campaigns,
.list--alerts {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-direction: column;
    gap: var(--spacing-4);
}

.list--campaigns li,
.list--alerts li {
    display: flex;
    align-items: center;
    gap: var(--spacing-4);
    padding: var(--spacing-4);
    background: rgba(17, 24, 39, 0.3);
    border-radius: var(--radius-lg);
    border: 1px solid rgba(148, 163, 184, 0.06);
    transition: all var(--transition);
}

.list--campaigns li:hover,
.list--alerts li:hover {
    background: rgba(37, 99, 235, 0.05);
    border-color: rgba(56, 189, 248, 0.2);
}

.list__meta {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 4px;
    min-width: 0;
}

.list__title {
    font-weight: 600;
    color: var(--color-text);
    font-size: 0.95rem;
    margin: 0;
}

.list__subtitle {
    font-size: 0.8rem;
    color: var(--color-text-muted);
    margin: 0;
}

.list__status {
    display: flex;
        flex-direction: column;
    align-items: flex-end;
    gap: 8px;
    flex-shrink: 0;
}

/* Status Dots */
.status-dot {
    width: 12px;
    height: 12px;
    border-radius: 50%;
    flex-shrink: 0;
}

.status-dot.is-online {
    background: var(--color-success);
    box-shadow: 0 0 0 4px rgba(34, 197, 94, 0.2);
}

.status-dot.is-warning {
    background: var(--color-alert);
    box-shadow: 0 0 0 4px rgba(249, 115, 22, 0.2);
}

.status-dot.is-offline {
    background: var(--color-danger);
    box-shadow: 0 0 0 4px rgba(239, 68, 68, 0.2);
}

/* Progress Bar */
.progress {
    width: 100px;
    height: 6px;
    background: rgba(148, 163, 184, 0.15);
    border-radius: 999px;
    overflow: hidden;
}

.progress__bar {
    height: 100%;
    background: var(--gradient-primary);
    width: calc(var(--value) * 1%);
    border-radius: 999px;
    transition: width 0.5s ease;
}

/* Loading Item */
.loading-item {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: var(--spacing-6);
    color: var(--color-text-muted);
    font-style: italic;
}

/* Chart Container */
.chart-container {
    min-height: 320px;
    position: relative;
}

/* Overlay "sem dados" para gráficos */
.chart-empty-overlay {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: inherit;
    background: linear-gradient(135deg,
        rgba(37, 99, 235, 0.22) 0%,
        rgba(59, 130, 246, 0.16) 50%,
        rgba(96, 165, 250, 0.10) 100%
    ); /* vidro similar ao card "Vendas hoje" */
    border: 1px solid rgba(96, 165, 250, 0.22);
    box-shadow: inset 0 1px 0 rgba(255,255,255,0.06);
    backdrop-filter: blur(3px);
    color: var(--color-text);
    text-align: center;
    padding: 0 16px;
    pointer-events: none; /* não bloqueia hover/tooltip do chart */
    z-index: 2;
}

.chart-empty-text {
    font-size: 0.98rem;
    font-weight: 800;
    letter-spacing: 0.25px;
    color: var(--color-text);
    text-shadow: 0 1px 0 rgba(0,0,0,0.25);
    opacity: 0.9;
}

#salesChart {
    height: 280px !important;
    width: 100% !important;
}

/* Gráfico Receita vs Conversão */
.grid--revenue-conversion {
    display: block;
    margin-bottom: var(--spacing-6);
}

.card--chart-full {
    background: var(--color-surface);
    border: 1px solid rgba(148, 163, 184, 0.06);
    border-radius: var(--radius-xl);
    padding: var(--spacing-5);
    box-shadow: var(--shadow-low);
    width: 100%;
}

#revenueConversionChart {
    height: 320px !important;
    width: 100% !important;
}

/* Chip Group (Botões de período) */
.chip-group {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
}

.chip {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 6px 12px;
    background: rgba(17, 24, 39, 0.4);
    border: 1px solid rgba(148, 163, 184, 0.15);
    border-radius: var(--radius-md);
    color: var(--color-text-muted);
    font-size: 0.85rem;
    font-weight: 600;
    cursor: pointer;
    transition: all var(--transition);
    min-width: 44px;
}

.chip:hover {
    background: rgba(37, 99, 235, 0.1);
    border-color: rgba(56, 189, 248, 0.3);
    color: var(--color-text);
    transform: translateY(-1px);
}

.chip.is-active {
    background: var(--gradient-primary);
    border-color: transparent;
    color: white;
    box-shadow: 0 4px 12px rgba(37, 99, 235, 0.3);
}

.chip svg {
    width: 16px;
    height: 16px;
}

/* Responsividade dos chips */
@media (max-width: 600px) {
    .chip-group {
        width: 100%;
        justify-content: flex-start;
    }
    
    .chip {
        font-size: 0.8rem;
        padding: 5px 10px;
    }
}

/* =============================================
   FINANCIAL PAGE - Transações Profissionais
   ============================================= */

/* Container principal das transações */
.financial-transactions {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-6);
    margin-top: var(--spacing-8);
}

/* Header da seção de transações */
.transactions-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    background: rgba(17, 24, 39, 0.5);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-xl);
    padding: var(--spacing-5) var(--spacing-6);
    flex-wrap: wrap;
    gap: var(--spacing-4);
}

.transactions-header h3 {
    font-size: 1.6rem;
    font-weight: 700;
    color: var(--color-text);
    margin: 0;
    display: flex;
    align-items: center;
    gap: 12px;
}

.transactions-header h3 i {
    color: var(--color-primary-light);
}

.transactions-count {
    color: var(--color-text-muted);
    font-size: 0.95rem;
    font-weight: 500;
}

/* Container da tabela */
.transactions-table {
    background: var(--color-surface);
    border: 1px solid rgba(148, 163, 184, 0.06);
    border-radius: var(--radius-xl);
    overflow: hidden;
}

/* Header da tabela */
.table-header {
    display: grid;
    grid-template-columns: 150px 1fr 180px 120px 120px 100px;
    gap: var(--spacing-4);
    padding: var(--spacing-4) var(--spacing-5);
    background: rgba(17, 24, 39, 0.5);
    border-bottom: 1px solid rgba(148, 163, 184, 0.1);
}

.table-header .th {
    font-size: 0.75rem;
    font-weight: 600;
    color: var(--color-text-muted);
    text-transform: uppercase;
    letter-spacing: 0.06em;
}

/* Body da tabela */
.table-body {
    display: flex;
    flex-direction: column;
}

/* Linha de transação */
.transaction-row {
    display: grid;
    grid-template-columns: 150px 1fr 180px 120px 120px 100px;
    gap: var(--spacing-4);
    padding: var(--spacing-5);
    border-bottom: 1px solid rgba(148, 163, 184, 0.06);
    transition: all var(--transition);
    position: relative;
}

.transaction-row::before {
    content: "";
    position: absolute;
    left: 0;
    top: 0;
    bottom: 0;
    width: 3px;
    background: var(--gradient-primary);
    opacity: 0;
    transition: opacity var(--transition);
}

.transaction-row:hover {
    background: rgba(37, 99, 235, 0.05);
}

.transaction-row:hover::before {
    opacity: 1;
}

.transaction-row:last-child {
    border-bottom: none;
}

/* Células da transação */
.transaction-cell {
    display: flex;
    align-items: center;
    color: var(--color-text);
    font-size: 0.9rem;
}

.transaction-date {
    font-weight: 500;
    color: var(--color-text-muted);
}

.transaction-client {
    flex-direction: column;
    align-items: flex-start;
    gap: 4px;
}

.transaction-client small {
    color: var(--color-text-muted);
    font-size: 0.8rem;
}

.transaction-checkout {
    font-weight: 500;
}

.transaction-value {
    font-weight: 700;
    font-size: 1rem;
    color: var(--color-primary-light);
}

/* Status da transação */
.transaction-status {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 6px 12px;
    border-radius: var(--radius-pill);
    font-size: 0.8rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.03em;
}

.transaction-status::before {
    content: "";
    width: 8px;
    height: 8px;
    border-radius: 50%;
}

/* Status: Pago */
.transaction-status.status-paid,
.transaction-status.status-approved {
    background: rgba(34, 197, 94, 0.15);
    border: 1px solid rgba(34, 197, 94, 0.3);
    color: var(--color-success);
}

.transaction-status.status-paid::before,
.transaction-status.status-approved::before {
    background: var(--color-success);
    box-shadow: 0 0 0 3px rgba(34, 197, 94, 0.2);
}

/* Status: Pendente */
.transaction-status.status-pending {
    background: rgba(249, 115, 22, 0.15);
    border: 1px solid rgba(249, 115, 22, 0.3);
    color: var(--color-alert);
}

.transaction-status.status-pending::before {
    background: var(--color-alert);
    box-shadow: 0 0 0 3px rgba(249, 115, 22, 0.2);
}

/* Status: Cancelado/Falhado */
.transaction-status.status-cancelled,
.transaction-status.status-failed,
.transaction-status.status-rejected {
    background: rgba(239, 68, 68, 0.15);
    border: 1px solid rgba(239, 68, 68, 0.3);
    color: var(--color-danger);
}

.transaction-status.status-cancelled::before,
.transaction-status.status-failed::before,
.transaction-status.status-rejected::before {
    background: var(--color-danger);
    box-shadow: 0 0 0 3px rgba(239, 68, 68, 0.2);
}

/* Ações da transação */
.transaction-actions {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
}

.transaction-actions .action-btn {
    width: 36px;
    height: 36px;
    display: grid;
    place-items: center;
    border-radius: var(--radius-md);
    border: 1px solid rgba(37, 99, 235, 0.2);
    background: rgba(37, 99, 235, 0.08);
    color: var(--color-primary-light);
    cursor: pointer;
    transition: all var(--transition);
}

.transaction-actions .action-btn:hover {
    background: rgba(37, 99, 235, 0.18);
    border-color: rgba(56, 189, 248, 0.45);
    transform: translateY(-2px);
}

.transaction-actions .action-btn i {
    font-size: 0.9rem;
}

/* Loading state */
.loading-transactions {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: var(--spacing-10);
    gap: var(--spacing-4);
    color: var(--color-text-muted);
}

.loading-transactions i {
    font-size: 2.5rem;
    color: var(--color-primary-light);
}

.loading-transactions p {
    font-size: 1rem;
    font-weight: 500;
}

/* Empty state */
.empty-transactions {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: var(--spacing-10);
    gap: var(--spacing-4);
    color: var(--color-text-muted);
}

.empty-transactions i {
    font-size: 3rem;
    color: var(--color-primary-light);
    opacity: 0.5;
}

.empty-transactions p {
    font-size: 1rem;
    font-weight: 500;
}

/* Responsividade - Transações */
@media (max-width: 1200px) {
    .table-header,
    .transaction-row {
        grid-template-columns: 130px 1fr 150px 100px 110px 80px;
        gap: var(--spacing-3);
    }
}

@media (max-width: 960px) {
    /* Em tablet, esconder header e usar cards */
    .table-header {
        display: none;
    }
    
    .transaction-row {
    display: flex;
        flex-direction: column;
        gap: var(--spacing-3);
        background: rgba(17, 24, 39, 0.3);
        border-radius: var(--radius-lg);
        margin-bottom: var(--spacing-3);
        border: 1px solid rgba(148, 163, 184, 0.06);
    }
    
    .transaction-row::before {
        width: 100%;
        height: 3px;
    top: 0;
    left: 0;
    right: 0;
        bottom: auto;
        border-radius: var(--radius-lg) var(--radius-lg) 0 0;
    }
    
    .transaction-cell {
        padding: 0;
    }
    
    .transaction-cell::before {
        content: attr(data-label);
        font-weight: 600;
        color: var(--color-text-muted);
        font-size: 0.75rem;
        text-transform: uppercase;
        letter-spacing: 0.06em;
        margin-bottom: 4px;
        display: block;
    }
    
    .transaction-cell {
        flex-direction: column;
        align-items: flex-start;
    }
    
    .transaction-actions {
        justify-content: flex-start;
        padding-top: var(--spacing-2);
    }
}

@media (max-width: 720px) {
    .transactions-header {
        flex-direction: column;
        align-items: stretch;
    }
    
    .transactions-header h3 {
        font-size: 1.3rem;
    }
    
    .transactions-count {
        text-align: left;
    }
    
    .transaction-row {
        padding: var(--spacing-4);
    }
}

.help-card {
    background: linear-gradient(135deg, rgba(37, 99, 235, 0.12), rgba(14, 165, 233, 0.08));
    border: 1px solid rgba(37, 99, 235, 0.2);
    border-radius: var(--radius-xl);
    padding: var(--spacing-6);
}

.help-card h4 {
    font-size: 1.1rem;
    font-weight: 600;
    color: var(--color-text);
    margin-bottom: var(--spacing-3);
    display: flex;
    align-items: center;
    gap: var(--spacing-2);
}

.help-card p {
    color: var(--color-text-muted);
    margin-bottom: var(--spacing-4);
    line-height: 1.5;
}

.surface--gradient-border {
    position: relative;
}

.surface--gradient-border::before {
    content: '';
    position: absolute;
    inset: -1px;
    background: var(--gradient-primary);
    border-radius: inherit;
    z-index: -1;
    opacity: 0.5;
}

/* =============================================
   FINANCIAL PAGE
   ============================================= */

.financial-metrics {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    gap: var(--spacing-6);
    margin-bottom: var(--spacing-8);
}

.financial-filters {
    display: flex;
    gap: var(--spacing-4);
    margin-bottom: var(--spacing-6);
    flex-wrap: wrap;
}

.filter-group {
    flex: 1;
    min-width: 200px;
}

.filter-group label {
    display: block;
    margin-bottom: var(--spacing-2);
    color: var(--color-text);
    font-weight: 500;
    font-size: 0.9rem;
}

.btn-refresh {
    background: var(--gradient-primary);
    color: white;
    padding: 10px 20px;
    border: none;
    border-radius: var(--radius-pill);
    font-weight: 500;
    cursor: pointer;
    transition: all var(--transition);
    display: inline-flex;
    align-items: center;
    gap: var(--spacing-2);
    margin-top: auto;
}

.btn-refresh:hover {
    transform: translateY(-2px);
    box-shadow: var(--shadow-glow);
}

.financial-transactions {
    background: var(--color-surface);
    border-radius: var(--radius-xl);
    padding: var(--spacing-6);
    border: 1px solid rgba(148, 163, 184, 0.06);
    box-shadow: var(--shadow-low);
}

.transactions-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: var(--spacing-6);
}

.transactions-header h3 {
    font-size: 1.2rem;
    font-weight: 600;
    color: var(--color-text);
    display: flex;
    align-items: center;
    gap: var(--spacing-2);
}

.transactions-count {
    color: var(--color-text-muted);
    font-size: 0.9rem;
}

.transactions-table {
    overflow-x: auto;
}

.table-header {
    display: grid;
    grid-template-columns: 1.5fr 1.5fr 1.5fr 1fr 1fr 1fr;
    gap: var(--spacing-4);
    padding: var(--spacing-3) var(--spacing-4);
    background: rgba(17, 24, 39, 0.5);
    border-radius: var(--radius-md);
    margin-bottom: var(--spacing-2);
}

.th {
    color: var(--color-text-muted);
    font-size: 0.85rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

.table-body {
    min-height: 200px;
}

.loading-transactions {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: var(--spacing-10);
    color: var(--color-text-muted);
}

.loading-transactions i {
    font-size: 2rem;
    margin-bottom: var(--spacing-3);
    color: var(--color-primary-light);
}

/* =============================================
   THEME TOGGLE
   ============================================= */

.theme-toggle {
    position: fixed;
    bottom: 30px;
    right: 30px;
    width: 56px;
    height: 56px;
    background: var(--gradient-primary);
    border: none;
    border-radius: 50%;
    color: white;
    font-size: 1.2rem;
    cursor: pointer;
    z-index: 999;
    box-shadow: var(--shadow-xl);
    transition: all var(--transition);
    display: flex;
    align-items: center;
    justify-content: center;
}

.theme-toggle:hover {
    transform: scale(1.1) rotate(15deg);
    box-shadow: var(--shadow-glow);
}

/* =============================================
   RESPONSIVE
   ============================================= */

@media (max-width: 1200px) {
    .sidebar {
        width: 88px;
    }
    
    .sidebar .logo img {
        width: 44px;
    }
    
    .sidebar .nav-link span,
    .sidebar .user-details,
    .sidebar .manager-header span {
        display: none;
    }
    
    .sidebar .nav-link {
    justify-content: center;
}

    .main-wrapper {
        margin-left: 88px;
    }
}

@media (max-width: 960px) {
    .header {
        height: auto;
        padding: var(--spacing-4) var(--spacing-6);
    }
    
    .header-content {
        flex-direction: column;
        align-items: flex-start;
        gap: var(--spacing-4);
    }
    
    .header-content h1 {
        font-size: 1.2rem;
    }
    
    .main-content {
        padding: var(--spacing-6);
    }
    
    .grid--4 {
        grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    }
}

@media (max-width: 720px) {
    .sidebar {
        position: fixed;
        left: 0;
        bottom: 0;
        height: auto;
        width: 100%;
        flex-direction: row;
        justify-content: space-around;
        padding: 12px;
        z-index: 1000;
        border-right: none;
        border-top: 1px solid var(--color-border);
    }
    
    .sidebar-header,
    .sidebar-footer,
    .nav-separator,
    .manager-section {
        display: none;
    }
    
    .sidebar-nav {
        padding: 0;
        width: 100%;
    }
    
    .nav-list {
    display: flex;
        justify-content: space-around;
        width: 100%;
    }
    
    .nav-item {
        margin: 0;
    }
    
    .nav-link {
    margin: 0;
        flex-direction: column;
        gap: 4px;
        padding: 8px 12px;
        font-size: 0.75rem;
    }
    
    .nav-link span {
        display: block !important;
    }
    
    .nav-link i {
        font-size: 1.2rem;
    }
    
    .main-wrapper {
        margin-left: 0;
        padding-bottom: 80px;
    }
    
    .mobile-menu-toggle {
        display: block;
    }
    
    .main-content {
        padding: var(--spacing-5);
    }
    
    .grid--4 {
        grid-template-columns: 1fr;
    }
    
    .integrations-grid {
        grid-template-columns: 1fr;
    }
    
    .modal-overlay {
        padding: var(--spacing-4);
    }
    
    .table-header {
        grid-template-columns: 1fr 1fr 1fr;
    }
    
    .theme-toggle {
        bottom: 100px;
        right: 20px;
        width: 48px;
        height: 48px;
    }
}

/* =============================================
   MOBILE RESPONSIVE - AJUSTES PROFISSIONAIS
   Não afeta desktop - apenas mobile/tablet
   ============================================= */

/* Tablets pequenos e celulares grandes */
@media (max-width: 600px) {
    /* Tipografia reduzida */
    .header-content h1 {
        font-size: 1.1rem;
    }
    
    .metric-value {
        font-size: 1.5rem;
    }
    
    .metric-info h3 {
        font-size: 0.75rem;
    }
    
    /* Padding reduzido nos cards */
    .metric-card {
        padding: var(--spacing-4);
        gap: var(--spacing-3);
    }
    
    .metric-icon {
        width: 44px;
        height: 44px;
        font-size: 1.2rem;
    }
    
    /* Main content mais compacto */
    .main-content {
        padding: var(--spacing-4);
    }
    
    /* Grids forçados a 1 coluna */
    .grid--2,
    .grid--4 {
        grid-template-columns: 1fr;
        gap: var(--spacing-4);
    }
    
    /* Tabelas com scroll horizontal */
    .table-responsive {
        width: 100%;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
    }
    
    .data-table {
        min-width: 600px;
        font-size: 0.85rem;
    }
    
    .data-table th,
    .data-table td {
        padding: 10px 8px;
    }
    
    /* Modais full-screen no mobile */
    .modal-overlay {
        padding: var(--spacing-2);
    }
    
    .modal-content {
        width: 100%;
        max-width: 100%;
        max-height: 95vh;
        margin: var(--spacing-2);
        border-radius: var(--radius-lg);
    }
    
    .modal-header {
        padding: var(--spacing-4);
    }
    
    .modal-body {
        padding: var(--spacing-4);
        max-height: calc(95vh - 140px);
    }
    
    .modal-footer {
        padding: var(--spacing-4);
        flex-direction: column;
        gap: var(--spacing-2);
    }
    
    .modal-footer .btn {
        width: 100%;
    }
    
    /* Botões mais largos e fáceis de tocar */
    .btn {
        padding: 12px 20px;
        min-height: 44px;
    }
    
    /* Gráficos mais compactos */
    .chart-container {
        min-height: 200px;
        margin: 0;
    }
    
    /* Cards de checkout */
    .checkout-card {
        padding: var(--spacing-4);
    }
    
    /* Integrações */
    .integration-card {
        padding: var(--spacing-4);
    }
    
    /* Forms mais amigáveis ao toque */
    input,
    select,
    textarea {
        min-height: 44px;
        font-size: 16px; /* Evita zoom automático no iOS */
    }
    
    /* Header actions em coluna */
    .header-actions {
        flex-direction: column;
        width: 100%;
        gap: var(--spacing-2);
    }
    
    .header-actions .btn {
        width: 100%;
    }
}

/* Celulares pequenos */
@media (max-width: 400px) {
    /* Título ainda menor */
    .header-content h1 {
        font-size: 1rem;
    }
    
    /* Métricas ainda mais compactas */
    .metric-card {
        padding: var(--spacing-3);
        gap: var(--spacing-2);
    }
    
    .metric-icon {
        width: 38px;
        height: 38px;
        font-size: 1rem;
    }
    
    .metric-value {
        font-size: 1.3rem;
    }
    
    /* Conteúdo principal */
    .main-content {
        padding: var(--spacing-3);
    }
    
    /* Grids com gap menor */
    .grid {
        gap: var(--spacing-3);
    }
    
    /* Sidebar bottom nav mais compacta */
    .sidebar {
        padding: 8px;
    }
    
    .nav-link {
        padding: 6px 8px;
        font-size: 0.7rem;
    }
    
    .nav-link i {
        font-size: 1rem;
    }
}

/* Modo paisagem em celulares */
@media (max-height: 500px) and (orientation: landscape) {
    .sidebar {
        padding: 6px;
    }
    
    .nav-link {
        padding: 4px 6px;
        font-size: 0.65rem;
    }
    
    .nav-link i {
        font-size: 0.9rem;
    }
    
    .main-wrapper {
        padding-bottom: 60px;
    }
}

/* =============================================
   ADDITIONAL STYLES (mantendo compatibilidade)
   ============================================= */

/* Checkout Cards */
.checkout-card {
    background: var(--color-surface);
    border-radius: var(--radius-xl);
    padding: var(--spacing-6);
    border: 1px solid rgba(148, 163, 184, 0.06);
    box-shadow: var(--shadow-low);
    transition: all var(--transition);
}

.checkout-card:hover {
    transform: translateY(-4px);
    box-shadow: var(--shadow-xl);
}

/* Attendants */
.attendants-content,
.fee-content,
.metrics-summary {
    display: grid;
    gap: var(--spacing-6);
}

.empty-icon {
    width: 80px;
    height: 80px;
    margin: 0 auto var(--spacing-6);
    border-radius: 50%;
    background: linear-gradient(135deg, rgba(37, 99, 235, 0.28), rgba(14, 165, 233, 0.18));
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 2rem;
    color: var(--color-primary-light);
}

/* Tables */
.data-table {
    width: 100%;
    border-collapse: collapse;
}

.data-table th,
.data-table td {
    text-align: left;
    padding: 14px 10px;
    border-bottom: 1px solid var(--color-border);
}

.data-table thead {
    color: var(--color-text-muted);
}

.data-table tbody tr:hover {
    background: rgba(37, 99, 235, 0.08);
}

/* Loading States */
.loading-state {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: var(--spacing-10);
    color: var(--color-text-muted);
}

.loading-state i {
    font-size: 2rem;
    margin-bottom: var(--spacing-3);
    color: var(--color-primary-light);
    animation: spin 1s linear infinite;
}

@keyframes spin {
    from {
        transform: rotate(0deg);
    }
    to {
        transform: rotate(360deg);
    }
}

/* Accordions */
.accordion details {
    background: rgba(17, 24, 39, 0.55);
    border-radius: var(--radius-lg);
    padding: var(--spacing-4);
    border: 1px solid rgba(148, 163, 184, 0.08);
    margin-bottom: var(--spacing-3);
}

.accordion summary {
    font-weight: 600;
    color: var(--color-text);
    cursor: pointer;
    list-style: none;
}

.accordion summary::-webkit-details-marker {
    display: none;
}

.accordion p {
    margin-top: var(--spacing-3);
    color: var(--color-text-muted);
    line-height: 1.5;
}

/* Status Dots */
.status-dot {
    width: 12px;
    height: 12px;
    border-radius: 50%;
    display: inline-block;
}

.status-dot.is-online {
    background: var(--color-success);
    box-shadow: 0 0 0 6px rgba(34, 197, 94, 0.1);
}

.status-dot.is-warning {
    background: var(--color-alert);
    box-shadow: 0 0 0 6px rgba(249, 115, 22, 0.1);
}

.status-dot.is-offline {
    background: var(--color-danger);
    box-shadow: 0 0 0 6px rgba(239, 68, 68, 0.1);
}

/* Progress Bars */
.progress {
    width: 120px;
    height: 6px;
    border-radius: var(--radius-pill);
    background: rgba(148, 163, 184, 0.2);
    overflow: hidden;
}

.progress__bar {
    width: calc(var(--value) * 1%);
    height: 100%;
    border-radius: inherit;
    background: var(--gradient-primary);
}

/* Chips */
.chip-group {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    background: rgba(17, 24, 39, 0.4);
    padding: 6px;
    border-radius: var(--radius-pill);
}

.chip {
    padding: 6px 14px;
    border-radius: var(--radius-pill);
    color: var(--color-text-muted);
    background: transparent;
    border: none;
    cursor: pointer;
    transition: all var(--transition);
    font-size: 0.9rem;
}

.chip:hover {
    color: var(--color-text);
    background: rgba(37, 99, 235, 0.08);
}

.chip.is-active {
    background: rgba(37, 99, 235, 0.25);
    color: var(--color-text);
}

/* Timeline */
.timeline {
    list-style: none;
    display: flex;
    flex-direction: column;
    gap: var(--spacing-4);
}

.timeline li {
    display: grid;
    grid-template-columns: auto 1fr auto;
    align-items: center;
    gap: var(--spacing-4);
    padding: 14px 18px;
    background: rgba(17, 24, 39, 0.5);
    border-radius: var(--radius-lg);
    border: 1px solid rgba(148, 163, 184, 0.08);
}

.timeline__point {
    width: 14px;
    height: 14px;
    border-radius: 50%;
    background: var(--color-primary);
    box-shadow: 0 0 0 4px rgba(37, 99, 235, 0.18);
}

.list__title {
    font-weight: 600;
    color: var(--color-text);
}

.list__subtitle {
    color: var(--color-text-muted);
    font-size: 0.85rem;
}

/* Hero Sections */
.hero {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: var(--spacing-6);
    border-radius: var(--radius-xl);
    background: linear-gradient(135deg, rgba(37, 99, 235, 0.3), rgba(14, 165, 233, 0.12));
    border: 1px solid rgba(148, 163, 184, 0.08);
    gap: var(--spacing-6);
    margin-bottom: var(--spacing-6);
}

.hero h1 {
    font-size: 1.8rem;
    margin-top: var(--spacing-2);
    color: var(--color-text);
}

.hero-label {
    text-transform: uppercase;
    letter-spacing: 0.08em;
    font-size: 0.78rem;
    color: rgba(226, 232, 240, 0.72);
}

.hero-value {
    font-size: 2.4rem;
    font-weight: 700;
    color: var(--color-text);
}

.hero-actions {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-3);
    align-items: flex-start;
}

/* Gauges e KPIs */
.gauge {
    width: 140px;
    height: 140px;
    border-radius: 50%;
    background: conic-gradient(
        rgba(56, 189, 248, 0.45) calc(var(--fill) * 1%),
        rgba(15, 23, 42, 0.4) calc(var(--fill) * 1%)
    );
    display: grid;
    place-items: center;
    position: relative;
    margin: auto;
}

.gauge__cover {
    width: 90px;
    height: 90px;
    border-radius: 50%;
    background: rgba(17, 24, 39, 0.9);
    display: grid;
    place-items: center;
    font-weight: 700;
    font-size: 1.4rem;
    box-shadow: inset 0 0 0 2px rgba(148, 163, 184, 0.1);
}

.kpi-value {
    font-size: 2.2rem;
    font-weight: 700;
    color: var(--color-text);
}

.kpi-subtext {
    color: var(--color-text-muted);
    font-size: 0.9rem;
}

/* Sparklines */
/* Card header and body (generic - para uso nos KPIs) */
.card-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 16px;
}

.card-body {
    display: flex;
        flex-direction: column;
    gap: 8px;
}

/* Sparkline mini chart */
.sparkline {
    height: 48px;
    width: 100%;
    margin-top: 12px;
    position: relative;
    overflow: hidden;
}

.sparkline svg {
        width: 100%;
    height: 100%;
}

.trend {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    color: var(--color-success);
}

.trend svg {
    width: 18px;
    height: 18px;
}

/* Search Fields */
.search-field {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 10px 16px;
    border-radius: var(--radius-pill);
    background: rgba(17, 24, 39, 0.7);
    border: 1px solid rgba(56, 189, 248, 0.25);
    min-width: 280px;
    color: var(--color-text-muted);
}

.search-field svg {
    width: 18px;
    height: 18px;
}

.search-field input {
    width: 100%;
    background: transparent;
    border: none;
    outline: none;
    color: var(--color-text);
}

.search-field input::placeholder {
    color: rgba(148, 163, 184, 0.6);
}

/* Icon Buttons */
.icon-button {
    width: 42px;
    height: 42px;
    display: grid;
    place-items: center;
    border-radius: var(--radius-md);
    border: 1px solid var(--color-border);
    color: var(--color-text-muted);
    position: relative;
    background: rgba(17, 24, 39, 0.48);
    transition: all var(--transition);
    cursor: pointer;
}

.icon-button:hover {
    color: var(--color-text);
    border-color: rgba(56, 189, 248, 0.55);
    background: rgba(37, 99, 235, 0.18);
}

.icon-button svg {
    width: 20px;
    height: 20px;
}

/* Dot notification */
.dot {
    position: absolute;
    right: 10px;
    top: 10px;
    width: 8px;
    height: 8px;
    background: var(--color-danger);
    border-radius: 50%;
    box-shadow: 0 0 0 4px rgba(239, 68, 68, 0.35);
}

/* Breadcrumbs */
.header-breadcrumb {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.breadcrumb-label {
    color: var(--color-text-muted);
    font-size: 0.82rem;
}

.breadcrumb-title {
    font-size: 1.35rem;
    font-weight: 600;
    color: var(--color-text);
}

/* Side Panel */
.side-panel {
    display: grid;
    grid-template-columns: 1fr;
    gap: var(--spacing-4);
}

.side-panel__section {
    background: rgba(17, 24, 39, 0.55);
    border-radius: var(--radius-xl);
    border: 1px solid rgba(148, 163, 184, 0.08);
    padding: var(--spacing-5);
}

.side-panel__section h3 {
    font-size: 1.05rem;
    margin-bottom: var(--spacing-3);
    color: var(--color-text);
}

.side-panel__list {
    list-style: none;
    display: flex;
    flex-direction: column;
    gap: var(--spacing-3);
    color: var(--color-text-muted);
}

.side-panel__list li {
    display: flex;
    align-items: center;
    gap: var(--spacing-3);
}

.side-panel__links {
    list-style: none;
    display: flex;
    flex-direction: column;
    gap: var(--spacing-2);
}

.side-panel__links a {
    color: var(--color-primary-light);
    text-decoration: none;
    transition: color var(--transition);
}

.side-panel__links a:hover {
    color: var(--color-primary);
}

/* Canvas para gráficos */
canvas {
    max-width: 100%;
    height: auto;
}

/* Ajustes finais */
button {
    font-family: inherit;
}

input, select, textarea {
    font-family: inherit;
}

a {
    color: var(--color-primary-light);
    text-decoration: none;
    transition: color var(--transition);
}

a:hover {
    color: var(--color-primary);
}

/* ============================================
 * CÓDIGOS DE CONVITE - DESIGN PROFISSIONAL
 * ============================================ */

/* Container principal dos códigos */
.invite-codes-section {
    margin-top: var(--spacing-6);
}

/* Cabeçalho da seção */
.invite-codes-section .section-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: var(--spacing-5);
    padding-bottom: var(--spacing-4);
    border-bottom: 1px solid var(--color-border);
}

.invite-codes-section .section-header h3 {
    font-size: 1.5rem;
    font-weight: 600;
    color: var(--color-text);
    display: flex;
    align-items: center;
    gap: var(--spacing-3);
}

.invite-codes-section .section-header h3 i {
    color: var(--color-primary);
    font-size: 1.25rem;
}

/* Lista de códigos */
.invite-codes-list {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(420px, 1fr));
    gap: var(--spacing-5);
}

/* Card de código individual */
.invite-code-card {
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-xl);
    padding: var(--spacing-5);
    transition: all var(--transition);
    box-shadow: var(--shadow-low);
    display: flex;
    flex-direction: column;
    gap: var(--spacing-4);
    position: relative;
    overflow: hidden;
}

.invite-code-card::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 3px;
    background: linear-gradient(90deg, var(--color-primary), var(--color-primary-light));
    opacity: 0;
    transition: opacity var(--transition);
}

.invite-code-card:hover {
    border-color: rgba(148, 163, 184, 0.2);
    box-shadow: var(--shadow-md);
    transform: translateY(-2px);
}

.invite-code-card:hover::before {
    opacity: 1;
}

/* Informações do código */
.code-info {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: var(--spacing-3);
}

.code-info h4 {
    font-size: 1.125rem;
    font-weight: 600;
    color: var(--color-text);
    margin: 0;
    display: flex;
    align-items: center;
    gap: var(--spacing-2);
}

.code-info h4 i {
    color: var(--color-primary-light);
    font-size: 1rem;
}

/* Data de criação */
.code-date {
    display: flex;
    align-items: center;
    gap: var(--spacing-2);
    font-size: 0.875rem;
    color: var(--color-text-muted);
    margin: 0;
}

.code-date i {
    color: var(--color-primary-light);
    font-size: 0.875rem;
}

/* Código (quando não conectado) */
.code-value {
    font-family: 'Courier New', monospace;
    font-size: 1rem;
    font-weight: 600;
    color: var(--color-primary-light);
    background: rgba(37, 99, 235, 0.1);
    padding: var(--spacing-3) var(--spacing-4);
    border-radius: var(--radius-md);
    border: 1px solid rgba(37, 99, 235, 0.2);
    margin: var(--spacing-2) 0;
    letter-spacing: 0.05em;
    display: inline-block;
}

/* Status do código */
.code-status {
    display: inline-flex;
    align-items: center;
    gap: var(--spacing-2);
    padding: var(--spacing-2) var(--spacing-3);
    border-radius: var(--radius-pill);
    font-size: 0.875rem;
    font-weight: 500;
    width: fit-content;
}

.code-status i {
    font-size: 0.875rem;
}

.code-status.connected {
    background: rgba(34, 197, 94, 0.15);
    color: var(--color-success);
    border: 1px solid rgba(34, 197, 94, 0.25);
}

.code-status.connected i {
    color: var(--color-success);
}

.code-status.not-connected {
    background: rgba(249, 115, 22, 0.15);
    color: var(--color-alert);
    border: 1px solid rgba(249, 115, 22, 0.25);
}

.code-status.not-connected i {
    color: var(--color-alert);
}

/* Informações do atendente */
.attendant-info {
    font-size: 0.875rem;
    color: var(--color-text-muted);
    display: flex;
    align-items: center;
    gap: var(--spacing-2);
    margin: 0;
}

.attendant-info i {
    color: var(--color-primary-light);
}

.attendant-date {
    display: flex;
    align-items: center;
    gap: var(--spacing-2);
    font-size: 0.875rem;
    color: var(--color-text-muted);
    margin: 0;
}

.attendant-date i {
    color: var(--color-success);
}

/* Estatísticas de vendas */
.sales-stats {
    margin-top: var(--spacing-3);
    padding-top: var(--spacing-3);
    border-top: 1px solid var(--color-border);
}

.sales-card {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: var(--spacing-3);
}

.sales-item {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-2);
    padding: var(--spacing-3);
    background: rgba(37, 99, 235, 0.05);
    border-radius: var(--radius-md);
    border: 1px solid rgba(37, 99, 235, 0.1);
    transition: all var(--transition);
}

.sales-item:hover {
    background: rgba(37, 99, 235, 0.08);
    border-color: rgba(37, 99, 235, 0.15);
}

.sales-item i {
    font-size: 1rem;
    color: var(--color-primary-light);
}

.sales-number {
    font-size: 1rem;
    font-weight: 600;
    color: var(--color-text);
}

.sales-label {
    font-size: 0.75rem;
    color: var(--color-text-muted);
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

.sales-item.manager-profit {
    background: rgba(34, 197, 94, 0.1);
    border-color: rgba(34, 197, 94, 0.2);
}

.sales-item.manager-profit i {
    color: var(--color-success);
}

.sales-item.manager-profit .sales-number {
    color: var(--color-success);
}

/* Ações do código */
.code-actions {
    display: flex;
    align-items: center;
    gap: var(--spacing-3);
    padding-top: var(--spacing-3);
    border-top: 1px solid var(--color-border);
}

/* Botão copiar */
.btn-copy-code {
    display: inline-flex;
    align-items: center;
    gap: var(--spacing-2);
    padding: var(--spacing-3) var(--spacing-4);
    background: var(--color-primary);
    color: white;
    border: none;
    border-radius: var(--radius-md);
    font-size: 0.875rem;
    font-weight: 500;
    cursor: pointer;
    transition: all var(--transition);
    box-shadow: 0 2px 8px rgba(37, 99, 235, 0.2);
}

.btn-copy-code:hover {
    background: var(--color-primary-dark);
    box-shadow: 0 4px 12px rgba(37, 99, 235, 0.3);
    transform: translateY(-1px);
}

.btn-copy-code:active {
    transform: translateY(0);
    box-shadow: 0 1px 4px rgba(37, 99, 235, 0.2);
}

.btn-copy-code i {
    font-size: 0.875rem;
}

/* Menu dropdown */
.code-menu {
    position: relative;
    margin-left: auto;
}

.btn-menu {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    background: var(--color-surface-elevated);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
    color: var(--color-text-muted);
    cursor: pointer;
    transition: all var(--transition);
}

.btn-menu:hover {
    background: rgba(37, 99, 235, 0.1);
    border-color: var(--color-primary);
    color: var(--color-primary-light);
}

.menu-dropdown {
    position: absolute;
    top: calc(100% + 8px);
    right: 0;
    min-width: 200px;
    background: var(--color-surface-elevated);
    border: 1px solid var(--color-border-strong);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-xl);
    padding: var(--spacing-2);
    z-index: 100;
    opacity: 0;
    visibility: hidden;
    transform: translateY(-8px);
    transition: all var(--transition);
}

.code-menu.is-open .menu-dropdown {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
}

.menu-dropdown button {
    display: flex;
    align-items: center;
    gap: var(--spacing-3);
    width: 100%;
    padding: var(--spacing-3);
    background: transparent;
    border: none;
    border-radius: var(--radius-md);
    color: var(--color-text);
    font-size: 0.875rem;
    cursor: pointer;
    transition: all var(--transition);
    text-align: left;
}

.menu-dropdown button:hover {
    background: rgba(37, 99, 235, 0.1);
    color: var(--color-primary-light);
}

.menu-dropdown button i {
    font-size: 0.875rem;
    width: 16px;
    text-align: center;
}

.menu-dropdown button.delete-action {
    color: var(--color-danger);
}

.menu-dropdown button.delete-action:hover {
    background: rgba(239, 68, 68, 0.1);
    color: var(--color-danger);
}

/* Empty state */
.empty-state {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: var(--spacing-6);
    text-align: center;
    background: var(--color-surface);
    border: 1px dashed var(--color-border);
    border-radius: var(--radius-xl);
    min-height: 400px;
}

.empty-icon {
    width: 80px;
    height: 80px;
    background: rgba(37, 99, 235, 0.1);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: var(--spacing-4);
}

.empty-icon i {
    font-size: 2rem;
    color: var(--color-primary-light);
}

.empty-state h3 {
    font-size: 1.25rem;
    font-weight: 600;
    color: var(--color-text);
    margin-bottom: var(--spacing-3);
}

.empty-state p {
    font-size: 0.875rem;
    color: var(--color-text-muted);
    max-width: 400px;
    margin-bottom: var(--spacing-5);
}

/* Botões primários */
.btn-primary {
    display: inline-flex;
    align-items: center;
    gap: var(--spacing-2);
    padding: var(--spacing-3) var(--spacing-5);
    background: var(--color-primary);
    color: white;
    border: none;
    border-radius: var(--radius-md);
    font-size: 0.875rem;
    font-weight: 500;
    cursor: pointer;
    transition: all var(--transition);
    box-shadow: 0 2px 8px rgba(37, 99, 235, 0.2);
}

.btn-primary:hover {
    background: var(--color-primary-dark);
    box-shadow: 0 4px 12px rgba(37, 99, 235, 0.3);
    transform: translateY(-1px);
}

.btn-primary:active {
    transform: translateY(0);
    box-shadow: 0 1px 4px rgba(37, 99, 235, 0.2);
}

.btn-primary i {
    font-size: 0.875rem;
}

/* =============================================
   EMPTY STATE — PAGAMENTOS (SEM INTEGRAÇÃO)
   Versão premium para "Experiência do cliente"
   ============================================= */
.empty-state--payments {
    position: relative;
    max-width: 760px;
    margin: 28px auto;
    padding: 24px;
    border-radius: var(--radius-xl);
    border: 1px solid var(--color-border);
    background: var(--color-surface);
    box-shadow: var(--shadow-low);
    backdrop-filter: blur(6px);
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    gap: 16px;
    overflow: hidden;
}

.empty-state--payments::before {
    content: "";
    display: none;
}

.empty-state--payments::after {
    content: "";
    display: none;
}

.empty-state--payments .empty-state-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 72px;
    height: 72px;
    border-radius: 16px;
    background: rgba(59,130,246,0.12);
    border: 1px solid rgba(59,130,246,0.25);
    box-shadow: none;
}

.empty-state--payments .empty-state-icon i {
    color: #93c5fd;
    font-size: 1.4rem;
}

.empty-state--payments .empty-eyebrow { display: none; }

.empty-state--payments .empty-eyebrow {
    display: inline-block;
    font-size: 0.75rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: var(--color-primary-light);
    background: rgba(59,130,246,0.12);
    border: 1px solid rgba(59,130,246,0.35);
    padding: 4px 10px;
    border-radius: 999px;
    margin-bottom: 10px;
}

.empty-state--payments .empty-state-content h3 {
    margin: 0 0 8px 0;
    font-size: 1.6rem;
    font-weight: 900;
    letter-spacing: 0.012em;
    line-height: 1.15;
    text-align: center;
    background: linear-gradient(135deg, #fde047 0%, #f59e0b 45%, #f97316 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent; /* mantém preenchimento do gradiente */
    background-clip: text;
    color: transparent;
    /* contorno real sem afetar o preenchimento */
    -webkit-text-stroke: 1.2px #ef4444;
    text-shadow: none;
    filter: drop-shadow(0 2px 6px rgba(239, 68, 68, 0.25));
}

.empty-state--payments .empty-state-content h3::after { display: none; }

.empty-state--payments .empty-state-content { text-align: center; }

.empty-state--payments .empty-state-content p {
    margin: 0 0 12px 0;
    color: var(--color-text-muted);
    max-width: 560px;
    margin-left: auto;
    margin-right: auto;
}

.empty-state--payments .empty-state-features {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
    margin-top: 4px;
}

.empty-state--payments .empty-state-features .feature-item {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 0;
    background: transparent;
    border: none;
    color: var(--color-text-muted);
    font-size: 0.95rem;
}

.empty-state--payments .empty-state-features .feature-item i {
    color: #22c55e;
}

.empty-state--payments .empty-state-actions {
    grid-column: 1 / -1;
    display: flex;
    justify-content: center;
    margin-top: 12px;
}

.empty-state--payments .btn-integration-config {
    padding: 14px 22px;
    min-width: 240px;
    font-size: 0.95rem;
    box-shadow: 0 6px 18px rgba(16, 185, 129, 0.25);
}

.empty-state--payments .btn-integration-config::before {
    content: "";
    position: absolute;
    inset: 0;
    border-radius: inherit;
    background: radial-gradient(ellipse at center, rgba(255,255,255,0.16), rgba(255,255,255,0));
    opacity: 0.08;
    transition: opacity 0.25s ease;
    pointer-events: none;
}

.empty-state--payments .btn-integration-config:hover::before {
    opacity: 0.16;
}

@media (max-width: 640px) {
    .empty-state--payments {
        grid-template-columns: 1fr;
        gap: 16px;
        padding: 22px;
    }
    .empty-state--payments .empty-state-icon { width: 82px; height: 82px; border-radius: 16px; }
    .empty-state--payments .empty-state-features { grid-template-columns: 1fr; }
}

/* Responsivo */
@media (max-width: 768px) {
    .invite-codes-list {
        grid-template-columns: 1fr;
    }
    
    .sales-card {
        grid-template-columns: 1fr;
    }
    
    .invite-codes-section .section-header {
        flex-direction: column;
        align-items: flex-start;
        gap: var(--spacing-3);
    }
}

/* ============================================
 * TAXA ATENDENTES - DESIGN PROFISSIONAL
 * ============================================ */

/* Container principal */
.fee-settings-page {
    padding: var(--spacing-6);
}

.fee-content {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-6);
}

/* Card principal de taxa */
.fee-card {
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-xl);
    padding: var(--spacing-6);
    box-shadow: var(--shadow-low);
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--spacing-6);
    transition: all var(--transition);
    position: relative;
    overflow: hidden;
}

.fee-card::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 4px;
    background: linear-gradient(90deg, var(--color-primary), var(--color-success));
}

.fee-card:hover {
    border-color: rgba(148, 163, 184, 0.2);
    box-shadow: var(--shadow-md);
    transform: translateY(-2px);
}

/* Informações da taxa */
.fee-info {
    flex: 1;
}

.fee-info h3 {
    font-size: 1rem;
    font-weight: 500;
    color: var(--color-text-muted);
    margin: 0 0 var(--spacing-4) 0;
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

.current-fee {
    display: flex;
    align-items: baseline;
    gap: var(--spacing-3);
}

.fee-value {
    font-size: 3.5rem;
    font-weight: 700;
    color: var(--color-primary-light);
    line-height: 1;
    background: linear-gradient(135deg, var(--color-primary-light), var(--color-success));
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

.fee-description {
    font-size: 1.125rem;
    color: var(--color-text-muted);
    font-weight: 400;
}

/* Ações da taxa */
.fee-actions {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-3);
}

#editFeeButton {
    white-space: nowrap;
    padding: var(--spacing-4) var(--spacing-6);
    font-size: 1rem;
}

/* Opções de configuração */
.fee-options {
    display: grid;
    gap: var(--spacing-5);
}

.option-card {
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-xl);
    padding: var(--spacing-6);
    box-shadow: var(--shadow-low);
    transition: all var(--transition);
    position: relative;
}

.option-card:hover {
    border-color: rgba(148, 163, 184, 0.2);
    box-shadow: var(--shadow-md);
}

.option-card h4 {
    font-size: 1.25rem;
    font-weight: 600;
    color: var(--color-text);
    margin: 0 0 var(--spacing-5) 0;
    display: flex;
    align-items: center;
    gap: var(--spacing-3);
}

.option-card h4 i {
    color: var(--color-primary-light);
    font-size: 1.125rem;
}

/* Switch toggle */
.switch {
    position: relative;
    display: inline-block;
    width: 60px;
    height: 34px;
    margin-bottom: var(--spacing-4);
}

.switch input {
    opacity: 0;
    width: 0;
    height: 0;
}

.slider {
    position: absolute;
    cursor: pointer;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: var(--color-surface-elevated);
    border: 2px solid var(--color-border);
    transition: all var(--transition);
}

.slider:before {
    position: absolute;
    content: "";
    height: 24px;
    width: 24px;
    left: 3px;
    bottom: 3px;
    background-color: var(--color-text-muted);
    transition: all var(--transition);
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
}

input:checked + .slider {
    background: linear-gradient(135deg, var(--color-primary), var(--color-success));
    border-color: var(--color-primary);
}

input:checked + .slider:before {
    transform: translateX(26px);
    background-color: white;
}

input:focus + .slider {
    box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.2);
}

.slider.round {
    border-radius: 34px;
}

.slider.round:before {
    border-radius: 50%;
}

/* Descrição da opção */
.option-description {
    font-size: 0.9375rem;
    line-height: 1.7;
    color: var(--color-text-muted);
    margin: 0;
    padding: var(--spacing-4);
    background: rgba(37, 99, 235, 0.05);
    border-left: 3px solid var(--color-primary);
    border-radius: var(--radius-md);
}

.option-description strong {
    color: var(--color-text);
    font-weight: 600;
}

.option-description br {
    display: block;
    content: "";
    margin: var(--spacing-2) 0;
}

/* Cabeçalho da página */
.fee-settings-page .page-header {
    margin-bottom: var(--spacing-6);
}

.fee-settings-page .page-header h2 {
    font-size: 2rem;
    font-weight: 700;
    color: var(--color-text);
    margin: 0 0 var(--spacing-3) 0;
    display: flex;
    align-items: center;
    gap: var(--spacing-3);
}

.fee-settings-page .page-header h2 i {
    color: var(--color-primary-light);
    font-size: 1.75rem;
}

.fee-settings-page .page-header p {
    font-size: 1rem;
    color: var(--color-text-muted);
    margin: 0;
}

/* Responsivo */
@media (max-width: 768px) {
    .fee-settings-page {
        padding: var(--spacing-4);
    }
    
    .fee-card {
        flex-direction: column;
        align-items: flex-start;
        padding: var(--spacing-5);
    }
    
    .fee-value {
        font-size: 2.5rem;
    }
    
    .fee-description {
        font-size: 1rem;
    }
    
    .fee-actions {
        width: 100%;
    }
    
    #editFeeButton {
        width: 100%;
        justify-content: center;
    }
    
    .option-description {
        font-size: 0.875rem;
    }
    
    .fee-settings-page .page-header h2 {
        font-size: 1.5rem;
    }
}

/* ============================================
 * MÉTRICAS DOS ATENDENTES - DESIGN PROFISSIONAL
 * ============================================ */

/* Container principal */
.attendants-metrics-page {
    padding: var(--spacing-6);
}

/* Cabeçalho da página */
.attendants-metrics-page .page-header {
    margin-bottom: var(--spacing-6);
}

.attendants-metrics-page .page-header h2 {
    font-size: 2rem;
    font-weight: 700;
    color: var(--color-text);
    margin: 0 0 var(--spacing-3) 0;
    display: flex;
    align-items: center;
    gap: var(--spacing-3);
}

.attendants-metrics-page .page-header h2 i {
    color: var(--color-primary-light);
    font-size: 1.75rem;
}

.attendants-metrics-page .page-header p {
    font-size: 1rem;
    color: var(--color-text-muted);
    margin: 0;
}

/* Resumo Geral - Cards de Métricas */
.metrics-summary {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
    gap: var(--spacing-5);
    margin-bottom: var(--spacing-6);
}

.metric-card {
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-xl);
    padding: var(--spacing-5);
    box-shadow: var(--shadow-low);
    display: flex;
    align-items: center;
    gap: var(--spacing-4);
    transition: all var(--transition);
    position: relative;
    overflow: hidden;
}

.metric-card::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    bottom: 0;
    width: 4px;
    background: linear-gradient(180deg, var(--color-primary), var(--color-primary-light));
    opacity: 0;
    transition: opacity var(--transition);
}

.metric-card:hover {
    border-color: rgba(148, 163, 184, 0.2);
    box-shadow: var(--shadow-md);
    transform: translateY(-2px);
}

.metric-card:hover::before {
    opacity: 1;
}

.metric-icon {
    width: 56px;
    height: 56px;
    background: rgba(37, 99, 235, 0.1);
    border-radius: var(--radius-lg);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.metric-icon i {
    font-size: 1.5rem;
    color: var(--color-primary-light);
}

.metric-data {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-2);
}

.metric-value {
    font-size: 1.875rem;
    font-weight: 700;
    color: var(--color-text);
    line-height: 1;
}

.metric-label {
    font-size: 0.875rem;
    color: var(--color-text-muted);
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

/* Cores diferentes para cada tipo de métrica */
.metric-card:nth-child(1) .metric-icon {
    background: rgba(37, 99, 235, 0.1);
}

.metric-card:nth-child(1) .metric-icon i {
    color: var(--color-primary-light);
}

.metric-card:nth-child(2) .metric-icon {
    background: rgba(34, 197, 94, 0.1);
}

.metric-card:nth-child(2) .metric-icon i {
    color: var(--color-success);
}

.metric-card:nth-child(3) .metric-icon {
    background: rgba(249, 115, 22, 0.1);
}

.metric-card:nth-child(3) .metric-icon i {
    color: var(--color-alert);
}

.metric-card:nth-child(4) .metric-icon {
    background: rgba(168, 85, 247, 0.1);
}

.metric-card:nth-child(4) .metric-icon i {
    color: #a855f7;
}

/* Controles e Filtros */
.metrics-controls {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--spacing-4);
    margin-bottom: var(--spacing-6);
    padding: var(--spacing-4);
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-xl);
}

.time-filters {
    display: flex;
    gap: var(--spacing-2);
}

.filter-btn {
    padding: var(--spacing-3) var(--spacing-4);
    background: transparent;
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
    color: var(--color-text-muted);
    font-size: 0.875rem;
    font-weight: 500;
    cursor: pointer;
    transition: all var(--transition);
}

.filter-btn:hover {
    background: rgba(37, 99, 235, 0.1);
    border-color: var(--color-primary);
    color: var(--color-primary-light);
}

.filter-btn.active {
    background: var(--color-primary);
    border-color: var(--color-primary);
    color: white;
    box-shadow: 0 2px 8px rgba(37, 99, 235, 0.3);
}

/* Campo de busca */
.search-filter {
    position: relative;
    width: 280px;
}

.search-filter input {
    width: 100%;
    padding: var(--spacing-3) var(--spacing-5) var(--spacing-3) var(--spacing-4);
    background: var(--color-surface-elevated);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
    color: var(--color-text);
    font-size: 0.875rem;
    transition: all var(--transition);
}

.search-filter input:focus {
    outline: none;
    border-color: var(--color-primary);
    box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.1);
}

.search-filter input::placeholder {
    color: var(--color-text-muted);
}

.search-filter i {
    position: absolute;
    right: var(--spacing-4);
    top: 50%;
    transform: translateY(-50%);
    color: var(--color-text-muted);
    pointer-events: none;
}

/* Lista de Atendentes com Métricas */
.attendants-metrics-list {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-4);
}

/* Estado de carregamento */
.loading-state {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: var(--spacing-6);
    text-align: center;
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-xl);
    min-height: 300px;
    gap: var(--spacing-4);
}

.loading-state i {
    font-size: 2.5rem;
    color: var(--color-primary-light);
}

.loading-state span {
    font-size: 1rem;
    color: var(--color-text-muted);
}

/* Estado vazio */
.empty-metrics-state {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: var(--spacing-6);
    text-align: center;
    background: var(--color-surface);
    border: 1px dashed var(--color-border);
    border-radius: var(--radius-xl);
    min-height: 400px;
}

.empty-metrics-state .empty-icon {
    width: 80px;
    height: 80px;
    background: rgba(37, 99, 235, 0.1);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: var(--spacing-4);
}

.empty-metrics-state .empty-icon i {
    font-size: 2rem;
    color: var(--color-primary-light);
}

.empty-metrics-state h3 {
    font-size: 1.25rem;
    font-weight: 600;
    color: var(--color-text);
    margin: 0 0 var(--spacing-3) 0;
}

.empty-metrics-state p {
    font-size: 0.875rem;
    color: var(--color-text-muted);
    max-width: 400px;
    margin: 0 0 var(--spacing-5) 0;
}

/* Responsivo */
@media (max-width: 1024px) {
    .metrics-summary {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (max-width: 768px) {
    .attendants-metrics-page {
        padding: var(--spacing-4);
    }
    
    .metrics-summary {
        grid-template-columns: 1fr;
    }
    
    .metrics-controls {
        flex-direction: column;
        align-items: stretch;
    }
    
    .time-filters {
        flex-wrap: wrap;
    }
    
    .filter-btn {
        flex: 1;
        min-width: 80px;
    }
    
    .search-filter {
    width: 100%;
    }
    
    .attendants-metrics-page .page-header h2 {
        font-size: 1.5rem;
    }
    
    .metric-value {
        font-size: 1.5rem;
    }
}

/* ============================================
 * SISTEMA DE NOTIFICAÇÕES - DESIGN PROFISSIONAL
 * ============================================ */

/* Container de notificações */
.notifications-container {
    position: fixed;
    top: var(--spacing-5);
    right: var(--spacing-5);
    z-index: 9999;
    display: flex;
    flex-direction: column;
    gap: var(--spacing-3);
    pointer-events: none;
}

/* Notificação individual */
.notification {
    pointer-events: auto;
    display: flex;
    align-items: center;
    gap: var(--spacing-3);
    min-width: 320px;
    max-width: 420px;
    padding: var(--spacing-4);
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-xl);
    opacity: 0;
    transform: translateX(400px);
    transition: all 0.4s cubic-bezier(0.68, -0.55, 0.265, 1.55);
    position: relative;
    overflow: hidden;
}

.notification.show {
    opacity: 1;
    transform: translateX(0);
}

/* Barra colorida lateral */
.notification::before {
    content: "";
    position: absolute;
    left: 0;
    top: 0;
    bottom: 0;
    width: 4px;
}

/* Ícone da notificação */
.notification-icon {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.notification-icon i {
    font-size: 1.25rem;
}

/* Conteúdo da notificação */
.notification-content {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: var(--spacing-1);
}

.notification-message {
    font-size: 0.9375rem;
    line-height: 1.5;
    color: var(--color-text);
    font-weight: 500;
}

/* Botão fechar */
.notification-close {
    width: 24px;
    height: 24px;
    border: none;
    background: transparent;
    color: var(--color-text-muted);
    cursor: pointer;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all var(--transition);
    flex-shrink: 0;
}

.notification-close:hover {
    background: rgba(148, 163, 184, 0.1);
    color: var(--color-text);
}

.notification-close i {
    font-size: 0.875rem;
}

/* Tipos de notificação - SUCCESS */
.notification-success::before {
    background: var(--color-success);
}

.notification-success .notification-icon {
    background: rgba(34, 197, 94, 0.15);
}

.notification-success .notification-icon i {
    color: var(--color-success);
}

/* Tipos de notificação - ERROR */
.notification-error::before {
    background: var(--color-danger);
}

.notification-error .notification-icon {
    background: rgba(239, 68, 68, 0.15);
}

.notification-error .notification-icon i {
    color: var(--color-danger);
}

/* Tipos de notificação - WARNING */
.notification-warning::before {
    background: var(--color-alert);
}

.notification-warning .notification-icon {
    background: rgba(249, 115, 22, 0.15);
}

.notification-warning .notification-icon i {
    color: var(--color-alert);
}

/* Tipos de notificação - INFO */
.notification-info::before {
    background: var(--color-primary);
}

.notification-info .notification-icon {
    background: rgba(37, 99, 235, 0.15);
}

.notification-info .notification-icon i {
    color: var(--color-primary-light);
}

/* Animação de progresso (opcional) */
.notification::after {
    content: "";
    position: absolute;
    bottom: 0;
    left: 0;
    height: 3px;
    width: 100%;
    background: currentColor;
    opacity: 0.3;
    transform-origin: left;
    animation: notificationProgress 4s linear;
}

@keyframes notificationProgress {
    from {
        transform: scaleX(1);
    }
    to {
        transform: scaleX(0);
    }
}

/* Responsivo */
@media (max-width: 768px) {
    .notifications-container {
        top: var(--spacing-4);
        right: var(--spacing-4);
        left: var(--spacing-4);
    }
    
    .notification {
        min-width: unset;
        max-width: unset;
        width: 100%;
    }
}

/* ========================================
   📦 INFO BOX "COMO FUNCIONA" + TOGGLE ENTREGÁVEL (PREMIUM)
   ======================================== */
.custom-info-box {
    display: flex;
    align-items: flex-start;
    gap: 1rem;
    padding: 1.25rem 1.25rem;
    background: linear-gradient(135deg, rgba(17,24,39,0.6), rgba(30,41,59,0.45));
    border: 1px solid rgba(148,163,184,0.22);
    border-radius: 14px;
    backdrop-filter: blur(6px);
    box-shadow: 0 8px 20px rgba(0,0,0,0.18), inset 0 1px 0 rgba(255,255,255,0.04);
}
.custom-info-box .info-icon {
    width: 42px;
    height: 42px;
    min-width: 42px;
    border-radius: 999px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: linear-gradient(145deg, #3b82f6, #06b6d4);
    color: white;
    box-shadow: 0 10px 18px rgba(59,130,246,0.35);
}
.custom-info-box .info-icon i { font-size: 1.1rem; }
.custom-info-box .info-content h4 {
    margin: 0 0 .35rem 0;
    font-size: .95rem;
    font-weight: 800;
    letter-spacing: .2px;
    color: var(--color-text);
}
.custom-info-box .info-content ul {
    margin: 0;
    padding: 0;
    list-style: none;
    display: grid gap: .35rem;
}
.custom-info-box .info-content li {
    display: flex; align-items: center; gap: .5rem;
    color: var(--color-text-muted);
    font-size: .9rem;
}
.custom-info-box .info-content li::before {
    content: '\f00c'; /* fa-check */
    font-family: 'Font Awesome 6 Free';
    font-weight: 900;
    color: #22c55e;
    font-size: .85rem;
}

/* Toggle Entregável */
.toggle-container {
    display: flex; align-items: center; justify-content: space-between;
    gap: 1rem; padding: 1rem 1.1rem;
    background: linear-gradient(135deg, rgba(17,24,39,0.5), rgba(30,41,59,0.35));
    border: 1px solid rgba(148,163,184,0.2);
    border-radius: 12px;
}
.toggle-label { display: inline-flex; align-items: center; gap: .55rem; color: var(--color-text); font-weight: 700; }
.toggle-label i { color: #22c55e; }

.switch { position: relative; display: inline-block; width: 56px; height: 32px; }
.switch input { opacity: 0; width: 0; height: 0; }
.slider { position: absolute; cursor: pointer; inset: 0; background: rgba(148,163,184,0.25); transition: .25s ease; border-radius: 999px; box-shadow: inset 0 2px 6px rgba(0,0,0,0.25); }
.slider:before { content: ""; position: absolute; height: 24px; width: 24px; left: 4px; top: 4px; background: linear-gradient(180deg, #ffffff, #e5e7eb); border-radius: 50%; box-shadow: 0 4px 10px rgba(0,0,0,0.25); transition: .25s ease; }

/* Checked state: gradiente verde + glow */
.switch input:checked + .slider { background: linear-gradient(135deg, #22c55e, #16a34a); box-shadow: inset 0 2px 6px rgba(0,0,0,0.25), 0 0 0 4px rgba(34,197,94,0.15); }
.switch input:checked + .slider:before { transform: translateX(24px); background: linear-gradient(180deg, #f8fff9, #dcfce7); }

/* Focus acessível */
.switch input:focus + .slider { outline: 2px solid rgba(34,197,94,.55); outline-offset: 3px; }

/* Ajuda abaixo do toggle (se existir) */
.toggle-help, .toggle-container + .form-help {
    display: block; margin-top: .5rem; color: var(--color-text-muted); font-size: .85rem;
}

@media (max-width: 768px) {
    .custom-info-box { padding: 1rem; }
    .toggle-container { padding: .9rem 1rem; }
}

/* ============================================
 * PROFESSIONAL MINIMAL THEME
 * Ultra Modern Design System - 2025
 * ============================================ */

:root {
    /* Professional Palette */
    --pro-bg-app: #0b1220;
    --pro-surface-1: #0e1627;
    --pro-surface-2: #121b2d;
    --pro-surface-3: #1a2332;
    --pro-border-soft: rgba(255, 255, 255, 0.08);
    --pro-border-medium: rgba(255, 255, 255, 0.12);
    --pro-text-primary: #f8fafc;
    --pro-text-secondary: #e5e7eb;
    --pro-text-muted: #a3aec2;
    --pro-text-subtle: #64748b;
    --pro-accent: #60a5fa;
    --pro-accent-hover: #3b82f6;
    --pro-success: #22c55e;
    --pro-danger: #ef4444;
    --pro-warning: #f59e0b;
}

/* Global Professional Overrides */
body {
    background: var(--pro-bg-app) !important;
    color: var(--pro-text-secondary);
}

/* Remove excessive gradients from body */
body::before,
body::after {
    display: none !important;
}

/* Surfaces - Unified neutral design */
.sidebar,
.header,
.main-content,
.page-header,
.card,
.info-card,
.checkout-page,
.financial-page,
.checkout-video-fake-page,
.integration-page {
    background: var(--pro-surface-1) !important;
    border-color: var(--pro-border-soft) !important;
}

/* Sidebar Professional */
.sidebar {
    background: var(--pro-surface-1) !important;
    border-right: 1px solid var(--pro-border-soft);
    box-shadow: 2px 0 8px rgba(0, 0, 0, 0.25);
}

.sidebar-header {
    background: transparent !important;
    border-bottom: 1px solid var(--pro-border-soft);
}

.nav-link {
    color: var(--pro-text-muted) !important;
    transition: all 0.2s ease;
}

.nav-link:hover {
    background: rgba(255, 255, 255, 0.05) !important;
    color: var(--pro-text-primary) !important;
}

.nav-item.active .nav-link {
    background: rgba(96, 165, 250, 0.12) !important;
    color: var(--pro-accent) !important;
    border-left: 3px solid var(--pro-accent);
}

/* Header Professional */
.header {
    background: var(--pro-surface-1) !important;
    border-bottom: 1px solid var(--pro-border-soft);
    box-shadow: 0 1px 0 rgba(0, 0, 0, 0.35);
}

.header h1 {
    color: var(--pro-text-primary);
    font-weight: 600;
}

/* Cards & Surfaces */
.card,
.info-card,
.checkout-page-card,
.card--kpi,
.financial-card {
    background: var(--pro-surface-1) !important;
    border: 1px solid var(--pro-border-soft) !important;
    box-shadow: 0 1px 0 rgba(0, 0, 0, 0.35), 0 8px 24px rgba(0, 0, 0, 0.18) !important;
    border-radius: 12px;
}

.page-header {
    background: transparent !important;
    border: none !important;
}

.page-header h2 {
    color: var(--pro-text-primary);
    font-weight: 600;
}

.page-header p {
    color: var(--pro-text-muted);
}

/* Buttons - Professional & Subtle */
.btn-primary,
.generate-pix-button,
.copy-button {
    background: var(--pro-accent) !important;
    border: none !important;
    color: white !important;
    font-weight: 600;
    transition: all 0.2s ease;
}

.btn-primary:hover,
.generate-pix-button:hover,
.copy-button:hover {
    background: var(--pro-accent-hover) !important;
    transform: translateY(-1px);
    box-shadow: 0 4px 12px rgba(96, 165, 250, 0.35);
}

.btn-secondary {
    background: var(--pro-surface-2) !important;
    border: 1px solid var(--pro-border-medium) !important;
    color: var(--pro-text-secondary) !important;
}

.btn-secondary:hover {
    background: var(--pro-surface-3) !important;
    border-color: var(--pro-border-medium) !important;
}

/* Badges & Status */
.badge,
.status-indicator {
    background: var(--pro-surface-2);
    color: var(--pro-text-secondary);
    border: 1px solid var(--pro-border-soft);
}

.badge--success,
.status-indicator.active {
    background: rgba(34, 197, 94, 0.15);
    color: var(--pro-success);
    border-color: rgba(34, 197, 94, 0.3);
}

/* KPI Cards - Clean & Professional */
.grid--kpi .card--kpi {
    background: var(--pro-surface-1) !important;
    border: 1px solid var(--pro-border-soft) !important;
}

.kpi-value {
    color: var(--pro-text-primary);
    font-weight: 700;
}

.kpi-subtext {
    color: var(--pro-text-muted);
}

/* Charts Section */
.charts-section,
.metrics-section {
    background: transparent !important;
}

/* Tables */
table,
.table {
    background: var(--pro-surface-1) !important;
    border: 1px solid var(--pro-border-soft);
}

thead {
    background: var(--pro-surface-2) !important;
    border-bottom: 1px solid var(--pro-border-medium);
}

th {
    color: var(--pro-text-primary);
    font-weight: 600;
}

td {
    color: var(--pro-text-secondary);
    border-color: var(--pro-border-soft) !important;
}

tr:hover {
    background: rgba(255, 255, 255, 0.03) !important;
}

/* Inputs & Forms */
input,
textarea,
select {
    background: var(--pro-surface-2) !important;
    border: 1px solid var(--pro-border-medium) !important;
    color: var(--pro-text-primary) !important;
    border-radius: 8px;
}

input:focus,
textarea:focus,
select:focus {
    border-color: var(--pro-accent) !important;
    box-shadow: 0 0 0 3px rgba(96, 165, 250, 0.15) !important;
}

input::placeholder,
textarea::placeholder {
    color: var(--pro-text-subtle);
}

/* Remove excessive gradients from specific elements */
.gradient,
.gradient-bg,
[style*="linear-gradient"] {
    background: var(--pro-surface-1) !important;
}

/* Typography Refinements */
h1, h2, h3, h4, h5, h6 {
    color: var(--pro-text-primary);
    font-weight: 600;
    letter-spacing: -0.01em;
}

p {
    color: var(--pro-text-secondary);
    line-height: 1.6;
}

small,
.small-text,
.muted {
    color: var(--pro-text-muted);
}

/* Links */
a {
    color: var(--pro-accent);
    transition: color 0.2s ease;
}

a:hover {
    color: var(--pro-accent-hover);
}

/* Modals & Overlays */
.modal-container,
.modal-content {
    background: var(--pro-surface-1) !important;
    border: 1px solid var(--pro-border-soft);
    box-shadow: 0 20px 40px rgba(0, 0, 0, 0.5);
}

.modal-header {
    background: transparent !important;
    border-bottom: 1px solid var(--pro-border-soft);
}

/* Scrollbar Professional */
::-webkit-scrollbar {
    width: 10px;
    height: 10px;
}

::-webkit-scrollbar-track {
    background: var(--pro-surface-2);
}

::-webkit-scrollbar-thumb {
    background: var(--pro-surface-3);
    border-radius: 999px;
    border: 2px solid var(--pro-surface-2);
}

::-webkit-scrollbar-thumb:hover {
    background: rgba(96, 165, 250, 0.6);
}

/* Shadows - Consistent & Subtle */
.shadow-sm {
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.25) !important;
}

.shadow-md {
    box-shadow: 0 1px 0 rgba(0, 0, 0, 0.35), 0 8px 24px rgba(0, 0, 0, 0.18) !important;
}

.shadow-lg {
    box-shadow: 0 20px 40px rgba(0, 0, 0, 0.35) !important;
}

/* Loading & Skeleton */
.loading-placeholder,
.skeleton {
    background: linear-gradient(90deg, var(--pro-surface-2) 25%, var(--pro-surface-3) 50%, var(--pro-surface-2) 75%) !important;
    background-size: 200% 100%;
    animation: loading 1.5s ease-in-out infinite;
}

@keyframes loading {
    0% { background-position: 200% 0; }
    100% { background-position: -200% 0; }
}

/* Responsive Refinements */
@media (max-width: 768px) {
    .sidebar {
        box-shadow: 4px 0 16px rgba(0, 0, 0, 0.35);
    }
}

/* LeadCall Video Fake Page - Professional Centered Layout */
.checkout-video-fake-page .page-header--center {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    gap: 0.5rem;
    margin-bottom: 2rem;
}

.checkout-video-fake-page .leadcall-container {
    display: flex;
    align-items: center;
    gap: 1rem;
    justify-content: center;
    margin-bottom: 1rem;
}

.checkout-video-fake-page .leadcall-partnership {
    color: var(--pro-text-secondary);
    font-size: 1.1rem;
    font-weight: 500;
    white-space: nowrap;
    letter-spacing: 0.02em;
    font-style: italic;
    opacity: 0.9;
}

.checkout-video-fake-page .leadcall-card {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.5rem;
    background: #ffffff;
    padding: 0.75rem 2.5rem;
    border-radius: 12px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}

.checkout-video-fake-page .leadcall-logo {
    display: block;
    max-width: 220px;
    width: 100%;
    height: auto;
    object-fit: contain;
    transform: scale(1.3);
}

.checkout-video-fake-page .leadcall-site {
    color: #ec4899;
    font-size: 0.95rem;
    font-weight: 600;
    letter-spacing: 0.02em;
}

.checkout-video-fake-page .page-header--center p {
    color: var(--pro-text-muted);
    font-size: 1rem;
    margin: 0;
}

@media (max-width: 768px) {
    .checkout-video-fake-page .leadcall-logo {
        max-width: 180px;
    }
}

/* ============================================
 * VIDEO FAKE CHECKOUTS - Professional UI
 * ============================================ */

/* Empty state + botões + modal (estilo profissional) */
.vf-empty {
    text-align: center;
    background: var(--pro-surface-1);
    border: 1px solid var(--pro-border-soft);
    border-radius: 12px;
    padding: 2rem;
    margin-bottom: 1.5rem;
}

.vf-empty-title {
    color: var(--pro-text-primary);
    font-weight: 700;
    font-size: 1.1rem;
}

.vf-empty-sub {
    color: var(--pro-text-muted);
    margin: 0.35rem 0 1rem;
}

.vf-btn-primary {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    background: var(--pro-accent);
    color: #fff;
    border: none;
    border-radius: 10px;
    padding: 0.8rem 1.25rem;
    font-weight: 700;
    cursor: pointer;
    transition: 0.2s ease;
}

.vf-btn-primary:hover {
    background: var(--pro-accent-hover);
    transform: translateY(-1px);
    box-shadow: 0 4px 12px rgba(96, 165, 250, 0.35);
}

.vf-btn-secondary {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    background: var(--pro-surface-2);
    color: var(--pro-text-secondary);
    border: 1px solid var(--pro-border-medium);
    border-radius: 10px;
    padding: 0.8rem 1.25rem;
    font-weight: 600;
    cursor: pointer;
    transition: 0.2s ease;
}

.vf-btn-secondary:hover {
    background: var(--pro-surface-3);
}

/* Modal overlay profissional - z-index unificado */
.modal-overlay {
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.45);
    display: none;
    align-items: center;
    justify-content: center;
    z-index: 100000; /* ✅ Unificado - acima de tudo */
}

.modal-container {
    background: var(--pro-surface-1);
    border: 1px solid var(--pro-border-soft);
    border-radius: 14px;
    width: 100%;
    max-width: 720px;
    box-shadow: 0 20px 40px rgba(0, 0, 0, 0.5);
    max-height: 90vh;
    overflow-y: auto;
}

.modal-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 1rem 1.25rem;
    border-bottom: 1px solid var(--pro-border-soft);
}

.modal-header h3 {
    margin: 0;
    color: var(--pro-text-primary);
    font-weight: 700;
}

.modal-header .modal-close {
    background: transparent;
    border: none;
    color: var(--pro-text-muted);
    font-size: 1.1rem;
    cursor: pointer;
    padding: 0.5rem;
    transition: color 0.2s ease;
}

.modal-header .modal-close:hover {
    color: var(--pro-text-primary);
}

.modal-body {
    padding: 1.5rem 1.25rem;
}

.form-grid {
    display: grid;
    gap: 1.25rem;
}

.form-group label {
    color: var(--pro-text-secondary);
    font-weight: 600;
    display: block;
    margin-bottom: 0.5rem;
}

.form-group input[type="text"],
.form-group input[type="number"] {
    width: 100%;
}

.field-help {
    display: block;
    color: var(--pro-text-muted);
    font-size: 0.85rem;
    margin-top: 0.35rem;
}

.radio-group {
    display: flex;
    gap: 1.25rem;
    color: var(--pro-text-secondary);
}

.radio-group label {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    cursor: pointer;
    font-weight: 500;
}

.radio-group input[type="radio"] {
    cursor: pointer;
}

.info-row {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    color: var(--pro-text-secondary);
    background: var(--pro-surface-2);
    padding: 0.75rem 1rem;
    border-radius: 8px;
    border: 1px solid var(--pro-border-soft);
}

.modal-footer {
    display: flex;
    justify-content: flex-end;
    gap: 0.75rem;
    padding: 1rem 1.25rem;
    border-top: 1px solid var(--pro-border-soft);
}

/* Cartões na lista (reuso do estilo de cards já aplicado) */
.vf-card {
    background: var(--pro-surface-1);
    border: 1px solid var(--pro-border-soft);
    border-radius: 12px;
    padding: 1.25rem;
    display: grid;
    gap: 0.75rem;
    transition: all 0.2s ease;
}

.vf-card:hover {
    border-color: var(--pro-border-medium);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
}

.vf-card-header {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 1rem;
}

.vf-card-title {
    color: var(--pro-text-primary);
    font-weight: 700;
    font-size: 1.05rem;
    margin-bottom: 0.35rem;
}

.vf-card-sub {
    color: var(--pro-text-muted);
    font-size: 0.9rem;
    display: flex;
    align-items: center;
    gap: 0.5rem;
    flex-wrap: wrap;
}

.vf-card-actions {
    display: flex;
    gap: 0.5rem;
    flex-wrap: wrap;
}

.vf-card-actions .vf-btn-secondary {
    padding: 0.5rem 0.75rem;
    font-size: 0.85rem;
}

.vf-tag {
    background: rgba(96, 165, 250, 0.12);
    color: var(--pro-accent);
    border: 1px solid rgba(96, 165, 250, 0.25);
    padding: 0.2rem 0.5rem;
    border-radius: 999px;
    font-size: 0.75rem;
    font-weight: 700;
    display: inline-flex;
    align-items: center;
}

.vf-status {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    color: var(--pro-success);
    font-weight: 600;
    font-size: 0.85rem;
}

.vf-status i {
    font-size: 0.5rem;
}

/* Responsivo */
@media (max-width: 768px) {
    .modal-container {
        max-width: 95%;
        margin: 1rem;
    }

    .vf-card-header {
        flex-direction: column;
        align-items: stretch;
    }

    .vf-card-actions {
        justify-content: flex-start;
    }

    .radio-group {
        flex-direction: column;
        gap: 0.75rem;
    }
}

/* ============================================
 * ENHANCED PROFESSIONAL LOOK
 * Subtle texture, depth, micro-interactions
 * ============================================ */

/* 1) Textura sutil no fundo (não interfere no conteúdo) */
.main-wrapper::before {
    content: "";
    position: fixed;
    inset: 0;
    pointer-events: none;
    z-index: 0;
    background:
        radial-gradient(circle at 1px 1px, rgba(255,255,255,0.04) 1px, transparent 1px) 0 0/12px 12px,
        radial-gradient(circle at 1px 1px, rgba(0,0,0,0.16) 1px, transparent 1px) 6px 6px/12px 12px;
    opacity: 0.25;
    mix-blend-mode: soft-light;
}

/* 2) Suaves "highlights" e contornos para superfícies principais */
.sidebar,
.header {
    backdrop-filter: saturate(1.05) blur(0.5px);
    border-color: var(--pro-border-soft);
    box-shadow: 0 1px 0 rgba(255, 255, 255, 0.02) inset;
}

/* 3) Cards com leve relevo e película sutil */
.card,
.info-card,
.checkout-page-card,
.vf-card {
    background:
        linear-gradient(180deg, rgba(255,255,255,0.02), rgba(255,255,255,0)),
        var(--pro-surface-1);
    border: 1px solid var(--pro-border-soft);
    box-shadow: 0 1px 0 rgba(0,0,0,0.35), 0 8px 24px rgba(0,0,0,0.18);
    transition: transform 0.18s ease, box-shadow 0.18s ease, border-color 0.18s ease;
}

.card:hover,
.info-card:hover,
.checkout-page-card:hover,
.vf-card:hover {
    transform: translateY(-1px);
    border-color: var(--pro-border-medium);
    box-shadow: 0 6px 22px rgba(0,0,0,0.22);
}

/* 4) Botões com micro-interações refinadas */
.vf-btn-primary,
.vf-btn-secondary,
.btn-primary,
.btn-secondary {
    transition: transform 0.12s ease, box-shadow 0.18s ease, background 0.18s ease, border-color 0.18s ease;
    will-change: transform;
}

.vf-btn-primary:active,
.vf-btn-secondary:active,
.btn-primary:active,
.btn-secondary:active {
    transform: translateY(0);
    box-shadow: none;
}

/* 5) Títulos e tipografia com hierarquia clara */
.page-header h2 {
    letter-spacing: -0.01em;
    font-weight: 700;
    color: var(--pro-text-primary);
}

.page-header p {
    color: var(--pro-text-muted);
}

/* 6) LeadCall – cartão mais premium */
.leadcall-card {
    background:
        linear-gradient(180deg, rgba(255,255,255,0.02), rgba(255,255,255,0)),
        #ffffff;
    border: 1px solid rgba(0,0,0,0.06);
    box-shadow:
        0 1px 0 rgba(255,255,255,0.6) inset,
        0 6px 18px rgba(0,0,0,0.12);
}

.leadcall-site {
    text-transform: lowercase;
    letter-spacing: 0.02em;
}

/* 7) "Em parceria com:" como overline refinado */
.leadcall-partnership {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    position: relative;
    color: var(--pro-text-secondary);
    font-size: 0.95rem;
    font-weight: 500;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    opacity: 0.9;
}

.leadcall-partnership::before {
    content: "";
    width: 6px;
    height: 6px;
    border-radius: 999px;
    background: #ec4899;
    display: inline-block;
}

/* 8) Divisores e linhas com estética "calma" */
.hr-soft,
.divider-soft {
    height: 1px;
    background: linear-gradient(90deg, transparent, rgba(255,255,255,0.08), transparent);
    border: 0;
    margin: 1rem 0;
}

/* 9) Animação reduzida para quem prefere menos movimento */
@media (prefers-reduced-motion: reduce) {
    .vf-card,
    .card,
    .info-card,
    .checkout-page-card,
    .vf-btn-primary,
    .vf-btn-secondary,
    .btn-primary,
    .btn-secondary {
        transition: none !important;
    }
    .main-wrapper::before {
        opacity: 0.18;
    }
}

/* 10) Grid dos cards: respirando mais no desktop */
#vfList.checkouts-grid {
    gap: 1rem;
}

@media (min-width: 1024px) {
    #vfList.checkouts-grid {
        gap: 1.25rem;
    }
}

/* 11) Background ultra moderno com múltiplos blur effects */
.checkout-video-fake-page {
    position: relative;
    overflow: hidden;
    background: 
        radial-gradient(ellipse at 20% 20%, rgba(6, 182, 212, 0.08), transparent 50%),
        radial-gradient(ellipse at 80% 80%, rgba(139, 92, 246, 0.08), transparent 50%),
        var(--pro-bg-app);
}

/* Blur effect 1: Cyan neon (topo-direita) */
.checkout-video-fake-page::before {
    content: "";
    position: absolute;
    top: -15%;
    right: -5%;
    width: 600px;
    height: 600px;
    background: radial-gradient(circle, rgba(6, 182, 212, 0.25), transparent 60%);
    filter: blur(100px);
    pointer-events: none;
    z-index: 0;
    animation: floatSlow 12s ease-in-out infinite;
}

/* Blur effect 2: Roxo (baixo-esquerda) */
.checkout-video-fake-page::after {
    content: "";
    position: absolute;
    bottom: -15%;
    left: -5%;
    width: 700px;
    height: 700px;
    background: radial-gradient(circle, rgba(139, 92, 246, 0.18), transparent 65%);
    filter: blur(110px);
    pointer-events: none;
    z-index: 0;
    animation: floatSlow 15s ease-in-out infinite reverse;
}

/* Blur effect 3: Azul elétrico (centro) */
.checkout-video-fake-page .info-card::before {
    content: "";
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 400px;
    height: 400px;
    background: radial-gradient(circle, rgba(14, 165, 233, 0.15), transparent 70%);
    filter: blur(90px);
    pointer-events: none;
    z-index: -1;
    animation: pulse 8s ease-in-out infinite;
}

/* Mesh gradient overlay sutil */
.checkout-video-fake-page > .info-card {
    position: relative;
}

.checkout-video-fake-page > .info-card::after {
    content: "";
    position: absolute;
    inset: 0;
    background: 
        linear-gradient(135deg, rgba(6, 182, 212, 0.03) 0%, transparent 50%, rgba(139, 92, 246, 0.03) 100%);
    border-radius: 12px;
    pointer-events: none;
    z-index: 1;
}

/* Animações suaves */
@keyframes floatSlow {
    0%, 100% { 
        transform: translate(0, 0) scale(1);
        opacity: 1;
    }
    50% { 
        transform: translate(40px, -40px) scale(1.1);
        opacity: 0.8;
    }
}

@keyframes pulse {
    0%, 100% { 
        transform: translate(-50%, -50%) scale(1);
        opacity: 0.6;
    }
    50% { 
        transform: translate(-50%, -50%) scale(1.3);
        opacity: 0.3;
    }
}

/* Garantir que o conteúdo fique acima dos blurs */
.checkout-video-fake-page > * {
    position: relative;
    z-index: 1;
}

/* Empty state minimalista com NEON CIRCULANTE */
.vf-empty-minimal {
    position: relative;
    text-align: center;
    padding: 4rem 2rem;
    margin: 2rem 0;
    background: 
        linear-gradient(135deg, rgba(96, 165, 250, 0.03), rgba(139, 92, 246, 0.03)),
        var(--pro-surface-1);
    border: 1px solid rgba(96, 165, 250, 0.15);
    border-radius: 16px;
    box-shadow: 
        0 8px 32px rgba(96, 165, 250, 0.08),
        inset 0 1px 0 rgba(255, 255, 255, 0.02);
    backdrop-filter: blur(10px);
    overflow: hidden;
}

/* Borda neon circulante animada (anel fino elegante) */
.vf-empty-minimal::before {
    content: "";
    position: absolute;
    inset: 0;
    padding: 2px; /* espessura do anel */
    border-radius: inherit;
    background:
        /* brilho em movimento (highlight) */
        conic-gradient(from var(--vf-neon-angle, 0deg),
            rgba(14, 165, 233, 0) 0%,
            rgba(14, 165, 233, 0) 72%,
            rgba(14, 165, 233, 0.95) 82%,
            rgba(6, 182, 212, 0.95) 88%,
            rgba(14, 165, 233, 0) 100%
        ),
        /* base do anel com transição suave cyan → azul */
        linear-gradient(90deg, rgba(6, 182, 212, 0.55), rgba(14, 165, 233, 0.85), rgba(6, 182, 212, 0.55));
    /* máscara para deixar só a borda visível */
    -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
    -webkit-mask-composite: xor;
    mask-composite: exclude;
    /* brilho elegante ao redor do anel */
    filter: drop-shadow(0 0 10px rgba(14, 165, 233, 0.35)) drop-shadow(0 0 22px rgba(6, 182, 212, 0.25));
    animation: vfNeonSpin 7s linear infinite;
    z-index: 0;
}

/* Propriedade animável para rotação suave do highlight */
@property --vf-neon-angle {
    syntax: '<angle>';
    inherits: false;
    initial-value: 0deg;
}

@keyframes vfNeonSpin {
    to { --vf-neon-angle: 360deg; }
}

/* Camada interna para criar o efeito de borda */
.vf-empty-minimal::after {
    content: "";
    position: absolute;
    inset: 2px;
    background: 
        linear-gradient(135deg, rgba(96, 165, 250, 0.03), rgba(139, 92, 246, 0.03)),
        var(--pro-surface-1);
    border-radius: 14px;
    z-index: -1;
}

/* Garantir que o conteúdo fique visível */
.vf-empty-minimal h3,
.vf-empty-minimal button {
    position: relative;
    z-index: 1;
}

.vf-empty-minimal h3 {
    color: var(--pro-text-primary);
    font-size: 1.25rem;
    font-weight: 600;
    margin: 0 0 2rem 0;
    letter-spacing: -0.01em;
}

/* Animação de rotação do neon */
@keyframes neonRotate {
    0% {
        transform: rotate(0deg);
    }
    100% {
        transform: rotate(360deg);
    }
}

/* Toolbar permanente para botão de criar */
.vf-toolbar {
    display: flex;
    justify-content: flex-end;
    align-items: center;
    margin-bottom: 1.5rem;
    padding: 0;
}

/* Botão com efeito neon azul vibrante */
.vf-btn-create-new {
    display: inline-flex;
    align-items: center;
    gap: 0.75rem;
    padding: 1rem 2.5rem;
    background: linear-gradient(135deg, #06b6d4 0%, #0ea5e9 100%);
    color: #ffffff;
    border: 2px solid rgba(6, 182, 212, 0.5);
    border-radius: 12px;
    font-size: 1rem;
    font-weight: 700;
    cursor: pointer;
    box-shadow: 
        0 0 20px rgba(6, 182, 212, 0.5),
        0 0 40px rgba(6, 182, 212, 0.3),
        0 4px 16px rgba(6, 182, 212, 0.4),
        inset 0 1px 0 rgba(255, 255, 255, 0.3);
    transition: all 0.3s ease;
    position: relative;
    overflow: hidden;
    text-shadow: 0 0 10px rgba(6, 182, 212, 0.8);
}

.vf-btn-create-new::before {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(135deg, rgba(255, 255, 255, 0.3), transparent);
    opacity: 0;
    transition: opacity 0.3s ease;
}

.vf-btn-create-new:hover {
    transform: translateY(-2px);
    background: linear-gradient(135deg, #0891b2 0%, #0284c7 100%);
    border-color: rgba(6, 182, 212, 0.8);
    box-shadow: 
        0 0 30px rgba(6, 182, 212, 0.7),
        0 0 60px rgba(6, 182, 212, 0.4),
        0 8px 24px rgba(6, 182, 212, 0.5),
        inset 0 1px 0 rgba(255, 255, 255, 0.4);
}

.vf-btn-create-new:hover::before {
    opacity: 1;
}

.vf-btn-create-new:active {
    transform: translateY(0);
    box-shadow: 
        0 0 15px rgba(6, 182, 212, 0.6),
        0 0 30px rgba(6, 182, 212, 0.3),
        0 2px 8px rgba(6, 182, 212, 0.4);
}

.vf-btn-create-new i {
    font-size: 1.1rem;
    filter: drop-shadow(0 0 5px rgba(255, 255, 255, 0.5));
}

/* 12) Modal com backdrop blur */
.modal-overlay {
    backdrop-filter: blur(4px) saturate(0.9);
    z-index: 100000; /* ✅ Garantir z-index consistente */
}

.modal-container {
    background:
        linear-gradient(180deg, rgba(255,255,255,0.02), rgba(255,255,255,0)),
        var(--pro-surface-1);
}

/* ============================================
 * DASHBOARD - Aurora Background Ultra Profissional
 * ============================================ */

.main-wrapper.dashboard-aurora {
    position: relative;
    overflow: hidden;
    background:
        radial-gradient(1200px 800px at 10% 0%, rgba(6, 182, 212, 0.12), transparent 60%),
        radial-gradient(900px 700px at 95% 80%, rgba(99, 102, 241, 0.12), transparent 55%),
        var(--pro-bg-app);
}

/* Blobs animados SUPER VISÍVEIS (cyan/indigo/purple) */
.main-wrapper.dashboard-aurora::before,
.main-wrapper.dashboard-aurora::after {
    content: "";
    position: fixed;
    border-radius: 50%;
    pointer-events: none;
    z-index: 1;
    will-change: transform, opacity;
}

/* Blob Cyan (canto superior direito) */
.main-wrapper.dashboard-aurora::before {
    top: -20%;
    right: -10%;
    width: 600px;
    height: 600px;
    background: radial-gradient(circle, rgba(6, 182, 212, 0.4), rgba(14, 165, 233, 0.25) 40%, transparent 70%);
    filter: blur(60px);
    opacity: 0.7;
    animation: dashFloatA 12s ease-in-out infinite;
}

/* Blob Purple/Indigo (canto inferior esquerdo) */
.main-wrapper.dashboard-aurora::after {
    bottom: -15%;
    left: -15%;
    width: 700px;
    height: 700px;
    background: radial-gradient(circle, rgba(139, 92, 246, 0.35), rgba(99, 102, 241, 0.25) 40%, transparent 70%);
    filter: blur(70px);
    opacity: 0.7;
    animation: dashFloatB 15s ease-in-out infinite reverse;
}

/* Blob adicional no centro (efeito extra) */
.dashboard-aurora .main-content::after {
    content: "";
    position: fixed;
    top: 40%;
    left: 50%;
    width: 500px;
    height: 500px;
    background: radial-gradient(circle, rgba(14, 165, 233, 0.25), transparent 65%);
    filter: blur(80px);
    pointer-events: none;
    z-index: 1;
    opacity: 0.5;
    animation: dashFloatC 18s ease-in-out infinite;
    transform: translate(-50%, -50%);
}

/* Textura sutil (grid pontilhado quase imperceptível) */
.dashboard-aurora .main-content::before {
    content: "";
    position: fixed;
    inset: 0;
    z-index: 2;
    pointer-events: none;
    opacity: 0.18;
    background:
        radial-gradient(circle at 1px 1px, rgba(255, 255, 255, 0.05) 1px, transparent 1px) 0 0/14px 14px,
        radial-gradient(circle at 1px 1px, rgba(0, 0, 0, 0.18) 1px, transparent 1px) 7px 7px/14px 14px;
    mix-blend-mode: soft-light;
}

/* Dar legibilidade aos cards sobre o fundo */
.dashboard-aurora .card,
.dashboard-aurora .card--kpi {
    position: relative;
    z-index: 10;
    background:
        linear-gradient(180deg, rgba(255, 255, 255, 0.02), rgba(255, 255, 255, 0)),
        var(--pro-surface-1) !important;
    border: 1px solid var(--pro-border-soft) !important;
    box-shadow: 0 1px 0 rgba(0, 0, 0, 0.35), 0 10px 26px rgba(0, 0, 0, 0.22) !important;
    backdrop-filter: saturate(1.05) blur(0.5px);
}

/* Header/Sidebar mais integrados */
.dashboard-aurora .header,
.dashboard-aurora .sidebar {
    position: relative;
    z-index: 100;
    backdrop-filter: blur(6px) saturate(1.05);
    background: rgba(14, 20, 39, 0.66) !important;
    border-color: var(--pro-border-soft);
    box-shadow: 0 1px 0 rgba(255, 255, 255, 0.02) inset;
}

/* Garantir que o conteúdo fique acima dos blobs */
.dashboard-aurora .main-content {
    position: relative;
    z-index: 5;
}

/* Animações AMPLAS e VISÍVEIS */
@keyframes dashFloatA {
    0%, 100% { 
        transform: translate(0, 0) scale(1) rotate(0deg);
        opacity: 0.7;
    }
    33% { 
        transform: translate(-80px, 60px) scale(1.15) rotate(5deg);
        opacity: 0.85;
    }
    66% { 
        transform: translate(60px, -40px) scale(0.95) rotate(-5deg);
        opacity: 0.6;
    }
}

@keyframes dashFloatB {
    0%, 100% { 
        transform: translate(0, 0) scale(1) rotate(0deg);
        opacity: 0.7;
    }
    33% { 
        transform: translate(70px, -70px) scale(1.2) rotate(-8deg);
        opacity: 0.8;
    }
    66% { 
        transform: translate(-50px, 50px) scale(0.9) rotate(8deg);
        opacity: 0.65;
    }
}

@keyframes dashFloatC {
    0%, 100% { 
        transform: translate(-50%, -50%) scale(1);
        opacity: 0.5;
    }
    50% { 
        transform: translate(-50%, -50%) scale(1.3);
        opacity: 0.3;
    }
}

/* Respeita usuários com motion reduzido */
@media (prefers-reduced-motion: reduce) {
    .main-wrapper.dashboard-aurora::before,
    .main-wrapper.dashboard-aurora::after,
    .dashboard-aurora .main-content::after {
        animation: none !important;
        opacity: 0.4;
    }
}

/* ============================================
 * Dashboard Cards - Neon outline sutil
 * ============================================ */
.dashboard-aurora .card,
.dashboard-aurora .metric-card,
.dashboard-aurora .integration-card,
.dashboard-aurora .taxa-current-card,
.dashboard-aurora .taxa-reduction-card,
.dashboard-aurora .taxa-history-card,
.dashboard-aurora .fee-card,
.dashboard-aurora .option-card {
    position: relative;
}

.dashboard-aurora .card::before,
.dashboard-aurora .metric-card::before,
.dashboard-aurora .integration-card::before,
.dashboard-aurora .taxa-current-card::before,
.dashboard-aurora .taxa-reduction-card::before,
.dashboard-aurora .taxa-history-card::before,
.dashboard-aurora .fee-card::before,
.dashboard-aurora .option-card::before {
    content: "";
    position: absolute;
    inset: 0;
    padding: 1.5px; /* espessura do anel */
    border-radius: inherit;
    pointer-events: none;
    background:
        conic-gradient(from var(--card-neon-angle, 0deg),
            rgba(14, 165, 233, 0) 0%,
            rgba(14, 165, 233, 0) 76%,
            rgba(14, 165, 233, 0.9) 84%,
            rgba(6, 182, 212, 0.9) 90%,
            rgba(14, 165, 233, 0) 100%
        ),
        linear-gradient(90deg, rgba(6, 182, 212, 0.45), rgba(14, 165, 233, 0.7), rgba(6, 182, 212, 0.45));
    -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
    -webkit-mask-composite: xor;
    mask-composite: exclude;
    filter: drop-shadow(0 0 8px rgba(14, 165, 233, 0.25)) drop-shadow(0 0 16px rgba(6, 182, 212, 0.18));
    animation: cardNeonSpin 10s linear infinite;
    z-index: 0;
}

/* Propriedade animável para rotação do highlight nos cards */
@property --card-neon-angle {
    syntax: '<angle>';
    inherits: false;
    initial-value: 0deg;
}

@keyframes cardNeonSpin {
    to { --card-neon-angle: 360deg; }
}

.dashboard-aurora .card::after,
.dashboard-aurora .metric-card::after,
.dashboard-aurora .integration-card::after,
.dashboard-aurora .taxa-current-card::after,
.dashboard-aurora .taxa-reduction-card::after,
.dashboard-aurora .taxa-history-card::after,
.dashboard-aurora .fee-card::after,
.dashboard-aurora .option-card::after {
    content: "";
    position: absolute;
    inset: 0;
    padding: 1.5px; /* espessura do anel */
    border-radius: inherit;
    pointer-events: none;
    background:
        conic-gradient(from var(--card-neon-angle, 0deg),
            rgba(14, 165, 233, 0) 0%,
            rgba(14, 165, 233, 0) 76%,
            rgba(14, 165, 233, 0.9) 84%,
            rgba(6, 182, 212, 0.9) 90%,
            rgba(14, 165, 233, 0) 100%
        ),
        linear-gradient(90deg, rgba(6, 182, 212, 0.45), rgba(14, 165, 233, 0.7), rgba(6, 182, 212, 0.45));
    -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
    -webkit-mask-composite: xor;
    mask-composite: exclude;
    filter: drop-shadow(0 0 8px rgba(14, 165, 233, 0.25)) drop-shadow(0 0 16px rgba(6, 182, 212, 0.18));
    animation: cardNeonSpin 10s linear infinite;
    z-index: 0;
}

/* Propriedade animável para rotação do highlight nos cards */
@property --card-neon-angle {
    syntax: '<angle>';
    inherits: false;
    initial-value: 0deg;
}

@keyframes cardNeonSpin {
    to { --card-neon-angle: 360deg; }
}

/* ============================================
 * CHECKOUT PAGE - Design Premium com Detalhes
 * ============================================ */

/* Barra de ferramentas sticky e elegante */
.checkout-page .checkout-toolbar {
    position: sticky;
    top: 0;
    z-index: 20;
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 1rem;
    padding: 0.75rem 1rem;
    margin: 0 0 1.5rem 0;
    background: linear-gradient(180deg, rgba(255, 255, 255, 0.02), rgba(255, 255, 255, 0)), var(--pro-surface-1);
    border: 1px solid var(--pro-border-soft);
    border-radius: 12px;
    box-shadow: 0 1px 0 rgba(0, 0, 0, 0.35), 0 8px 24px rgba(0, 0, 0, 0.18);
    backdrop-filter: blur(8px) saturate(1.05);
}

.checkout-page .checkout-toolbar .toolbar-left,
.checkout-page .checkout-toolbar .toolbar-right {
    display: flex;
    align-items: center;
    gap: 0.75rem;
}

/* Pills de filtro com estilo refinado */
.checkout-page .filter-pills {
    display: flex;
    gap: 0.5rem;
    flex-wrap: wrap;
}

.checkout-page .pill {
    padding: 0.5rem 0.9rem;
    border-radius: 999px;
    background: rgba(148, 163, 184, 0.08);
    color: var(--pro-text-secondary);
    border: 1px solid var(--pro-border-soft);
    cursor: pointer;
    font-size: 0.875rem;
    font-weight: 500;
    transition: all 0.2s ease;
    letter-spacing: 0.01em;
}

.checkout-page .pill:hover {
    background: rgba(148, 163, 184, 0.14);
    color: var(--pro-text-primary);
    border-color: var(--pro-border-medium);
    transform: translateY(-1px);
}

.checkout-page .pill.is-active {
    background: linear-gradient(135deg, rgba(6, 182, 212, 0.18), rgba(14, 165, 233, 0.22));
    color: #eaf6ff;
    border-color: rgba(14, 165, 233, 0.45);
    box-shadow: 
        0 0 16px rgba(14, 165, 233, 0.2) inset,
        0 0 20px rgba(6, 182, 212, 0.15);
}

/* Campo de busca elegante */
.checkout-page .search {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.5rem 0.85rem;
    border-radius: 10px;
    background: rgba(255, 255, 255, 0.02);
    border: 1px solid var(--pro-border-soft);
    transition: all 0.2s ease;
    min-width: 220px;
}

.checkout-page .search:focus-within {
    border-color: rgba(14, 165, 233, 0.4);
    background: rgba(14, 165, 233, 0.03);
    box-shadow: 0 0 0 3px rgba(14, 165, 233, 0.08);
}

.checkout-page .search i {
    color: var(--pro-text-secondary);
    font-size: 0.9rem;
}

.checkout-page .search input {
    background: transparent;
    border: none;
    outline: none;
    color: var(--pro-text-primary);
    font-size: 0.9rem;
    width: 100%;
}

.checkout-page .search input::placeholder {
    color: var(--pro-text-secondary);
    opacity: 0.6;
}

/* Cards com listras diagonais elegantes */
.checkout-page .checkout-page-card {
    overflow: visible;
    position: relative;
    border-radius: 14px;
}

/* Listras diagonais sutis e sofisticadas */
.checkout-page .checkout-page-card::after {
    content: "";
    position: absolute;
    inset: 0;
    background:
        linear-gradient(135deg,
            rgba(255, 255, 255, 0.06) 0 1px, transparent 1px 18px) 0 0/18px 18px,
        linear-gradient(135deg,
            rgba(14, 165, 233, 0.04) 0 1px, transparent 1px 24px) 0 0/24px 24px;
    mix-blend-mode: overlay;
    pointer-events: none;
    opacity: 0.5;
    z-index: 1;
}

/* Anel neon fino com highlight animado */
.checkout-page .checkout-page-card::before {
    content: "";
    position: absolute;
    inset: 0;
    padding: 1.5px;
    border-radius: inherit;
    background:
        conic-gradient(from var(--co-neon-angle, 0deg),
            rgba(14, 165, 233, 0) 0%,
            rgba(14, 165, 233, 0) 78%,
            rgba(14, 165, 233, 0.85) 86%,
            rgba(6, 182, 212, 0.85) 92%,
            rgba(14, 165, 233, 0) 100%
        ),
        linear-gradient(90deg, rgba(6, 182, 212, 0.35), rgba(14, 165, 233, 0.55), rgba(6, 182, 212, 0.35));
    -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
    -webkit-mask-composite: xor;
    mask-composite: exclude;
    filter: drop-shadow(0 0 6px rgba(14, 165, 233, 0.18)) drop-shadow(0 0 14px rgba(6, 182, 212, 0.14));
    animation: coNeonSpin 11s linear infinite;
    pointer-events: none;
    z-index: 0;
}

/* Garantir que o conteúdo fique acima das decorações */
.checkout-page .checkout-page-card > * {
    position: relative;
    z-index: 2;
}

/* Headers e badges refinados */
.checkout-page .checkout-page-card .checkout-card-header {
    gap: 0.5rem;
    margin-bottom: 0.75rem;
}

.checkout-page .tag {
    padding: 0.3rem 0.65rem;
    border-radius: 999px;
    font-size: 0.75rem;
    font-weight: 600;
    background: rgba(148, 163, 184, 0.12);
    color: var(--pro-text-secondary);
    border: 1px solid var(--pro-border-soft);
    letter-spacing: 0.02em;
}

/* Botões de ação nos cards - Global */
.btn-action {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    padding: 0.625rem 1rem;
    background: var(--pro-surface-2);
    color: var(--pro-text-primary);
    border: 1px solid var(--pro-border-soft);
    border-radius: var(--radius-md);
    font-size: 0.875rem;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.2s ease;
    position: relative;
    overflow: hidden;
}

.btn-action:hover {
    background: var(--pro-surface-3);
    border-color: var(--pro-border-muted);
    transform: translateY(-1px);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
}

.btn-action:active {
    transform: translateY(0);
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.08);
}

.btn-action i {
    font-size: 0.875rem;
    opacity: 0.8;
}

/* Variantes de botões */
.btn-customize {
    background: linear-gradient(135deg, rgba(139, 92, 246, 0.1), rgba(167, 139, 250, 0.08));
    border-color: rgba(139, 92, 246, 0.3);
    color: #a78bfa;
}

.btn-customize:hover {
    background: linear-gradient(135deg, rgba(139, 92, 246, 0.15), rgba(167, 139, 250, 0.12));
    border-color: rgba(139, 92, 246, 0.4);
    color: #c4b5fd;
}

.btn-preview {
    background: linear-gradient(135deg, rgba(59, 130, 246, 0.1), rgba(96, 165, 250, 0.08));
    border-color: rgba(59, 130, 246, 0.3);
    color: #60a5fa;
}

.btn-preview:hover {
    background: linear-gradient(135deg, rgba(59, 130, 246, 0.15), rgba(96, 165, 250, 0.12));
    border-color: rgba(59, 130, 246, 0.4);
    color: #93c5fd;
}

.btn-copy {
    background: linear-gradient(135deg, rgba(16, 185, 129, 0.1), rgba(52, 211, 153, 0.08));
    border-color: rgba(16, 185, 129, 0.3);
    color: #34d399;
}

.btn-copy:hover {
    background: linear-gradient(135deg, rgba(16, 185, 129, 0.15), rgba(52, 211, 153, 0.12));
    border-color: rgba(16, 185, 129, 0.4);
    color: #6ee7b7;
}

/* Botão de ação nos cards com micro-interação */
.checkout-page .checkout-page-card .btn-action::before,
.checkout-video-fake-page .checkout-page-card .btn-action::before {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(135deg, rgba(255, 255, 255, 0.15), transparent);
    opacity: 0;
    transition: opacity 0.2s ease;
}

.checkout-page .checkout-page-card .btn-action:hover::before,
.checkout-video-fake-page .checkout-page-card .btn-action:hover::before {
    opacity: 1;
}

/* Propriedade CSS customizada para animação */
@property --co-neon-angle {
    syntax: '<angle>';
    inherits: false;
    initial-value: 0deg;
}

@keyframes coNeonSpin {
    to { --co-neon-angle: 360deg; }
}

/* Responsivo para toolbar */
@media (max-width: 900px) {
    .checkout-page .checkout-toolbar {
        flex-direction: column;
        align-items: stretch;
    }
    
    .checkout-page .checkout-toolbar .toolbar-left,
    .checkout-page .checkout-toolbar .toolbar-right {
        justify-content: space-between;
        width: 100%;
    }
    
    .checkout-page .filter-pills {
        width: 100%;
        justify-content: flex-start;
    }
    
    .checkout-page .search {
        min-width: unset;
        flex: 1;
    }
}

@media (max-width: 600px) {
    .checkout-page .filter-pills {
        gap: 0.35rem;
    }
    
    .checkout-page .pill {
        padding: 0.4rem 0.7rem;
        font-size: 0.8rem;
    }
}

/* ============================================
   BARRA DE PROGRESSO - VIDEO FAKE UPLOAD
   ============================================ */
.vf-progress.hidden { 
    display: none; 
}

.vf-progress {
    margin-top: 16px;
    padding: 16px;
    border: 1px solid rgba(249, 19, 146, 0.25);
    background: linear-gradient(180deg, rgba(249, 19, 146, 0.05), rgba(98, 0, 234, 0.03));
    border-radius: 12px;
    backdrop-filter: blur(8px);
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.05);
    animation: fadeIn 0.3s ease;
}

@keyframes fadeIn {
    from { opacity: 0; transform: translateY(-10px); }
    to { opacity: 1; transform: translateY(0); }
}

.vf-progress-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 10px;
}

.vf-progress-title {
    font-weight: 700;
    font-size: 14px;
    color: #f91392;
    display: flex;
    align-items: center;
    gap: 8px;
}

.vf-progress-title::before {
    content: "📤";
    font-size: 16px;
    animation: pulse 2s infinite;
}

@keyframes pulse {
    0%, 100% { opacity: 1; }
    50% { opacity: 0.5; }
}

.vf-progress-pct {
    font-weight: 800;
    font-size: 16px;
    color: #f91392;
    min-width: 50px;
    text-align: right;
}

.vf-progress-bar {
    position: relative;
    height: 12px;
    border-radius: 999px;
    overflow: hidden;
    background: rgba(249, 19, 146, 0.12);
    box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.08);
}

.vf-progress-fill {
    position: absolute;
    left: 0;
    top: 0;
    height: 100%;
    width: 0%;
    background: linear-gradient(90deg, #f91392, #8b5cf6, #f91392);
    background-size: 200% 100%;
    transition: width 0.3s ease-in-out;
    animation: shimmer 2s infinite;
    box-shadow: 0 0 10px rgba(249, 19, 146, 0.5);
}

@keyframes shimmer {
    0% { background-position: 200% 0; }
    100% { background-position: -200% 0; }
}

.vf-progress-status {
    margin-top: 10px;
    font-size: 12px;
    color: #6b7280;
    font-weight: 500;
    display: flex;
    align-items: center;
    gap: 6px;
}

.vf-progress-status::before {
    content: "⏳";
    font-size: 14px;
}

/* Dark mode support */
body.dark-mode .vf-progress {
    border-color: rgba(249, 19, 146, 0.35);
    background: linear-gradient(180deg, rgba(249, 19, 146, 0.08), rgba(98, 0, 234, 0.05));
}

body.dark-mode .vf-progress-title,
body.dark-mode .vf-progress-pct {
    color: #ff69b4;
}

body.dark-mode .vf-progress-status {
    color: #9ca3af;
}

body.dark-mode .vf-progress-bar {
    background: rgba(249, 19, 146, 0.18);
}

/* ============================================
   PROGRESSO NO CARD (LeadCall Processing)
   ============================================ */
.checkout-processing {
    margin-top: 0.5rem;
    background: var(--pro-surface-2);
    border: 1px solid var(--pro-border-soft);
    border-radius: 8px;
    padding: 0.5rem 0.75rem;
    animation: fadeIn 0.3s ease;
}

.checkout-processing-head {
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-weight: 600;
    font-size: 0.9rem;
}

.checkout-processing-bar {
    height: 6px;
    background: rgba(255, 255, 255, 0.08);
    border-radius: 6px;
    overflow: hidden;
    margin-top: 0.5rem;
}

.checkout-processing-fill {
    width: 0%;
    height: 100%;
    background: linear-gradient(90deg, #f91392, #7b68ee);
    transition: width 0.3s ease;
}

.checkout-processing-status {
    font-size: 0.8rem;
    opacity: 0.8;
    margin-top: 0.35rem;
}

body.dark-mode .checkout-processing {
    background: rgba(249, 19, 146, 0.08);
    border-color: rgba(249, 19, 146, 0.25);
}

body.dark-mode .checkout-processing-bar {
    background: rgba(255, 255, 255, 0.05);
}

/* ========================================
   Animação de remoção de cards
   ======================================== */
.checkout-page-card,
.checkout-card {
    transition: box-shadow 0.2s ease;
    will-change: transform, opacity;
}

.checkout-page-card.is-deleting,
.checkout-card.is-deleting {
    opacity: 0;
    transform: translateY(-4px) scale(0.98);
    filter: blur(0.5px);
    transition: opacity 0.25s ease, transform 0.25s ease, filter 0.25s ease;
}

.checkout-page-card.is-collapsing,
.checkout-card.is-collapsing {
    overflow: hidden;
    margin-top: 0 !important;
    margin-bottom: 0 !important;
    padding-top: 0 !important;
    padding-bottom: 0 !important;
    border-width: 0 !important;
    transition: max-height 0.28s ease, margin 0.28s ease, padding 0.28s ease, border-width 0.28s ease;
}

/* ====================================================================
   ANIMAÇÃO DE LÍQUIDO - Preenchimento progressivo do card
   ==================================================================== */
.checkout-page-card,
.checkout-card {
    position: relative;
    overflow: hidden; /* importante para conter o líquido dentro do card */
}

/* Overlay que "enche" o card conforme o progresso (usa a var --progress) */
.card-progress-overlay {
    position: absolute;
    inset: 0;
    pointer-events: none;
    z-index: 0; /* Ficar atrás do conteúdo */
    /* recorta a altura exibida com base no progresso (0-100) */
    clip-path: inset(calc(100% - var(--progress, 0%) * 1%) 0 0 0);
    transition: clip-path .4s cubic-bezier(.22,1,.36,1);
    will-change: clip-path;
}

/* Fundo em gradiente com leve "respiração" */
.card-progress-gradient {
    position: absolute;
    inset: -20%;
    background: radial-gradient(120% 120% at 0% 0%, #ff4d9d 0%, #7a5cff 45%, #00d4ff 100%);
    filter: saturate(1.15) contrast(1.05);
    opacity: .35;
    animation: liquidGlow 10s ease-in-out infinite alternate;
}

/* Listras sutis para dar textura ao líquido */
.card-progress-stripes {
    position: absolute;
    inset: 0;
    background: repeating-linear-gradient(
        135deg,
        rgba(255,255,255,.15) 0 8px,
        rgba(255,255,255,0) 8px 16px
    );
    mix-blend-mode: soft-light;
    animation: stripesMove 3s linear infinite;
}

/* Ondas no topo do líquido */
.card-progress-wave {
    position: absolute;
    left: -25%;
    width: 150%;
    bottom: 0;
    height: 48px;
    background-repeat: repeat-x;
    background-position: 0 100%;
    background-size: 600px 48px;
    opacity: .6;
    filter: drop-shadow(0 6px 8px rgba(0,0,0,.08));
}

.card-progress-wave.wave-1 {
    background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 600 48' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath fill='%23ffffff' fill-opacity='0.9' d='M0 24c30 12 90 12 120 0s90-12 120 0 90 12 120 0 90-12 120 0v24H0z'/%3E%3C/svg%3E");
    animation: wave1 8s linear infinite;
}

.card-progress-wave.wave-2 {
    background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 600 48' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath fill='%23ffffff' fill-opacity='0.6' d='M0 28c40 10 80 10 120 0s80-10 120 0 80 10 120 0 80-10 120 0v20H0z'/%3E%3C/svg%3E");
    animation: wave2 11s linear infinite reverse;
    opacity: .5;
}

/* Garantir que o conteúdo do card fique acima do overlay */
.checkout-card-content,
.checkout-page-card > *:not(.card-progress-overlay) {
    position: relative;
    z-index: 1;
}

@keyframes wave1 { 
    to { background-position-x: -600px; } 
}

@keyframes wave2 { 
    to { background-position-x: 600px; } 
}

@keyframes stripesMove { 
    to { background-position: 200% 0; } 
}

@keyframes liquidGlow {
    0% { transform: translate3d(-2%, -2%, 0) scale(1); }
    100% { transform: translate3d(2%, 2%, 0) scale(1.05); }
}

/* ====================================================================
   DESIGN PROFISSIONAL DOS CARDS (upgrade visual premium)
   ==================================================================== */

/* Base dos cards: vidro + borda gradiente + microinterações */
.checkout-card,
.checkout-page-card {
    background: color-mix(in srgb, var(--color-surface) 92%, black 8%);
    border-radius: var(--radius-xl);
    box-shadow: var(--shadow-low);
    transform: translateZ(0);
    transition: transform .18s ease, box-shadow .18s ease, background .18s ease;
    backdrop-filter: saturate(1.12) blur(6px);
    isolation: isolate; /* garante z-index interno coerente */
}

/* Borda gradiente 1px com máscara (leve e premium) */
.checkout-card::before,
.checkout-page-card::before {
    content: "";
    position: absolute;
    inset: 0;
    border-radius: inherit;
    padding: 1px;
    background: conic-gradient(from 140deg, #ff4d9d, #7a5cff, #00d4ff, #ff4d9d);
    -webkit-mask: 
        linear-gradient(#000 0 0) content-box, 
        linear-gradient(#000 0 0);
    -webkit-mask-composite: xor;
            mask-composite: exclude;
    opacity: .22;
    pointer-events: none;
    z-index: 0;
}

.checkout-card:hover,
.checkout-page-card:hover {
    transform: translateY(-2px);
    box-shadow: var(--shadow-md);
}

.checkout-card:active,
.checkout-page-card:active {
    transform: translateY(-1px) scale(0.997);
}

.checkout-card:focus-within,
.checkout-page-card:focus-within {
    box-shadow: 0 0 0 2px rgba(122,92,255,.22), var(--shadow-md);
}

/* Garantir que conteúdo fique acima do before (borda gradiente) */
.checkout-card > *:not(.card-progress-overlay),
.checkout-page-card > *:not(.card-progress-overlay) {
    position: relative;
    z-index: 1;
}

/* Header limpo: ícone + título + pílula + meta */
.checkout-card-header,
.card-header {
    display: flex;
    align-items: center;
    gap: var(--spacing-3);
    padding: 16px 18px 8px;
}

.checkout-card-title,
.card-title {
    font-weight: 700;
    letter-spacing: .1px;
    color: var(--color-text);
    flex: 1;
}

.checkout-card-meta,
.card-meta {
    font-size: 12px;
    color: var(--color-text-muted);
    margin-left: auto;
}

/* Pílulas de status */
.status-pill {
    font-size: 12px;
    padding: 6px 10px;
    border-radius: var(--radius-pill);
    border: 1px solid var(--color-border);
    background: color-mix(in srgb, var(--color-surface-elevated) 88%, black 12%);
    color: var(--color-text);
    display: inline-flex;
    align-items: center;
    gap: 6px;
}

.status-pill .dot {
    width: 8px; 
    height: 8px; 
    border-radius: 50%;
}

.status-pill.is-processing .dot { 
    background: #7a5cff; 
    box-shadow: 0 0 8px rgba(122,92,255,.6); 
}

.status-pill.is-complete .dot { 
    background: #22c55e; 
    box-shadow: 0 0 8px rgba(34,197,94,.5); 
}

.status-pill.is-error .dot { 
    background: #ef4444; 
    box-shadow: 0 0 8px rgba(239,68,68,.5); 
}

/* Corpo e ações */
.checkout-card-body,
.card-body {
    padding: 0 18px 12px;
    color: var(--color-text-muted);
}

.checkout-card-actions {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    grid-auto-rows: minmax(60px, auto);
    gap: 10px;
    padding: 10px 18px 16px;
    width: 100%;
}

.card-actions {
    display: flex;
    gap: 10px;
    padding: 10px 18px 16px;
    justify-content: flex-end;
}

/* Estado PROCESSANDO: halo suave + barra superior animada */
.checkout-card.is-processing,
.checkout-page-card.is-processing {
    box-shadow: 0 0 0 2px rgba(122,92,255,.16), var(--shadow-md);
}

.checkout-card.is-processing::after,
.checkout-page-card.is-processing::after {
    content: "";
    position: absolute;
    inset: 0 0 auto 0;
    height: 3px;
    background: linear-gradient(90deg, #ff4d9d, #7a5cff, #00d4ff);
    background-size: 200% 100%;
    animation: loadingStripe 1.6s linear infinite;
    opacity: .85;
    z-index: 2;
    border-radius: var(--radius-xl) var(--radius-xl) 0 0;
}

/* Shine sutil ao passar o mouse */
.checkout-card .card-shine,
.checkout-page-card .card-shine {
    position: absolute;
    inset: 0;
    pointer-events: none;
    z-index: 1;
    background: linear-gradient(120deg, transparent 30%, rgba(255,255,255,.07) 50%, transparent 70%);
    transform: translateX(-100%);
    transition: transform .6s ease;
    border-radius: inherit;
}

.checkout-card:hover .card-shine,
.checkout-page-card:hover .card-shine {
    transform: translateX(100%);
}

/* Botão primário refinado (compatível com sistema existente) */
.btn-primary,
.checkout-card .btn-primary {
    background: linear-gradient(180deg, var(--color-primary), var(--color-primary-dark));
    color: #fff;
    border: 1px solid rgba(255,255,255,.06);
    border-radius: 12px;
    padding: 10px 14px;
    font-weight: 600;
    box-shadow: 0 6px 16px rgba(37,99,235,.25);
    transition: transform .16s ease, box-shadow .16s ease, filter .16s ease;
}

.btn-primary:hover,
.checkout-card .btn-primary:hover {
    transform: translateY(-1px);
    filter: brightness(1.05);
}

.btn-primary:active,
.checkout-card .btn-primary:active {
    transform: translateY(0);
    box-shadow: 0 3px 10px rgba(37,99,235,.2);
}

.btn-primary:disabled,
.checkout-card .btn-primary:disabled {
    opacity: .6;
    cursor: not-allowed;
}

/* Skeleton elegante para carregamento */
.skeleton-card {
    border-radius: var(--radius-xl);
    background: linear-gradient(90deg, rgba(255,255,255,.06), rgba(255,255,255,.12), rgba(255,255,255,.06));
    background-size: 200% 100%;
    animation: shimmer 1.4s ease-in-out infinite;
}

/* Motion: acessibilidade */
@media (prefers-reduced-motion: reduce) {
    .checkout-card, 
    .checkout-page-card,
    .btn-primary, 
    .card-progress-overlay,
    .card-progress-wave, 
    .card-progress-stripes {
        animation: none !important;
        transition: none !important;
    }
}

@keyframes loadingStripe {
    to { background-position-x: -200%; }
}

@keyframes shimmer {
    to { background-position-x: -200%; }
}

/* ====================================================================
   CORES VIBRANTES E ALMA NOS CARDS
   ==================================================================== */

/* Acento por card (cores vivas e consistentes) */
.checkout-card,
.checkout-page-card {
    --accent: #7a5cff;
    --accent-2: #00d4ff;
}

/* Borda gradiente agora usa o acento do card */
.checkout-card::before,
.checkout-page-card::before {
    background: conic-gradient(from 140deg, var(--accent), var(--accent-2), var(--accent));
    opacity: .28;
}

/* Barra superior de acento (sempre visível; some durante processamento para não duplicar) */
.checkout-card .accent-bar,
.checkout-page-card .accent-bar {
    position: absolute;
    inset: 0 0 auto 0;
    height: 4px;
    background: linear-gradient(90deg, var(--accent), var(--accent-2));
    border-radius: var(--radius-xl) var(--radius-xl) 0 0;
    opacity: .85;
    z-index: 2;
    pointer-events: none;
}

.checkout-card.is-processing .accent-bar,
.checkout-page-card.is-processing .accent-bar {
    opacity: 0;
}

/* Blob de cor no fundo (vida/volume) */
.checkout-card .accent-blob,
.checkout-page-card .accent-blob {
    position: absolute;
    right: -20%;
    bottom: -20%;
    width: 55%;
    aspect-ratio: 1/1;
    background:
      radial-gradient(closest-side at 30% 30%, color-mix(in srgb, var(--accent), transparent 70%), transparent 70%),
      radial-gradient(closest-side at 70% 70%, color-mix(in srgb, var(--accent-2), transparent 75%), transparent 70%);
    filter: blur(22px) saturate(1.15);
    z-index: 0;
    pointer-events: none;
}

/* Stripe de processamento usa o acento */
.checkout-card.is-processing::after,
.checkout-page-card.is-processing::after {
    background: linear-gradient(90deg, var(--accent), var(--accent-2));
    background-size: 200% 100%;
}

/* Pílula de status processando passa a usar o acento */
.status-pill.is-processing .dot { 
    background: var(--accent);
    box-shadow: 0 0 10px color-mix(in srgb, var(--accent), transparent 40%);
}

/* Botão dentro do card herda o acento (sem quebrar os globais) */
.checkout-card .btn-primary,
.checkout-page-card .btn-primary {
    background: linear-gradient(180deg, var(--accent), color-mix(in srgb, var(--accent-2), black 10%));
    box-shadow: 0 8px 18px color-mix(in srgb, var(--accent), transparent 70%);
}

/* Líquido tinge pelo acento quando estiver dentro do card */
.checkout-card .card-progress-gradient,
.checkout-page-card .card-progress-gradient {
    background: radial-gradient(120% 120% at 0% 0%, var(--accent) 0%, var(--accent-2) 60%, #00d4ff 100%);
}

/* ====================================================================
   MODAL DE SELEÇÃO DE TEMPLATE
   ==================================================================== */
.template-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 20px;
}

.template-card {
    display: flex;
    flex-direction: column;
    gap: 12px;
    border-radius: var(--radius-xl);
    padding: 16px;
    background: color-mix(in srgb, var(--color-surface-elevated) 88%, black 12%);
    border: 2px solid var(--color-border);
    text-align: left;
    cursor: pointer;
    transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease;
    position: relative;
}

.template-card:hover {
    transform: translateY(-3px);
    box-shadow: var(--shadow-md);
    border-color: var(--color-border-strong);
}

.template-card.is-selected {
    border-color: rgba(122, 92, 255, 0.6);
    box-shadow: 0 0 0 3px rgba(122, 92, 255, 0.2), var(--shadow-md);
    transform: translateY(-3px);
}

.template-card.is-selected::after {
    content: "✓";
    position: absolute;
    top: 10px;
    right: 10px;
    width: 28px;
    height: 28px;
    background: linear-gradient(135deg, #7a5cff, #00d4ff);
    color: white;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 700;
    font-size: 16px;
    box-shadow: 0 4px 12px rgba(122, 92, 255, 0.4);
}

.template-thumb {
    border-radius: 12px;
    height: 220px;
    overflow: hidden;
    background: linear-gradient(135deg, #1f2937, #0f172a);
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
}

/* Preview mini do checkout dentro do card */
.template-preview {
    width: 80%;
    height: 85%;
    background: #f5f5f7;
    border-radius: 12px;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 0;
    border: 1px solid rgba(255, 255, 255, 0.2);
    overflow: hidden;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
}

/* Template 1 (Padrão) - Estilo CheckLink com logo no topo */
.template-thumb--default .template-preview {
    background: linear-gradient(180deg, #ffffff 0%, #f8f9fa 100%);
}

.template-thumb--default .preview-header {
    height: 32px;
    background: #ffffff;
    border-bottom: 1px solid #e5e7eb;
    border-radius: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
    flex-shrink: 0;
}

.template-thumb--default .preview-header::before {
    content: "CheckLink";
    position: absolute;
    font-size: 10px;
    font-weight: 700;
    color: #8B5CF6;
    letter-spacing: 0.5px;
}

.template-thumb--default .preview-content {
    flex: 1;
    background: #ffffff;
    padding: 10px;
    display: flex;
    flex-direction: column;
    gap: 8px;
    justify-content: center;
}

.template-thumb--default .preview-content::before {
    content: "";
    width: 70%;
    height: 14px;
    background: linear-gradient(90deg, #e5e7eb 0%, #f3f4f6 100%);
    border-radius: 4px;
    margin: 0 auto;
}

.template-thumb--default .preview-content::after {
    content: "";
    width: 85%;
    height: 10px;
    background: linear-gradient(90deg, #f3f4f6 0%, #e5e7eb 100%);
    border-radius: 3px;
    margin: 4px auto 0;
}

.template-thumb--default .preview-button {
    height: 28px;
    background: linear-gradient(135deg, #8B5CF6 0%, #7C3AED 100%);
    border-radius: 20px;
    margin: 0 10px 10px;
    box-shadow: 0 4px 12px rgba(139, 92, 246, 0.4);
    flex-shrink: 0;
}

/* Template 2 (Alternativo) - Estilo moderno com banner colorido e avatar */
.template-thumb--alt .template-preview {
    background: #f5f5f7;
    padding: 0;
}

.template-thumb--alt .preview-header {
    height: 55px;
    background: linear-gradient(135deg, #ff7a36 0%, #ffb072 50%, #f7a58b 100%);
    border-radius: 0;
    position: relative;
    flex-shrink: 0;
}

.template-thumb--alt .preview-header::after {
    content: "";
    position: absolute;
    bottom: -22px;
    left: 14px;
    width: 44px;
    height: 44px;
    background: #ffffff;
    border-radius: 50%;
    border: 3px solid #ffffff;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
    z-index: 2;
}

.template-thumb--alt .preview-content {
    flex: 1;
    background: #ffffff;
    padding: 32px 12px 8px;
    display: flex;
    flex-direction: column;
    gap: 7px;
    justify-content: center;
}

.template-thumb--alt .preview-content::before {
    content: "";
    width: 55%;
    height: 11px;
    background: linear-gradient(90deg, #e5e7eb 0%, #f3f4f6 100%);
    border-radius: 4px;
    margin: 0 auto;
}

.template-thumb--alt .preview-content::after {
    content: "";
    width: 75%;
    height: 8px;
    background: linear-gradient(90deg, #f3f4f6 0%, #e5e7eb 100%);
    border-radius: 3px;
    margin: 0 auto;
}

.template-thumb--alt .preview-button {
    height: 30px;
    background: linear-gradient(135deg, #f28f50 0%, #fcd3aa 50%, #f7a58b 100%);
    border-radius: 18px;
    margin: 0 12px 10px;
    box-shadow: 0 4px 12px rgba(242, 143, 80, 0.4);
    flex-shrink: 0;
}

.template-name {
    font-weight: 700;
    font-size: 16px;
    color: var(--color-text);
}

.template-desc {
    font-size: 13px;
    color: var(--color-text-muted);
    line-height: 1.4;
}

/* Responsivo */
@media (max-width: 768px) {
    .template-grid {
        grid-template-columns: 1fr;
    }
}

/* =========================================
   MOBILE PERFORMANCE MODE
   Otimização agressiva para celulares
   Mantém visual bonito mas remove animações/blur pesados
   ========================================= */
@media (max-width: 720px) {
    /* ===== FUNDO SIMPLIFICADO ===== */
    /* Remove animações de fundo pesadas que matam FPS em Android */
    body {
        background: #0b1220;
    }

    body::before,
    body::after {
        animation: none !important;
        opacity: 0.3 !important; /* Mantém leve mas visível */
        filter: none !important;
    }

    /* Remove partículas animadas */
    .animated-background,
    .animated-background::before,
    .animated-background::after {
        animation: none !important;
        opacity: 0 !important;
        display: none !important;
    }

    /* ===== GLASSMORPHISM REMOVIDO ===== */
    /* Backdrop-filter é caríssimo em mobile - trocar por fundo sólido */
    .header {
        backdrop-filter: none !important;
        -webkit-backdrop-filter: none !important;
        background: rgba(15, 23, 42, 0.98);
        box-shadow: 0 2px 8px rgba(0, 0, 0, 0.3);
    }

    .sidebar {
        backdrop-filter: none !important;
        -webkit-backdrop-filter: none !important;
        background: rgba(17, 24, 39, 0.98);
        box-shadow: none;
    }

    .metric-card,
    .checkout-card,
    .integration-card,
    .card,
    .financial-card,
    .attendants-card,
    .fee-card,
    .metrics-card {
        backdrop-filter: none !important;
        -webkit-backdrop-filter: none !important;
        background: rgba(17, 24, 39, 0.95);
        box-shadow: 0 4px 12px rgba(0, 0, 0, 0.4) !important;
    }

    /* ===== MODAIS SIMPLIFICADOS ===== */
    .modal-overlay {
        backdrop-filter: none !important;
        -webkit-backdrop-filter: none !important;
        background: rgba(0, 0, 0, 0.85);
    }

    .modal-content {
        backdrop-filter: none !important;
        -webkit-backdrop-filter: none !important;
        background: rgba(17, 24, 39, 0.98);
        box-shadow: 0 8px 24px rgba(0, 0, 0, 0.6);
    }

    /* ===== DESABILITAR ANIMAÇÕES DECORATIVAS ===== */
    /* Remove transitions pesadas que causam repaints */
    .metric-card,
    .integration-card,
    .checkout-card,
    .card {
        transition: none !important;
    }

    /* Remove hovers com transform (causa reflow) */
    .metric-card:hover,
    .integration-card:hover,
    .checkout-card:hover,
    .card:hover {
        transform: none !important;
    }

    /* ===== SOMBRAS LEVES ===== */
    /* Reduz blur radius das sombras */
    .btn,
    .btn-primary,
    .btn-secondary {
        box-shadow: 0 2px 8px rgba(0, 0, 0, 0.3) !important;
    }

    /* ===== AURORA EFFECTS DESLIGADOS ===== */
    .main-wrapper.dashboard-aurora::before,
    .main-wrapper.dashboard-aurora::after,
    .dashboard-aurora .main-content::after {
        animation: none !important;
        opacity: 0 !important;
        display: none !important;
    }

    /* ===== SCROLL OTIMIZADO ===== */
    /* Força aceleração por hardware */
    .main-content,
    .sidebar-nav,
    .modal-body {
        -webkit-overflow-scrolling: touch;
        will-change: scroll-position;
    }

    /* ===== REDUZ BLUR EM INPUTS/FORMS ===== */
    input,
    select,
    textarea {
        backdrop-filter: none !important;
        -webkit-backdrop-filter: none !important;
    }

    /* ===== GRÁFICOS SIMPLIFICADOS ===== */
    .chart-container {
        will-change: auto; /* Remove will-change que força layers */
    }

    /* ===== LOADING STATES SIMPLES ===== */
    .loading-state i {
        animation-duration: 1s !important; /* Mais lento = menos CPU */
    }

    .loading-screen,
    .loading-screen.loading-lite {
        background: #0b1220;
    }
    
    .loading-screen.loading-lite .loading-content,
    .loading-screen .loading-content {
        gap: 1rem;
        animation: none;
    }
    
    .loading-screen.loading-lite .loading-logo,
    .loading-screen .loading-logo {
        width: 140px;
        animation: none;
    }
    
    .loading-screen.loading-lite .loading-spinner,
    .loading-screen .loading-spinner {
        display: none;
    }
    
    .loading-screen.loading-lite .loading-text,
    .loading-screen .loading-text {
        font-size: 1rem;
        opacity: 0.85;
    }
    
    /* ===== OTIMIZAÇÃO DE GRÁFICOS ===== */
    /* Remove skeleton loaders pesados dos gráficos */
    .chart-skeleton,
    .preview-skeleton,
    .skeleton-loader {
        display: none !important;
    }

    /* Simplifica container de gráficos */
    .chart-card,
    .chart-container {
        will-change: auto !important;
        transform: none !important;
        contain: layout paint;
    }

    /* Canvas com rendering otimizado */
    canvas {
        image-rendering: auto !important;
        image-rendering: optimizeSpeed !important;
    }
    
    .chart-lazy-placeholder {
        position: absolute;
        inset: 0;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        text-align: center;
        padding: 16px;
        gap: 6px;
        border-radius: inherit;
        background: rgba(11, 18, 32, 0.92);
        color: #cbd5f5;
        font-size: 0.85rem;
        z-index: 5;
    }
    
    .chart-lazy-placeholder i {
        font-size: 1.2rem;
        color: #60a5fa;
    }
}

/* ============================================
 * PÁGINA DE AJUDA / SUPORTE
 * Central de Suporte profissional com WhatsApp
 * ============================================ */

.help-page {
    margin-top: var(--spacing-6);
    animation: fadeIn 0.4s ease;
}

.help-content {
    display: flex;
    justify-content: center;
    align-items: flex-start;
    padding: var(--spacing-4) 0;
}

.help-main-card {
    width: 100%;
    max-width: 720px;
    padding: 32px 32px 28px;
    border-radius: 20px;
    background: linear-gradient(135deg, rgba(10, 18, 40, 0.98) 0%, rgba(15, 23, 50, 0.95) 100%);
    border: 1px solid rgba(59, 130, 246, 0.35);
    box-shadow: 
        0 20px 50px rgba(15, 23, 42, 0.9),
        inset 0 1px 0 rgba(255, 255, 255, 0.05);
    backdrop-filter: blur(16px);
    position: relative;
    overflow: hidden;
}

.help-main-card::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 4px;
    background: linear-gradient(90deg, 
        var(--accent-primary), 
        var(--accent-secondary), 
        var(--accent-primary)
    );
    background-size: 200% 100%;
    animation: shimmer 3s linear infinite;
}

/* Ícone principal WhatsApp */
.help-icon {
    width: 80px;
    height: 80px;
    margin: 0 auto 20px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: linear-gradient(135deg, #22c55e, #16a34a);
    border-radius: 50%;
    box-shadow: 
        0 12px 28px rgba(22, 163, 74, 0.45),
        0 0 0 8px rgba(22, 163, 74, 0.15);
    animation: pulse 2s ease-in-out infinite;
}

.help-icon i {
    font-size: 2.5rem;
    color: #ecfdf5;
}

@keyframes pulse {
    0%, 100% {
        transform: scale(1);
        box-shadow: 
            0 12px 28px rgba(22, 163, 74, 0.45),
            0 0 0 8px rgba(22, 163, 74, 0.15);
    }
    50% {
        transform: scale(1.05);
        box-shadow: 
            0 14px 32px rgba(22, 163, 74, 0.55),
            0 0 0 12px rgba(22, 163, 74, 0.2);
    }
}

.help-main-card h3 {
    text-align: center;
    font-size: 1.75rem;
    font-weight: 700;
    margin-bottom: 12px;
    background: linear-gradient(135deg, #f0f9ff, #bae6fd);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

.help-description {
    text-align: center;
    color: var(--color-text-muted);
    line-height: 1.6;
    margin-bottom: 24px;
    font-size: 1rem;
}

/* Botão WhatsApp no topo (logo após descrição) */
.whatsapp-btn-top {
    margin-bottom: 32px;
}

/* Botão WhatsApp no rodapé (antes da nota) */
.whatsapp-btn-bottom {
    margin-top: 28px;
    margin-bottom: 16px;
}

/* Grid de features */
.help-features {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 16px;
    margin-bottom: 28px;
}

.help-feature-item {
    display: flex;
    gap: 12px;
    padding: 16px;
    background: rgba(255, 255, 255, 0.02);
    border: 1px solid rgba(255, 255, 255, 0.06);
    border-radius: 12px;
    transition: all 0.3s ease;
}

.help-feature-item:hover {
    background: rgba(59, 130, 246, 0.08);
    border-color: rgba(59, 130, 246, 0.25);
    transform: translateY(-2px);
}

.help-feature-icon {
    width: 44px;
    height: 44px;
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    background: linear-gradient(135deg, rgba(59, 130, 246, 0.15), rgba(14, 165, 233, 0.15));
    border: 1px solid rgba(59, 130, 246, 0.3);
    border-radius: 10px;
}

.help-feature-icon i {
    font-size: 1.2rem;
    color: var(--accent-primary);
}

.help-feature-content h4 {
    font-size: 0.95rem;
    font-weight: 600;
    margin-bottom: 4px;
    color: var(--color-text);
}

.help-feature-content p {
    font-size: 0.85rem;
    color: var(--color-text-muted);
    line-height: 1.4;
    margin: 0;
}

/* Dicas */
.help-tips {
    padding: 20px;
    background: rgba(234, 179, 8, 0.08);
    border: 1px solid rgba(234, 179, 8, 0.25);
    border-radius: 14px;
    margin-bottom: 28px;
}

.help-tips h4 {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 1rem;
    font-weight: 600;
    margin-bottom: 12px;
    color: #fef3c7;
}

.help-tips h4 i {
    color: #fbbf24;
}

.help-tips ul {
    list-style: none;
    padding: 0;
    margin: 0;
}

.help-tips li {
    padding-left: 20px;
    margin-bottom: 8px;
    font-size: 0.9rem;
    color: var(--color-text-muted);
    position: relative;
    line-height: 1.5;
}

.help-tips li::before {
    content: '→';
    position: absolute;
    left: 0;
    color: #fbbf24;
    font-weight: bold;
}

.help-tips li strong {
    color: var(--color-text);
    font-weight: 600;
}

/* Botão WhatsApp - DESTAQUE */
.whatsapp-support-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    width: 100%;
    padding: 16px 24px;
    border-radius: 999px;
    background: linear-gradient(135deg, #22c55e, #16a34a);
    color: #ecfdf5;
    font-weight: 700;
    font-size: 1.05rem;
    text-decoration: none;
    box-shadow: 
        0 16px 40px rgba(22, 163, 74, 0.55),
        inset 0 -2px 0 rgba(0, 0, 0, 0.2),
        inset 0 1px 0 rgba(255, 255, 255, 0.2);
    transition: all 0.2s ease;
    position: relative;
    overflow: hidden;
}

.whatsapp-support-btn::before {
    content: '';
    position: absolute;
    top: 0;
    left: -100%;
    width: 100%;
    height: 100%;
    background: linear-gradient(90deg, 
        transparent, 
        rgba(255, 255, 255, 0.2), 
        transparent
    );
    transition: left 0.5s ease;
}

.whatsapp-support-btn:hover::before {
    left: 100%;
}

.whatsapp-support-btn i {
    font-size: 1.4rem;
}

.whatsapp-support-btn:hover {
    transform: translateY(-2px);
    box-shadow: 
        0 20px 50px rgba(22, 163, 74, 0.65),
        inset 0 -2px 0 rgba(0, 0, 0, 0.2),
        inset 0 1px 0 rgba(255, 255, 255, 0.3);
    filter: brightness(1.08);
}

.whatsapp-support-btn:active {
    transform: translateY(0);
    box-shadow: 
        0 10px 30px rgba(22, 163, 74, 0.5),
        inset 0 -1px 0 rgba(0, 0, 0, 0.2);
}

/* Nota de rodapé */
.help-footer-note {
    margin-top: 16px;
    padding: 12px 16px;
    background: rgba(59, 130, 246, 0.08);
    border: 1px solid rgba(59, 130, 246, 0.2);
    border-radius: 10px;
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 0.85rem;
    color: var(--color-text-muted);
    text-align: center;
    line-height: 1.4;
}

.help-footer-note i {
    color: var(--accent-primary);
    flex-shrink: 0;
}

/* Responsivo Mobile */
@media (max-width: 720px) {
    .help-main-card {
        padding: 24px 20px 20px;
        border-radius: 16px;
    }

    .help-icon {
        width: 64px;
        height: 64px;
        margin-bottom: 16px;
    }

    .help-icon i {
        font-size: 2rem;
    }

    .help-main-card h3 {
        font-size: 1.4rem;
    }

    .help-description {
        font-size: 0.9rem;
        margin-bottom: 18px;
    }

    .whatsapp-btn-top {
        margin-bottom: 24px;
    }

    .whatsapp-btn-bottom {
        margin-top: 20px;
        margin-bottom: 14px;
    }

    .help-features {
        grid-template-columns: 1fr;
        gap: 12px;
        margin-bottom: 20px;
    }

    .help-feature-item {
        padding: 14px;
    }

    .help-feature-icon {
        width: 40px;
        height: 40px;
    }

    .help-tips {
        padding: 16px;
        margin-bottom: 20px;
    }

    .help-tips h4 {
        font-size: 0.95rem;
    }

    .help-tips li {
        font-size: 0.85rem;
    }

    .whatsapp-support-btn {
        padding: 14px 20px;
        font-size: 1rem;
    }

    .help-footer-note {
        padding: 10px 14px;
        font-size: 0.8rem;
        flex-direction: column;
        text-align: center;
    }
}

@media (max-width: 480px) {
    .help-main-card {
        padding: 20px 16px 18px;
    }

    .help-feature-content h4 {
        font-size: 0.9rem;
    }

    .help-feature-content p {
        font-size: 0.8rem;
    }
}

/* =============================================
   TOOLBAR DE SELEÇÃO DE CHECKOUTS
   ============================================= */

.selection-toolbar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    margin-top: 16px;
    padding: 14px 20px;
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: 12px;
    box-shadow: 0 8px 20px rgba(15, 23, 42, 0.12);
    position: sticky;
    bottom: 16px;
    z-index: 20;
    transition: all 0.3s ease;
}

.selection-toolbar .selection-info {
    font-size: 0.875rem;
    font-weight: 600;
    color: var(--color-text-primary);
    white-space: nowrap;
}

.selection-toolbar .selection-info #selection-count {
    color: var(--color-primary);
}

.selection-toolbar .selection-actions {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-wrap: nowrap;
}

.selection-toolbar .selection-actions button {
    white-space: nowrap;
    font-size: 0.875rem;
    padding: 8px 16px;
    border-radius: 8px;
    display: flex;
    align-items: center;
    gap: 6px;
    transition: all 0.2s;
}

.selection-toolbar .selection-actions button i {
    font-size: 0.9rem;
}

.selection-toolbar .selection-actions button:disabled {
    opacity: 0.5;
    cursor: not-allowed;
}

/* 🎨 Esconder botão de etiqueta de cor no modo seleção */
.checkout-page-card.selection-mode-active .checkout-color-label-btn {
    display: none !important;
}

/* =============================================
   🎯 CARDS SELECIONADOS - DESTAQUE VERMELHO
   ============================================= */

/* Card selecionado - TODOS OS TIPOS (normal, custom, laranjinha) - ALTA ESPECIFICIDADE */
.checkout-page-card.selected,
.checkout-page-card.checkout-normal.selected,
.checkout-page-card.checkout-custom.selected,
.checkout-page-card.template-laranjinha.selected,
.checkout-page-card.checkout-has-custom-color.selected {
    border: 3px solid #ef4444 !important;
    background: 
        linear-gradient(135deg, rgba(239, 68, 68, 0.12) 0%, rgba(239, 68, 68, 0.08) 100%),
        radial-gradient(circle at 20% 50%, rgba(239, 68, 68, 0.15) 0%, transparent 50%),
        radial-gradient(circle at 80% 80%, rgba(239, 68, 68, 0.12) 0%, transparent 50%),
        var(--color-surface) !important;
    box-shadow: 
        0 0 0 4px rgba(239, 68, 68, 0.25),
        0 6px 24px rgba(239, 68, 68, 0.35),
        inset 0 0 80px rgba(239, 68, 68, 0.08) !important;
    transform: scale(0.98) !important;
    animation: selectedPulse 2s ease-in-out infinite !important;
}

/* Barra superior VERMELHA quando selecionado */
.checkout-page-card.selected::before,
.checkout-page-card.checkout-normal.selected::before,
.checkout-page-card.checkout-custom.selected::before,
.checkout-page-card.template-laranjinha.selected::before,
.checkout-page-card.checkout-has-custom-color.selected::before {
    opacity: 1 !important;
    background: linear-gradient(90deg, #ef4444, #f87171, #ef4444) !important;
    height: 6px !important;
    box-shadow: 0 2px 12px rgba(239, 68, 68, 0.6) !important;
}

/* Barra lateral VERMELHA quando selecionado */
.checkout-page-card.selected::after,
.checkout-page-card.checkout-normal.selected::after,
.checkout-page-card.checkout-custom.selected::after,
.checkout-page-card.template-laranjinha.selected::after,
.checkout-page-card.checkout-has-custom-color.selected::after {
    background: linear-gradient(180deg, #ef4444, #f87171, #ef4444) !important;
    width: 6px !important;
    box-shadow: 3px 0 16px rgba(239, 68, 68, 0.7) !important;
}

/* Animação de pulso suave para card selecionado */
@keyframes selectedPulse {
    0%, 100% {
        box-shadow: 
            0 0 0 4px rgba(239, 68, 68, 0.25),
            0 6px 24px rgba(239, 68, 68, 0.35),
            inset 0 0 80px rgba(239, 68, 68, 0.08);
    }
    50% {
        box-shadow: 
            0 0 0 6px rgba(239, 68, 68, 0.35),
            0 8px 32px rgba(239, 68, 68, 0.45),
            inset 0 0 100px rgba(239, 68, 68, 0.12);
    }
}

/* Hover em card selecionado - mantém o vermelho mas intensifica */
.checkout-page-card.selected:hover,
.checkout-page-card.checkout-normal.selected:hover,
.checkout-page-card.checkout-custom.selected:hover,
.checkout-page-card.template-laranjinha.selected:hover,
.checkout-page-card.checkout-has-custom-color.selected:hover {
    border-color: #dc2626 !important;
    background: 
        linear-gradient(135deg, rgba(239, 68, 68, 0.16) 0%, rgba(239, 68, 68, 0.12) 100%),
        radial-gradient(circle at 20% 50%, rgba(239, 68, 68, 0.2) 0%, transparent 50%),
        radial-gradient(circle at 80% 80%, rgba(239, 68, 68, 0.16) 0%, transparent 50%),
        var(--color-surface) !important;
    box-shadow: 
        0 0 0 5px rgba(239, 68, 68, 0.3),
        0 8px 32px rgba(239, 68, 68, 0.45),
        inset 0 0 100px rgba(239, 68, 68, 0.1) !important;
    transform: scale(0.99) !important;
}

/* ============================================
 * BARRA DE PESQUISA DE GATEWAYS
 * ============================================ */

.integration-search-container {
    margin: 0 0 32px 0;
    animation: fadeInDown 0.6s ease;
}

.search-box {
    position: relative;
    max-width: 600px;
    margin: 0 auto;
}

.search-icon {
    position: absolute;
    left: 20px;
    top: 50%;
    transform: translateY(-50%);
    color: var(--color-text-muted);
    font-size: 18px;
    pointer-events: none;
    transition: color 0.3s ease;
}

.search-input {
    width: 100%;
    padding: 16px 60px 16px 56px;
    background: rgba(30, 41, 59, 0.6);
    border: 2px solid rgba(148, 163, 184, 0.12);
    border-radius: var(--radius-md);
    color: var(--color-text);
    font-size: 16px;
    font-weight: 500;
    transition: all 0.3s ease;
    backdrop-filter: blur(12px);
}

.search-input::placeholder {
    color: var(--color-text-muted);
    opacity: 0.7;
}

.search-input:focus {
    outline: none;
    border-color: var(--color-primary);
    background: rgba(30, 41, 59, 0.8);
    box-shadow: 
        0 0 0 4px rgba(37, 99, 235, 0.15),
        0 8px 24px rgba(0, 0, 0, 0.3);
}

.search-input:focus + .search-icon {
    color: var(--color-primary);
}

.clear-search-btn {
    position: absolute;
    right: 16px;
    top: 50%;
    transform: translateY(-50%);
    width: 32px;
    height: 32px;
    background: rgba(148, 163, 184, 0.1);
    border: none;
    border-radius: 50%;
    color: var(--color-text-muted);
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.3s ease;
}

.clear-search-btn:hover {
    background: rgba(239, 68, 68, 0.2);
    color: var(--color-danger);
    transform: translateY(-50%) scale(1.1);
}

.clear-search-btn:active {
    transform: translateY(-50%) scale(0.95);
}

.search-results-info {
    text-align: center;
    margin-top: 16px;
    padding: 12px 20px;
    background: rgba(37, 99, 235, 0.1);
    border: 1px solid rgba(37, 99, 235, 0.2);
    border-radius: var(--radius-md);
    animation: fadeIn 0.3s ease;
}

.search-results-info span {
    color: var(--color-primary-light);
    font-size: 14px;
    font-weight: 600;
}

/* Card escondido (não encontrado na busca) */
.integration-card.hidden {
    display: none !important;
}

/* Animação de entrada */
@keyframes fadeInDown {
    from {
        opacity: 0;
        transform: translateY(-20px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

@keyframes fadeIn {
    from {
        opacity: 0;
    }
    to {
        opacity: 1;
    }
}