/* ==========================================================
V6 PLAY - ESTILO GLOBAL
========================================================== */

:root {
    --bg: #030703;
    --bg-secondary: #071007;

    --card: #0b150b;

    /* IDENTIDADE VERDE */
    --primary: #18C87A;
    --primary-light: #129E60;
    --primary-dark: #0F7A4A;

    --success: #18C87A;
    --danger: #ef4444;
    --warning: #f59e0b;

    --text: #ffffff;
    --text-secondary: #c7d0c3;

    --border: rgba(24, 200, 122, .28);

    --radius: 14px;

    --shadow: 0 15px 35px rgba(0, 0, 0, .45);
}

/* RESET */

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

html {
    scroll-behavior: smooth;
}

body {
    background: var(--bg);
    color: var(--text);
    font-family: 'Inter', sans-serif;
    line-height: 1.6;
}

/* LINKS */

a {
    text-decoration: none;
    color: inherit;
}

/* CONTAINER */

.container {
    width: min(1200px, 92%);
    margin: auto;
}

/* BOTÕES */

.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 12px 22px;
    border-radius: 12px;
    font-weight: 600;
    transition: .3s;
    cursor: pointer;
}

.btn-primary {
    background: var(--primary);
    color: #030703;
}

.btn-primary:hover {
    background: var(--primary-light);
}

.btn-outline {
    border: 1px solid var(--primary);
    color: var(--primary);
}

.btn-outline:hover {
    background: var(--primary-light);
    border-color: var(--primary-light);
    color: #030703;
}

/* HEADER */

.site-header {
    position: sticky;
    top: 0;
    z-index: 999;
    background: #050b05;
    border-bottom: 1px solid var(--border);
}

.navbar-container {
    display: flex;
    align-items: center;
    justify-content: space-between;
    height: 75px;
}

/* LOGO */

.site-logo {
    display: flex;
    align-items: center;
    gap: 10px;
    font-size: 22px;
    font-weight: 700;
}

.logo-icon {
    width: 42px;
    height: 42px;
    background: var(--primary);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #030703;
}

/* MENU */

.main-menu {
    display: flex;
    align-items: center;
    gap: 25px;
}

.main-menu a {
    color: var(--text-secondary);
    transition: .3s;
}

.main-menu a:hover {
    color: var(--primary);
}

.navbar-actions {
    display: flex;
    gap: 12px;
    margin-left: 20px;
}

.menu-toggle {
    display: none;
    background: none;
    border: none;
    color: var(--primary);
    font-size: 24px;
    cursor: pointer;
}

/* FOOTER */

.site-footer {
    margin-top: 80px;
    background: #050b05;
    border-top: 1px solid var(--border);
}

.footer-grid {
    display: grid;
    grid-template-columns: 2fr 1fr 1fr 1.5fr;
    gap: 40px;
    padding: 60px 0;
}

.footer-links {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.footer-links h3 {
    margin-bottom: 10px;
}

.footer-links a {
    color: var(--text-secondary);
}

.footer-links a:hover {
    color: var(--primary);
}

.footer-contact p {
    margin-bottom: 10px;
    color: var(--text-secondary);
}

.footer-bottom {
    border-top: 1px solid var(--border);
    padding: 20px 0;
    text-align: center;
    color: var(--text-secondary);
}

/* Chrome, Edge e Opera */

::-webkit-scrollbar {
    width: 8px;
}

::-webkit-scrollbar-track {
    background: #071007;
}

::-webkit-scrollbar-thumb {
    background: var(--primary);
    border-radius: 20px;
}

::-webkit-scrollbar-thumb:hover {
    background: var(--primary-light);
}

/* Firefox */

html {
    scrollbar-width: thin;
    scrollbar-color: var(--primary) #071007;
}

/* ==========================================================
   FORÇAR IDENTIDADE VERDE KPLAY
   Cor principal: #18C87A
========================================================== */

:root {
    --primary: #18C87A !important;
    --primary-light: #18C87A !important;
    --primary-dark: #129E60 !important;
    --success: #18C87A !important;

    --border: rgba(24, 200, 122, .28) !important;
}

/* BOTÕES PRINCIPAIS */

.btn-primary,
a.btn-primary,
button.btn-primary,
.navbar-actions .btn-primary,
.hero-actions .btn-primary,
.cta-box .btn-primary,
.auth-card .btn-primary {
    background: #18C87A !important;
    border-color: #18C87A !important;
    color: #030703 !important;
    box-shadow: none !important;
}

.btn-primary:hover,
a.btn-primary:hover,
button.btn-primary:hover,
.navbar-actions .btn-primary:hover,
.hero-actions .btn-primary:hover,
.cta-box .btn-primary:hover,
.auth-card .btn-primary:hover {
    background: #129E60 !important;
    border-color: #129E60 !important;
    color: #ffffff !important;
}

/* BOTÕES DE CONTORNO */

.btn-outline,
a.btn-outline,
button.btn-outline,
.navbar-actions .btn-outline,
.hero-actions .btn-outline {
    background: transparent !important;
    border-color: #18C87A !important;
    color: #18C87A !important;
    box-shadow: none !important;
}

.btn-outline:hover,
a.btn-outline:hover,
button.btn-outline:hover,
.navbar-actions .btn-outline:hover,
.hero-actions .btn-outline:hover {
    background: #129E60 !important;
    border-color: #129E60 !important;
    color: #ffffff !important;
}

/* LOGO E ÍCONES */

.logo-icon,
.site-logo .logo-icon {
    background: #18C87A !important;
    color: #030703 !important;
}

.menu-toggle,
.hero-list i,
.plan-benefits i,
.feature-icon,
.step-number,
.stat-card i,
.highlight-card i,
.faq-question i,
.hero-stat i {
    color: #18C87A !important;
}

/* Número dos passos usa fundo verde */

.step-number {
    background: #18C87A !important;
    color: #030703 !important;
}

/* TEXTO DESTACADO DO HERO */

.hero-title span {
    background: none !important;
    background-image: none !important;
    color: #18C87A !important;
    -webkit-text-fill-color: #18C87A !important;
}

/* BADGES */

.hero-badge {
    color: #18C87A !important;
    border-color: rgba(24, 200, 122, .38) !important;
    background: rgba(24, 200, 122, .08) !important;
}

.status-badge {
    color: #18C87A !important;
    background: rgba(24, 200, 122, .10) !important;
}

.status-dot {
    background: #18C87A !important;
    box-shadow: 0 0 12px rgba(24, 200, 122, .55) !important;
}

/* CARDS E BORDAS */

.hero-card,
.hero-stat,
.feature-card,
.step-card,
.plan-card,
.cta-box,
.faq-item,
.stat-card,
.highlight-card,
.auth-card {
    border-color: rgba(24, 200, 122, .28) !important;
}

.feature-card:hover,
.plan-card:hover {
    border-color: #18C87A !important;
}

/* FUNDOS E EFEITOS QUE AINDA ESTAVAM NEON */

.hero {
    background:
        radial-gradient(
            circle at 20% 30%,
            rgba(24, 200, 122, .16),
            transparent 35%
        ),
        radial-gradient(
            circle at 80% 60%,
            rgba(24, 200, 122, .07),
            transparent 30%
        ),
        var(--bg) !important;
}

.hero::before,
.hero-card::before,
.cta-box::before {
    background: rgba(24, 200, 122, .10) !important;
}

/* LINKS */

.main-menu a:hover,
.footer-links a:hover,
.auth-footer a,
.checkbox-group a,
.section-subtitle {
    color: #18C87A !important;
}

/* CAMPOS */

.form-control:focus {
    border-color: #18C87A !important;
    box-shadow: 0 0 0 3px rgba(24, 200, 122, .13) !important;
}

.checkbox-group input {
    accent-color: #18C87A !important;
}

/* ALERTA DE SUCESSO */

.alert-success {
    color: #18C87A !important;
    border-color: rgba(24, 200, 122, .32) !important;
    background: rgba(24, 200, 122, .10) !important;
}

/* BARRA DE ROLAGEM */

::-webkit-scrollbar-thumb {
    background: #18C87A !important;
}

::-webkit-scrollbar-thumb:hover {
    background: #129E60 !important;
}

html {
    scrollbar-color: #18C87A #071007 !important;
}