/* ============================================
   ESPECIALIZATI ACADEMY - DARK THEME
   ============================================ */

:root {
    /* Background Colors - Super Dark */
    --bg-primary: #0a0a0a;
    --bg-secondary: #111111;
    --bg-tertiary: #1a1a1a;
    --bg-card: #141414;
    --bg-hover: #1f1f1f;
    --bg-input: #0f0f0f;
    
    /* Accent Colors */
    --primary: #6366f1;
    --primary-dark: #4f46e5;
    --primary-light: #818cf8;
    --secondary: #8b5cf6;
    --accent: #ec4899;
    --success: #10b981;
    --warning: #f59e0b;
    --danger: #ef4444;
    
    /* Text Colors */
    --text-primary: #ffffff;
    --text-secondary: #a1a1aa;
    --text-tertiary: #71717a;
    --text-muted: #52525b;
    
    /* Border Colors */
    --border: #27272a;
    --border-light: #3f3f46;
    
    /* Gradients */
    --gradient-primary: linear-gradient(135deg, #6366f1 0%, #8b5cf6 100%);
    --gradient-accent: linear-gradient(135deg, #ec4899 0%, #f43f5e 100%);
    --gradient-success: linear-gradient(135deg, #10b981 0%, #14b8a6 100%);
    --gradient-dark: linear-gradient(180deg, #0a0a0a 0%, #1a1a1a 100%);
    
    /* Shadows */
    --shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.5);
    --shadow-md: 0 4px 12px rgba(0, 0, 0, 0.6);
    --shadow-lg: 0 10px 30px rgba(0, 0, 0, 0.7);
    --shadow-xl: 0 20px 40px rgba(0, 0, 0, 0.8);
    --shadow-glow: 0 0 30px rgba(99, 102, 241, 0.4);
    --shadow-glow-accent: 0 0 30px rgba(236, 72, 153, 0.4);
}

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

body {
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen', 'Ubuntu', 'Cantarell', 'Helvetica Neue', sans-serif;
    background: var(--bg-primary);
    color: var(--text-primary);
    line-height: 1.6;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

/* Fix para backgrounds brancos em todas as páginas */
.container, .container-fluid, .container-lg, .row {
    background: transparent !important;
}

/* Fix para cards, panels e boxes */
.card, .panel, .box, .well, .jumbotron {
    background: var(--bg-card) !important;
    border-color: var(--border) !important;
    color: var(--text-primary) !important;
}

/* Fix para listas e menus */
.list-group-item, .dropdown-menu, .dropdown-item {
    background: var(--bg-card) !important;
    border-color: var(--border) !important;
    color: var(--text-primary) !important;
}

.list-group-item:hover, .dropdown-item:hover {
    background: var(--bg-hover) !important;
}

/* Fix para modais */
.modal-content {
    background: var(--bg-card) !important;
    border-color: var(--border) !important;
}

.modal-header, .modal-footer {
    border-color: var(--border) !important;
}

/* Fix para tabelas */
table, .table {
    background: var(--bg-card) !important;
    color: var(--text-primary) !important;
}

table th, .table th {
    background: var(--bg-secondary) !important;
    border-color: var(--border) !important;
    color: var(--text-primary) !important;
}

table td, .table td {
    border-color: var(--border) !important;
    color: var(--text-secondary) !important;
}

table tr:hover, .table tr:hover {
    background: var(--bg-hover) !important;
}

/* Fix para formulários */
input, textarea, select {
    background: var(--bg-input) !important;
    border-color: var(--border) !important;
    color: var(--text-primary) !important;
}

input:focus, textarea:focus, select:focus {
    background: var(--bg-secondary) !important;
    border-color: var(--primary) !important;
}

/* Fix para texto */
h1, h2, h3, h4, h5, h6, p, span, div, a {
    color: inherit;
}

a {
    color: var(--primary);
}

a:hover {
    color: var(--primary-light);
}

/* ============================================
   HEADER & NAVIGATION - Ultra Dark
   ============================================ */

.header-dark {
    background: rgba(10, 10, 10, 0.95);
    border-bottom: 1px solid var(--border);
    backdrop-filter: blur(20px);
    position: sticky;
    top: 0;
    z-index: 1000;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.5);
}

.navbar-dark {
    max-width: 1280px;
    margin: 0 auto;
    padding: 1rem 2rem;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.logo-dark {
    font-size: 1.5rem;
    font-weight: 700;
    background: var(--gradient-primary);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    text-decoration: none;
    transition: all 0.3s ease;
}

.logo-dark:hover {
    filter: brightness(1.2);
    transform: scale(1.05);
}

.nav-links-dark {
    display: flex;
    gap: 2rem;
    list-style: none;
    align-items: center;
}

.nav-links-dark a {
    color: var(--text-secondary);
    text-decoration: none;
    font-weight: 500;
    font-size: 0.95rem;
    transition: all 0.3s ease;
    padding: 0.5rem 1rem;
    border-radius: 0.5rem;
}

.nav-links-dark a:hover {
    color: var(--text-primary);
    background: var(--bg-hover);
}

.nav-cta {
    background: var(--gradient-primary);
    color: white !important;
    padding: 0.75rem 1.5rem !important;
    border-radius: 0.5rem;
    font-weight: 600;
    box-shadow: var(--shadow-glow);
    transition: all 0.3s ease;
}

.nav-cta:hover {
    transform: translateY(-2px);
    box-shadow: var(--shadow-glow), 0 10px 25px rgba(99, 102, 241, 0.3);
}

/* ============================================
   HERO SECTION - Dark & Bold
   ============================================ */

.hero-dark {
    background: var(--gradient-dark);
    padding: 8rem 2rem;
    text-align: center;
    position: relative;
    overflow: hidden;
}

.hero-dark::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: radial-gradient(circle at 50% 0%, rgba(99, 102, 241, 0.1) 0%, transparent 60%);
    pointer-events: none;
}

.hero-content-dark {
    max-width: 900px;
    margin: 0 auto;
    position: relative;
    z-index: 1;
}

.hero-title-dark {
    font-size: 4rem;
    font-weight: 800;
    line-height: 1.1;
    margin-bottom: 1.5rem;
    background: linear-gradient(135deg, #ffffff 0%, #a1a1aa 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

.hero-highlight {
    background: var(--gradient-primary);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

.hero-subtitle-dark {
    font-size: 1.25rem;
    color: var(--text-secondary);
    margin-bottom: 3rem;
    line-height: 1.8;
}

.hero-buttons {
    display: flex;
    gap: 1rem;
    justify-content: center;
    flex-wrap: wrap;
}

/* ============================================
   BUTTONS - Modern Dark Style
   ============================================ */

.btn-dark-primary {
    background: var(--gradient-primary);
    color: white;
    padding: 1rem 2.5rem;
    border: none;
    border-radius: 0.75rem;
    font-size: 1.1rem;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.3s ease;
    box-shadow: var(--shadow-glow);
    text-decoration: none;
    display: inline-block;
}

.btn-dark-primary:hover {
    transform: translateY(-3px);
    box-shadow: var(--shadow-glow), 0 15px 35px rgba(99, 102, 241, 0.4);
}

.btn-dark-secondary {
    background: var(--bg-card);
    color: white;
    padding: 1rem 2.5rem;
    border: 2px solid var(--border-light);
    border-radius: 0.75rem;
    font-size: 1.1rem;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.3s ease;
    text-decoration: none;
    display: inline-block;
}

.btn-dark-secondary:hover {
    background: var(--bg-hover);
    border-color: var(--primary);
    transform: translateY(-2px);
}

/* ============================================
   AUTH PAGES - Dark Login/Register
   ============================================ */

.auth-page-dark {
    min-height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--bg-primary);
    padding: 2rem;
    position: relative;
    overflow: hidden;
}

.auth-page-dark::before {
    content: '';
    position: absolute;
    top: -50%;
    right: -20%;
    width: 600px;
    height: 600px;
    background: radial-gradient(circle, rgba(99, 102, 241, 0.15) 0%, transparent 70%);
    border-radius: 50%;
    pointer-events: none;
}

.auth-page-dark::after {
    content: '';
    position: absolute;
    bottom: -50%;
    left: -20%;
    width: 600px;
    height: 600px;
    background: radial-gradient(circle, rgba(139, 92, 246, 0.15) 0%, transparent 70%);
    border-radius: 50%;
    pointer-events: none;
}

.auth-card-dark {
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: 1.5rem;
    padding: 3rem;
    width: 100%;
    max-width: 450px;
    box-shadow: var(--shadow-xl);
    position: relative;
    z-index: 1;
}

.auth-header-dark {
    text-align: center;
    margin-bottom: 2.5rem;
}

.auth-logo-dark {
    font-size: 2rem;
    font-weight: 700;
    background: var(--gradient-primary);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    margin-bottom: 0.5rem;
}

.auth-title-dark {
    font-size: 1.75rem;
    font-weight: 700;
    margin-bottom: 0.5rem;
    color: var(--text-primary);
}

.auth-subtitle-dark {
    color: var(--text-secondary);
    font-size: 0.95rem;
}

.form-group-dark {
    margin-bottom: 1.5rem;
}

.form-label-dark {
    display: block;
    margin-bottom: 0.5rem;
    color: var(--text-secondary);
    font-weight: 500;
    font-size: 0.9rem;
}

.form-input-dark {
    width: 100%;
    padding: 1rem 1.25rem;
    background: var(--bg-input);
    border: 1px solid var(--border);
    border-radius: 0.75rem;
    color: var(--text-primary);
    font-size: 1rem;
    transition: all 0.3s ease;
}

.form-input-dark:focus {
    outline: none;
    border-color: var(--primary);
    background: var(--bg-secondary);
    box-shadow: 0 0 0 3px rgba(99, 102, 241, 0.1);
}

.form-input-dark::placeholder {
    color: var(--text-muted);
}

.input-icon-wrapper {
    position: relative;
}

.input-icon {
    position: absolute;
    left: 1rem;
    top: 50%;
    transform: translateY(-50%);
    color: var(--text-tertiary);
    pointer-events: none;
}

.input-with-icon {
    padding-left: 3rem;
}

.checkbox-dark {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    margin: 1.5rem 0;
}

.checkbox-dark input[type="checkbox"] {
    width: 1.25rem;
    height: 1.25rem;
    cursor: pointer;
    accent-color: var(--primary);
}

.checkbox-dark label {
    color: var(--text-secondary);
    font-size: 0.9rem;
    cursor: pointer;
}

.btn-auth-dark {
    width: 100%;
    padding: 1rem;
    background: var(--gradient-primary);
    border: none;
    border-radius: 0.75rem;
    color: white;
    font-size: 1.05rem;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.3s ease;
    box-shadow: var(--shadow-glow);
    margin-top: 0.5rem;
}

.btn-auth-dark:hover {
    transform: translateY(-2px);
    box-shadow: var(--shadow-glow), 0 10px 25px rgba(99, 102, 241, 0.3);
}

.auth-divider {
    text-align: center;
    margin: 2rem 0;
    position: relative;
}

.auth-divider::before {
    content: '';
    position: absolute;
    top: 50%;
    left: 0;
    right: 0;
    height: 1px;
    background: var(--border);
}

.auth-divider span {
    background: var(--bg-card);
    padding: 0 1rem;
    color: var(--text-tertiary);
    font-size: 0.85rem;
    position: relative;
}

.auth-footer-dark {
    text-align: center;
    margin-top: 2rem;
    color: var(--text-secondary);
    font-size: 0.95rem;
}

.auth-footer-dark a {
    color: var(--primary);
    text-decoration: none;
    font-weight: 600;
    transition: color 0.3s ease;
}

.auth-footer-dark a:hover {
    color: var(--primary-light);
}

.alert-dark {
    padding: 1rem 1.25rem;
    border-radius: 0.75rem;
    margin-bottom: 1.5rem;
    font-size: 0.9rem;
}

.alert-danger-dark {
    background: rgba(239, 68, 68, 0.1);
    border: 1px solid rgba(239, 68, 68, 0.3);
    color: #fca5a5;
}

.alert-success-dark {
    background: rgba(16, 185, 129, 0.1);
    border: 1px solid rgba(16, 185, 129, 0.3);
    color: #6ee7b7;
}

/* ============================================
   CARDS & SECTIONS - Dark Theme
   ============================================ */

.section-dark {
    padding: 6rem 2rem;
    background: var(--bg-primary);
}

.section-title-dark {
    font-size: 2.5rem;
    font-weight: 700;
    text-align: center;
    margin-bottom: 1rem;
    background: linear-gradient(135deg, #ffffff 0%, #a1a1aa 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

.section-subtitle-dark {
    text-align: center;
    color: var(--text-secondary);
    font-size: 1.1rem;
    max-width: 700px;
    margin: 0 auto 4rem;
}

.cards-grid-dark {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: 2rem;
    max-width: 1280px;
    margin: 0 auto;
}

.card-dark {
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: 1rem;
    padding: 2rem;
    transition: all 0.3s ease;
    cursor: pointer;
}

.card-dark:hover {
    transform: translateY(-5px);
    border-color: var(--border-light);
    box-shadow: var(--shadow-lg);
}

.card-icon-dark {
    width: 3rem;
    height: 3rem;
    background: var(--gradient-primary);
    border-radius: 0.75rem;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 1.5rem;
    font-size: 1.5rem;
}

.card-title-dark {
    font-size: 1.5rem;
    font-weight: 700;
    margin-bottom: 1rem;
    color: var(--text-primary);
}

.card-text-dark {
    color: var(--text-secondary);
    line-height: 1.7;
}

/* ============================================
   STATS SECTION
   ============================================ */

.stats-section {
    background: var(--bg-secondary);
    padding: 4rem 2rem;
    border-top: 1px solid var(--border);
    border-bottom: 1px solid var(--border);
}

.stats-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 3rem;
    max-width: 1280px;
    margin: 0 auto;
    text-align: center;
}

.stat-item {
    padding: 1.5rem;
}

.stat-number {
    font-size: 3.5rem;
    font-weight: 800;
    background: var(--gradient-primary);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    line-height: 1;
    margin-bottom: 0.5rem;
}

.stat-label {
    color: var(--text-secondary);
    font-size: 1.1rem;
    font-weight: 500;
}

/* ============================================
   FOOTER - Dark
   ============================================ */

.footer-dark {
    background: var(--bg-secondary);
    border-top: 1px solid var(--border);
    padding: 3rem 2rem 1.5rem;
}

.footer-content {
    max-width: 1280px;
    margin: 0 auto;
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 3rem;
    margin-bottom: 2rem;
}

.footer-section h4 {
    color: var(--text-primary);
    margin-bottom: 1rem;
    font-weight: 600;
}

.footer-section a {
    display: block;
    color: var(--text-secondary);
    text-decoration: none;
    margin-bottom: 0.5rem;
    transition: color 0.3s ease;
}

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

.footer-bottom {
    text-align: center;
    padding-top: 2rem;
    border-top: 1px solid var(--border);
    color: var(--text-tertiary);
    font-size: 0.9rem;
}

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

@media (max-width: 768px) {
    .hero-title-dark {
        font-size: 2.5rem;
    }
    
    .hero-subtitle-dark {
        font-size: 1.1rem;
    }
    
    .navbar-dark {
        flex-direction: column;
        gap: 1rem;
    }
    
    .nav-links-dark {
        flex-direction: column;
        gap: 0.5rem;
    }
    
    .auth-card-dark {
        padding: 2rem 1.5rem;
    }
    
    .stat-number {
        font-size: 2.5rem;
    }
}

/* ============================================
   COURSES PAGE - Dark Theme
   ============================================ */

.header-pg {
    background: var(--gradient-dark);
    padding: 4rem 2rem;
    border-bottom: 1px solid var(--border);
}

.header-pg .title {
    color: var(--text-primary);
    font-size: 2.5rem;
    font-weight: 800;
    margin-bottom: 1rem;
}

.header-sub-title {
    color: var(--text-secondary);
    font-size: 1.2rem;
    font-weight: 400;
}

.last-courses {
    background: transparent !important;
    padding: 2rem 0;
}

.form-eti input {
    width: 100%;
    padding: 1rem 1.5rem;
    background: var(--bg-input);
    border: 1px solid var(--border);
    border-radius: 0.75rem;
    color: var(--text-primary);
    font-size: 1rem;
    margin-bottom: 2rem;
}

.form-eti input:focus {
    outline: none;
    border-color: var(--primary);
    box-shadow: 0 0 0 3px rgba(99, 102, 241, 0.1);
}

/* Course Cards */
.card-deck {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
    gap: 2rem;
    margin: 2rem 0;
}

.course-card-dark {
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: 1rem;
    overflow: hidden;
    transition: all 0.3s ease;
    display: flex;
    flex-direction: column;
}

.course-card-dark:hover {
    transform: translateY(-5px);
    border-color: var(--primary);
    box-shadow: var(--shadow-lg);
}

.course-card-dark img {
    width: 100%;
    height: 180px;
    object-fit: cover;
}

.course-card-dark .course-info {
    padding: 1.5rem;
    flex: 1;
    display: flex;
    flex-direction: column;
}

.course-card-dark .course-title {
    font-size: 1.25rem;
    font-weight: 700;
    color: var(--text-primary);
    margin-bottom: 0.5rem;
    line-height: 1.4;
}

.course-card-dark .course-description {
    color: var(--text-secondary);
    font-size: 0.9rem;
    line-height: 1.6;
    margin-bottom: 1rem;
    flex: 1;
}

.course-card-dark .course-meta {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-top: auto;
    padding-top: 1rem;
    border-top: 1px solid var(--border);
}

.course-card-dark .course-lessons {
    color: var(--text-tertiary);
    font-size: 0.85rem;
}

.course-card-dark .course-cta {
    background: var(--gradient-primary);
    color: white;
    padding: 0.5rem 1.25rem;
    border-radius: 0.5rem;
    text-decoration: none;
    font-weight: 600;
    font-size: 0.9rem;
    transition: all 0.3s ease;
}

.course-card-dark .course-cta:hover {
    transform: translateY(-2px);
    box-shadow: var(--shadow-glow);
}

/* ============================================
   PLANS PAGE - Dark Theme
   ============================================ */

.plans-section-dark {
    padding: 4rem 2rem;
    background: var(--bg-primary);
}

.plans-grid-dark {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
    gap: 2rem;
    max-width: 1280px;
    margin: 0 auto;
    padding: 2rem 0;
}

.plan-card-dark {
    background: var(--bg-card);
    border: 2px solid var(--border);
    border-radius: 1.5rem;
    padding: 2.5rem;
    text-align: center;
    transition: all 0.3s ease;
    position: relative;
    overflow: hidden;
}

.plan-card-dark:hover {
    transform: translateY(-10px);
    border-color: var(--primary);
    box-shadow: var(--shadow-xl);
}

.plan-card-dark.featured {
    border-color: var(--primary);
    background: linear-gradient(135deg, var(--bg-card) 0%, var(--bg-secondary) 100%);
}

.plan-card-dark.featured::before {
    content: 'MAIS POPULAR';
    position: absolute;
    top: 1.5rem;
    right: -2rem;
    background: var(--gradient-primary);
    color: white;
    padding: 0.5rem 3rem;
    transform: rotate(45deg);
    font-size: 0.75rem;
    font-weight: 700;
}

.plan-name-dark {
    font-size: 1.5rem;
    font-weight: 700;
    color: var(--text-primary);
    margin-bottom: 1rem;
}

.plan-price-dark {
    font-size: 3rem;
    font-weight: 800;
    background: var(--gradient-primary);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    margin-bottom: 0.5rem;
}

.plan-period-dark {
    color: var(--text-tertiary);
    font-size: 0.9rem;
    margin-bottom: 2rem;
}

.plan-features-dark {
    list-style: none;
    padding: 0;
    margin: 2rem 0;
    text-align: left;
}

.plan-features-dark li {
    padding: 0.75rem 0;
    color: var(--text-secondary);
    border-bottom: 1px solid var(--border);
    display: flex;
    align-items: center;
    gap: 0.75rem;
}

.plan-features-dark li::before {
    content: '✓';
    color: var(--success);
    font-weight: 700;
    font-size: 1.2rem;
}

.plan-cta-dark {
    width: 100%;
    padding: 1rem 2rem;
    background: var(--gradient-primary);
    border: none;
    border-radius: 0.75rem;
    color: white;
    font-size: 1.1rem;
    font-weight: 700;
    cursor: pointer;
    transition: all 0.3s ease;
    text-decoration: none;
    display: inline-block;
    margin-top: 1rem;
}

.plan-cta-dark:hover {
    transform: translateY(-3px);
    box-shadow: var(--shadow-glow);
}

/* ============================================
   FORUM PAGE - Dark Theme
   ============================================ */

.forum-container-dark {
    max-width: 1280px;
    margin: 0 auto;
    padding: 2rem;
}

.forum-header-dark {
    background: var(--gradient-dark);
    padding: 3rem 2rem;
    border-radius: 1rem;
    margin-bottom: 2rem;
    text-align: center;
}

.forum-title-dark {
    font-size: 2.5rem;
    font-weight: 800;
    color: var(--text-primary);
    margin-bottom: 0.5rem;
}

.forum-subtitle-dark {
    color: var(--text-secondary);
    font-size: 1.1rem;
}

.forum-search-dark {
    max-width: 600px;
    margin: 2rem auto;
}

.forum-search-dark input {
    width: 100%;
    padding: 1rem 1.5rem;
    background: var(--bg-input);
    border: 1px solid var(--border);
    border-radius: 0.75rem;
    color: var(--text-primary);
    font-size: 1rem;
}

.forum-categories-dark {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
    gap: 1.5rem;
    margin: 2rem 0;
}

.forum-category-card-dark {
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: 1rem;
    padding: 1.5rem;
    transition: all 0.3s ease;
    cursor: pointer;
}

.forum-category-card-dark:hover {
    border-color: var(--primary);
    transform: translateY(-3px);
    box-shadow: var(--shadow-md);
}

.forum-category-icon-dark {
    width: 3rem;
    height: 3rem;
    background: var(--gradient-primary);
    border-radius: 0.75rem;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 1rem;
    font-size: 1.5rem;
}

.forum-category-name-dark {
    font-size: 1.25rem;
    font-weight: 700;
    color: var(--text-primary);
    margin-bottom: 0.5rem;
}

.forum-category-count-dark {
    color: var(--text-tertiary);
    font-size: 0.9rem;
}

.ticket-list-dark {
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: 1rem;
    padding: 1.5rem;
    margin: 1rem 0;
}

.ticket-item-dark {
    padding: 1.5rem;
    border-bottom: 1px solid var(--border);
    transition: background 0.3s ease;
}

.ticket-item-dark:hover {
    background: var(--bg-hover);
}

.ticket-item-dark:last-child {
    border-bottom: none;
}

.ticket-title-dark {
    font-size: 1.1rem;
    font-weight: 600;
    color: var(--text-primary);
    margin-bottom: 0.5rem;
}

.ticket-meta-dark {
    display: flex;
    gap: 1.5rem;
    color: var(--text-tertiary);
    font-size: 0.85rem;
}

.ticket-status-dark {
    display: inline-block;
    padding: 0.25rem 0.75rem;
    border-radius: 0.5rem;
    font-size: 0.75rem;
    font-weight: 600;
    text-transform: uppercase;
}

.ticket-status-dark.open {
    background: rgba(16, 185, 129, 0.1);
    color: var(--success);
}

.ticket-status-dark.closed {
    background: rgba(156, 163, 175, 0.1);
    color: var(--text-tertiary);
}

/* Sidebar Fix */
.sidebar, .col-md-3 {
    background: transparent !important;
}

.sidebar .card, .sidebar .panel {
    background: var(--bg-card) !important;
    border: 1px solid var(--border) !important;
}

.sidebar .card-header, .sidebar .panel-heading {
    background: var(--bg-secondary) !important;
    border-bottom: 1px solid var(--border) !important;
    color: var(--text-primary) !important;
}

.sidebar .list-group-item {
    background: var(--bg-card) !important;
    border-color: var(--border) !important;
    color: var(--text-secondary) !important;
}

.sidebar .list-group-item:hover {
    background: var(--bg-hover) !important;
    color: var(--text-primary) !important;
}

@media (max-width: 768px) {
    .plans-grid-dark {
        grid-template-columns: 1fr;
    }
    
    .forum-categories-dark {
        grid-template-columns: 1fr;
    }
}

/* ============================================
   PÁGINA DE CURSOS - MODERNIZAÇÃO
   ============================================ */

/* Header da página de cursos */
.header-pg {
    background: linear-gradient(135deg, var(--bg-secondary) 0%, var(--bg-tertiary) 100%) !important;
    padding: 4rem 2rem !important;
    border-bottom: 2px solid var(--border) !important;
    position: relative;
    overflow: hidden;
}

.header-pg::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: url('data:image/svg+xml;utf8,<svg width="100" height="100" xmlns="http://www.w3.org/2000/svg"><rect width="100" height="100" fill="none"/><path d="M0,0 L100,100 M100,0 L0,100" stroke="rgba(99,102,241,0.05)" stroke-width="1"/></svg>');
    background-size: 100px 100px;
    opacity: 0.3;
}

.header-pg .container-header-pg {
    position: relative;
    z-index: 1;
}

.header-pg .title {
    color: var(--text-primary) !important;
    font-size: 2.5rem !important;
    font-weight: 800 !important;
    margin-bottom: 1rem !important;
    text-align: center !important;
    background: linear-gradient(135deg, #fff 0%, var(--primary-light) 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

.header-pg .header-sub-title {
    color: var(--text-secondary) !important;
    font-size: 1.2rem !important;
    text-align: center !important;
    font-weight: 400 !important;
}

/* Sidebar dark */
.sidebar {
    background: var(--bg-card) !important;
    padding: 0.5rem !important;
    border-radius: 12px !important;
    border: 1px solid var(--border) !important;
    position: sticky;
    top: 100px;
}

.sidebar .title-main-sidebar,
.sidebar .title-sidebar {
    color: var(--text-primary) !important;
    font-weight: 700 !important;
    font-size: 1.1rem !important;
    margin-bottom: 1rem !important;
    padding-bottom: 0.75rem !important;
    border-bottom: 2px solid var(--primary) !important;
}

.sidebar ul.level,
.sidebar ul.categories,
.sidebar ul.teacher {
    list-style: none !important;
    padding: 0 !important;
}

.sidebar ul.level li,
.sidebar ul.categories li {
    margin-bottom: 0.75rem !important;
}

.sidebar ul.level li a {
    color: var(--text-secondary) !important;
    text-decoration: none !important;
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 0.75rem 1rem;
    border-radius: 8px;
    transition: all 0.3s ease;
    background: var(--bg-secondary);
}

.sidebar ul.level li a:hover {
    background: var(--bg-hover) !important;
    color: var(--primary-light) !important;
    transform: translateX(5px);
}

.sidebar ul.level li a i {
    color: var(--primary) !important;
    width: 20px;
}

/* Badges */
.badge {
    background: var(--primary) !important;
    color: white !important;
    padding: 0.25rem 0.75rem !important;
    border-radius: 12px !important;
    font-size: 0.75rem !important;
    font-weight: 700 !important;
}

.badge--free {
    background: var(--success) !important;
}

/* Cards de categorias na sidebar */
.sidebar .categories ul.categories {
    display: grid !important;
    grid-template-columns: repeat(auto-fill, minmax(60px, 1fr)) !important;
    gap: 0.75rem !important;
    padding: 0 !important;
}

.sidebar .categories ul.categories li a {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: 60px !important;
    height: 60px !important;
    border-radius: 12px !important;
    padding: 0.5rem !important;
    transition: all 0.3s ease !important;
    border: 2px solid transparent !important;
}

.sidebar .categories ul.categories li a:hover {
    transform: scale(1.1) !important;
    border-color: currentColor !important;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.5) !important;
}

.sidebar .categories ul.categories li a img {
    width: 100% !important;
    height: 100% !important;
    object-fit: contain !important;
    filter: brightness(1.2) !important;
}

/* Cards de professores na sidebar */
.card-teacher {
    margin-bottom: 1rem !important;
}

.card-teacher a {
    display: flex !important;
    align-items: center !important;
    gap: 1rem !important;
    padding: 1rem !important;
    background: var(--bg-secondary) !important;
    border-radius: 12px !important;
    text-decoration: none !important;
    transition: all 0.3s ease !important;
    border: 1px solid var(--border) !important;
}

.card-teacher a:hover {
    background: var(--bg-hover) !important;
    transform: translateY(-2px) !important;
    box-shadow: var(--shadow-md) !important;
}

.card-teacher .teacher-profile {
    flex-shrink: 0 !important;
}

.card-teacher .teacher-profile img {
    width: 50px !important;
    height: 50px !important;
    border-radius: 50% !important;
    object-fit: cover !important;
    border: 2px solid var(--primary) !important;
}

.card-teacher .teacher-content {
    flex: 1 !important;
}

.card-teacher .teacher-name {
    color: var(--text-primary) !important;
    font-weight: 600 !important;
    font-size: 0.95rem !important;
    margin: 0 !important;
    margin-bottom: 0.25rem !important;
}

.card-teacher .count {
    color: var(--text-tertiary) !important;
    font-size: 0.85rem !important;
}

/* Área de conteúdo dos cursos */
.last-courses {
    background: transparent !important;
}

/* Busca de cursos */
.form-eti input[type="text"],
.form-eti input[name="key_search"] {
    width: 100% !important;
    padding: 1rem 1.5rem !important;
    background: var(--bg-card) !important;
    border: 2px solid var(--border) !important;
    border-radius: 12px !important;
    color: var(--text-primary) !important;
    font-size: 1rem !important;
    transition: all 0.3s ease !important;
    margin-bottom: 2rem !important;
}

.form-eti input[type="text"]:focus,
.form-eti input[name="key_search"]:focus {
    outline: none !important;
    border-color: var(--primary) !important;
    box-shadow: 0 0 0 3px rgba(99, 102, 241, 0.1) !important;
}

.form-eti input::placeholder {
    color: var(--text-tertiary) !important;
}

/* Alert de filtro */
.alert {
    background: var(--bg-card) !important;
    border: 1px solid var(--border) !important;
    color: var(--text-primary) !important;
    border-radius: 12px !important;
    padding: 1rem 1.5rem !important;
    margin-bottom: 2rem !important;
}

.alert-info {
    border-left: 4px solid var(--primary) !important;
}

.alert a {
    color: var(--primary) !important;
    text-decoration: none !important;
}

.alert a:hover {
    color: var(--primary-light) !important;
}

/* Título da seção */
.last-courses h2.font-2 {
    color: var(--text-primary) !important;
    font-size: 1.75rem !important;
    font-weight: 700 !important;
    margin-bottom: 2rem !important;
    padding-bottom: 1rem !important;
    border-bottom: 2px solid var(--border) !important;
}

.last-courses h2.font-2 i {
    color: var(--primary) !important;
}

/* Grid de cursos moderno */
.card-deck {
    display: grid !important;
    grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)) !important;
    gap: 1.5rem !important;
    margin-bottom: 3rem !important;
}

/* Card de curso modernizado */
.card-course {
    background: var(--bg-card) !important;
    border: 1px solid var(--border) !important;
    border-radius: 16px !important;
    overflow: hidden !important;
    transition: all 0.3s ease !important;
    height: 100% !important;
    display: flex !important;
    flex-direction: column !important;
}

.card-course:hover {
    transform: translateY(-8px) !important;
    box-shadow: var(--shadow-lg) !important;
    border-color: var(--primary) !important;
}

.card-course a {
    text-decoration: none !important;
    display: flex !important;
    flex-direction: column !important;
    height: 100% !important;
}

.card-course__image {
    position: relative !important;
    width: 100% !important;
    height: 200px !important;
    overflow: hidden !important;
    background: var(--bg-secondary) !important;
}

.card-course__image img {
    width: 100% !important;
    height: 100% !important;
    object-fit: contain !important;
    object-position: center !important;
}

.card-course__image .badge--free {
    position: absolute !important;
    top: 1rem !important;
    right: 1rem !important;
    background: var(--success) !important;
    color: white !important;
    padding: 0.5rem 1rem !important;
    border-radius: 20px !important;
    font-weight: 700 !important;
    font-size: 0.85rem !important;
    box-shadow: var(--shadow-md) !important;
}

.badge--animate {
    animation: pulse 2s ease-in-out infinite !important;
}

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

.card-course__content {
    padding: 1.5rem !important;
    flex: 1 !important;
    display: flex !important;
    flex-direction: column !important;
}

.card-course__content h1 {
    color: var(--text-primary) !important;
    font-size: 1.25rem !important;
    font-weight: 700 !important;
    margin-bottom: 0.75rem !important;
    line-height: 1.4 !important;
}

.card-course__content p {
    color: var(--text-secondary) !important;
    font-size: 0.95rem !important;
    line-height: 1.6 !important;
    flex: 1 !important;
}

/* Paginação dark */
.pagination {
    display: flex !important;
    justify-content: center !important;
    gap: 0.5rem !important;
    margin-top: 3rem !important;
}

.pagination li {
    list-style: none !important;
}

.pagination li a,
.pagination li span {
    display: block !important;
    padding: 0.75rem 1.25rem !important;
    background: var(--bg-card) !important;
    border: 1px solid var(--border) !important;
    color: var(--text-primary) !important;
    text-decoration: none !important;
    border-radius: 8px !important;
    transition: all 0.3s ease !important;
}

.pagination li a:hover {
    background: var(--bg-hover) !important;
    border-color: var(--primary) !important;
    color: var(--primary-light) !important;
}

.pagination li.active span {
    background: var(--primary) !important;
    border-color: var(--primary) !important;
    color: white !important;
}

.pagination li.disabled span {
    opacity: 0.5 !important;
    cursor: not-allowed !important;
}

/* Responsive */
@media (max-width: 992px) {
    .card-deck {
        grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)) !important;
    }
    
    .sidebar {
        margin-bottom: 2rem !important;
        position: static !important;
    }
}

@media (max-width: 768px) {
    .header-pg .title {
        font-size: 2rem !important;
    }
    
    .header-pg .header-sub-title {
        font-size: 1rem !important;
    }
    
    .card-deck {
        grid-template-columns: 1fr !important;
    }
}

/* ============================================
   PÁGINA DE PLANOS - MELHORIAS
   ============================================ */

/* Accordion de perguntas frequentes */
.common-questions {
    background: var(--bg-card) !important;
    padding: 3rem 2rem !important;
    border-radius: 16px !important;
    border: 1px solid var(--border) !important;
    margin: 3rem 0 !important;
}

.common-questions .title-common {
    color: var(--text-primary) !important;
    font-size: 2rem !important;
    font-weight: 800 !important;
    text-align: center !important;
    margin-bottom: 2rem !important;
    padding-bottom: 1rem !important;
    border-bottom: 2px solid var(--primary) !important;
}

.common-questions .accordion {
    background: transparent !important;
}

.common-questions .accordion dl {
    background: transparent !important;
}

.common-questions .accordion dt {
    background: var(--bg-secondary) !important;
    border: 1px solid var(--border) !important;
    border-radius: 12px !important;
    margin-bottom: 1rem !important;
    overflow: hidden !important;
}

.common-questions .accordion-title {
    color: var(--text-primary) !important;
    background: var(--bg-secondary) !important;
    padding: 1.25rem 1.5rem !important;
    display: flex !important;
    align-items: center !important;
    text-decoration: none !important;
    font-weight: 600 !important;
    font-size: 1.05rem !important;
    transition: all 0.3s ease !important;
    position: relative !important;
}

.common-questions .accordion-title::after {
    content: '\f078' !important;
    font-family: 'FontAwesome' !important;
    position: absolute !important;
    right: 1.5rem !important;
    color: var(--primary) !important;
    transition: transform 0.3s ease !important;
}

.common-questions .accordion-title[aria-expanded="true"]::after {
    transform: rotate(180deg) !important;
}

.common-questions .accordion-title:hover {
    background: var(--bg-hover) !important;
    color: var(--primary-light) !important;
}

.common-questions .accordion-content {
    background: var(--bg-tertiary) !important;
    color: var(--text-secondary) !important;
    padding: 1.5rem !important;
    border-top: 1px solid var(--border) !important;
    line-height: 1.8 !important;
}

.common-questions .accordion-content span {
    color: var(--text-secondary) !important;
    display: block !important;
}

/* Plans deck */
.plans-deck {
    display: grid !important;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)) !important;
    gap: 2rem !important;
    margin-bottom: 3rem !important;
}

/* Page header component */
.page-header {
    background: linear-gradient(135deg, var(--bg-secondary) 0%, var(--bg-tertiary) 100%) !important;
    padding: 4rem 2rem !important;
    border-bottom: 2px solid var(--border) !important;
    margin-bottom: 3rem !important;
    text-align: center !important;
}

.page-header h1,
.page-header h2,
.page-header p {
    color: var(--text-primary) !important;
}

.page-header__subtitle {
    max-width: 600px !important;
    margin: 0 auto !important;
}

/* Plans features */
.plans-features {
    background: var(--bg-card) !important;
    padding: 3rem 2rem !important;
    border-radius: 16px !important;
    border: 1px solid var(--border) !important;
    margin: 3rem 0 !important;
}

.plans-features h2,
.plans-features h3 {
    color: var(--text-primary) !important;
}

.plans-features ul {
    color: var(--text-secondary) !important;
}

.plans-features ul li {
    color: var(--text-secondary) !important;
    padding: 0.5rem 0 !important;
}

/* ============================================
   PÁGINA DE DETALHES DO CURSO - MELHORIAS
   ============================================ */

/* Card do professor/tutor */
.card-teacher {
    background: var(--bg-card) !important;
    border: 1px solid var(--border) !important;
    border-radius: 16px !important;
    padding: 1.5rem !important;
    margin-bottom: 2rem !important;
}

.card-teacher .teacher-profile {
    text-align: center !important;
    margin-bottom: 1.5rem !important;
}

.card-teacher .teacher-profile img {
    width: 120px !important;
    height: 120px !important;
    border-radius: 50% !important;
    object-fit: cover !important;
    border: 3px solid var(--primary) !important;
    box-shadow: var(--shadow-md) !important;
}

.card-teacher .teacher-content {
    text-align: center !important;
}

.card-teacher .teacher-name {
    color: var(--text-primary) !important;
    font-size: 1.5rem !important;
    font-weight: 700 !important;
    margin-bottom: 1rem !important;
}

.card-teacher .teacher-bio {
    color: var(--text-secondary) !important;
    line-height: 1.8 !important;
    margin-bottom: 1.5rem !important;
}

.card-teacher .teacher-bio p {
    color: var(--text-secondary) !important;
}

.card-teacher .social-teacher {
    background: transparent !important;
}

.card-teacher .social-teacher ul {
    display: flex !important;
    justify-content: center !important;
    gap: 1rem !important;
    list-style: none !important;
    padding: 0 !important;
}

.card-teacher .social-teacher li a {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: 40px !important;
    height: 40px !important;
    background: var(--bg-secondary) !important;
    border: 1px solid var(--border) !important;
    border-radius: 50% !important;
    color: var(--text-primary) !important;
    text-decoration: none !important;
    transition: all 0.3s ease !important;
}

.card-teacher .social-teacher li a:hover {
    background: var(--primary) !important;
    border-color: var(--primary) !important;
    color: white !important;
    transform: translateY(-3px) !important;
}

/* Accordion de ementa do curso */
.ac-courses {
    background: var(--bg-card) !important;
    border: 1px solid var(--border) !important;
    border-radius: 16px !important;
    padding: 1rem !important;
    margin-bottom: 2rem !important;
}

.ac-courses dl {
    background: transparent !important;
}

.ac-courses dt {
    background: var(--bg-secondary) !important;
    border: 1px solid var(--border) !important;
    border-radius: 12px !important;
    margin-bottom: 0.75rem !important;
    overflow: hidden !important;
}

.ac-courses .accordion-title {
    color: var(--text-primary) !important;
    background: var(--bg-secondary) !important;
    padding: 1rem 1.25rem !important;
    font-weight: 600 !important;
    font-size: 1rem !important;
    text-decoration: none !important;
    display: block !important;
    transition: all 0.3s ease !important;
}

.ac-courses .accordion-title:hover {
    background: var(--bg-hover) !important;
    color: var(--primary-light) !important;
}

.ac-courses .accordion-content {
    background: var(--bg-tertiary) !important;
    padding: 0.75rem !important;
    border-top: 1px solid var(--border) !important;
}

.ac-courses .accordion-content a {
    color: var(--text-secondary) !important;
    text-decoration: none !important;
    display: block !important;
    /* padding: 0.75rem 1rem !important; */
    border-radius: 8px !important;
    transition: all 0.3s ease !important;
    margin-bottom: 0.5rem !important;
}

.ac-courses .accordion-content a:hover {
    background: var(--bg-hover) !important;
    color: var(--primary-light) !important;
}

.ac-courses .accordion-content p {
    color: var(--text-secondary) !important;
    margin: 0 !important;
}

.ac-courses .badge--small {
    background: var(--success) !important;
    color: white !important;
    padding: 0.25rem 0.75rem !important;
    border-radius: 12px !important;
    font-size: 0.7rem !important;
    margin-right: 0.5rem !important;
}

/* Overview do curso */
.overview-course {
    background: var(--bg-card) !important;
    border: 1px solid var(--border) !important;
    border-radius: 16px !important;
    padding: 1.5rem !important;
    list-style: none !important;
}

.overview-course li {
    color: var(--text-secondary) !important;
    padding: 0.75rem 0 !important;
    border-bottom: 1px solid var(--border) !important;
    display: flex !important;
    align-items: center !important;
}

.overview-course li:last-child {
    border-bottom: none !important;
}

.overview-course li i {
    color: var(--primary) !important;
}

.overview-course li a {
    color: var(--text-primary) !important;
    text-decoration: none !important;
}

.overview-course li a:hover {
    color: var(--primary-light) !important;
}

/* Depoimentos/Testemunhos - Modernizado */
.evaluations {
    display: grid !important;
    grid-template-columns: repeat(auto-fill, minmax(350px, 1fr)) !important;
    gap: 2rem !important;
    margin-bottom: 3rem !important;
}

.evaluation {
    background: var(--bg-card) !important;
    border: 1px solid var(--border) !important;
    border-radius: 16px !important;
    padding: 2rem !important;
    transition: all 0.3s ease !important;
    display: flex !important;
    flex-direction: column !important;
    gap: 1.5rem !important;
}

.evaluation:hover {
    transform: translateY(-5px) !important;
    box-shadow: var(--shadow-lg) !important;
    border-color: var(--primary) !important;
}

.evaluation__profile {
    text-align: center !important;
}

.evaluation__profile img {
    width: 80px !important;
    height: 80px !important;
    border-radius: 50% !important;
    object-fit: cover !important;
    border: 3px solid var(--primary) !important;
    box-shadow: var(--shadow-md) !important;
}

.evaluation__content {
    flex: 1 !important;
}

.evaluation__name {
    color: var(--text-primary) !important;
    font-size: 1.25rem !important;
    font-weight: 700 !important;
    margin-bottom: 0.5rem !important;
    text-align: center !important;
}

.evaluation__data {
    color: var(--text-tertiary) !important;
    font-size: 0.9rem !important;
    text-align: center !important;
    margin-bottom: 1rem !important;
}

.evaluation__stars {
    display: flex !important;
    justify-content: center !important;
    gap: 0.25rem !important;
    margin-bottom: 1rem !important;
}

.evaluation__stars i {
    color: var(--warning) !important;
    font-size: 1.1rem !important;
}

.evaluation__stars i.fa-star-o {
    color: var(--text-tertiary) !important;
}

.evaluation__testimony {
    color: var(--text-secondary) !important;
    line-height: 1.8 !important;
    font-style: italic !important;
    text-align: center !important;
    padding: 1.5rem !important;
    background: var(--bg-secondary) !important;
    border-radius: 12px !important;
    border-left: 3px solid var(--primary) !important;
}

/* Video do curso */
.video-course {
    background: var(--bg-card) !important;
    border: 1px solid var(--border) !important;
    border-radius: 16px !important;
    overflow: hidden !important;
    margin-bottom: 2rem !important;
}

/* Pré-requisitos */
.card-deck--horizontal {
    display: grid !important;
    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)) !important;
    gap: 1.5rem !important;
}

/* Responsive */
@media (max-width: 768px) {
    .evaluations {
        grid-template-columns: 1fr !important;
    }
    
    .plans-deck {
        grid-template-columns: 1fr !important;
    }
    
    .card-deck--horizontal {
        grid-template-columns: 1fr !important;
    }
}

/* ============================================
   FIX LARGURA DOS PLANOS
   ============================================ */

/* Ajustar grid dos planos para largura ideal */
.plans-deck {
    display: grid !important;
    grid-template-columns: repeat(3, 1fr) !important;
    gap: 2rem !important;
    margin-bottom: 3rem !important;
    max-width: 1200px !important;
    margin-left: auto !important;
    margin-right: auto !important;
}

/* Estilizar cards dos planos */
.plan-item {
    background: var(--bg-card) !important;
    border: 2px solid var(--border) !important;
    border-radius: 16px !important;
    padding: 2.5rem 2rem !important;
    transition: all 0.3s ease !important;
    position: relative !important;
    display: flex !important;
    flex-direction: column !important;
}

.plan-item:hover {
    transform: translateY(-8px) !important;
    box-shadow: var(--shadow-lg) !important;
    border-color: var(--primary) !important;
}

.plan-item.plan--recomended {
    border-color: var(--primary) !important;
    background: linear-gradient(135deg, var(--bg-card) 0%, var(--bg-secondary) 100%) !important;
    box-shadow: 0 0 30px rgba(99, 102, 241, 0.3) !important;
}

.plan-item .badge--danger {
    position: absolute !important;
    top: -12px !important;
    left: 50% !important;
    transform: translateX(-50%) !important;
    background: var(--primary) !important;
    color: white !important;
    padding: 0.5rem 1.5rem !important;
    border-radius: 20px !important;
    font-weight: 700 !important;
    font-size: 0.85rem !important;
    box-shadow: var(--shadow-md) !important;
    text-transform: uppercase !important;
}

.plan-item .pricing {
    text-align: center !important;
    padding: 2rem 0 !important;
    border-bottom: 2px solid var(--border) !important;
    margin-bottom: 2rem !important;
}

.plan-item .pricing .discount {
    display: block !important;
    color: var(--success) !important;
    font-weight: 700 !important;
    font-size: 1.1rem !important;
    margin-bottom: 0.5rem !important;
}

.plan-item .pricing .currency {
    color: var(--text-tertiary) !important;
    font-size: 1.5rem !important;
    font-weight: 600 !important;
}

.plan-item .pricing .price {
    color: var(--text-primary) !important;
    font-size: 3.5rem !important;
    font-weight: 900 !important;
    line-height: 1 !important;
}

.plan-item .pricing .reccurency {
    color: var(--text-tertiary) !important;
    font-size: 1rem !important;
    display: block !important;
    margin-top: 0.5rem !important;
}

.plan-item .features {
    list-style: none !important;
    padding: 0 !important;
    margin-bottom: 2rem !important;
    flex: 1 !important;
}

.plan-item .features li {
    color: var(--text-secondary) !important;
    padding: 1rem 0 !important;
    border-bottom: 1px solid var(--border) !important;
    display: flex !important;
    align-items: center !important;
    gap: 0.75rem !important;
}

.plan-item .features li:last-child {
    border-bottom: none !important;
}

.plan-item .features li i {
    color: var(--primary) !important;
    font-size: 1.2rem !important;
}

.plan-item .features li i.text-gray {
    color: var(--text-tertiary) !important;
}

.plan-item .btn {
    width: 100% !important;
    padding: 1rem 2rem !important;
    background: var(--primary) !important;
    color: white !important;
    border: none !important;
    border-radius: 12px !important;
    font-weight: 700 !important;
    font-size: 1.1rem !important;
    text-transform: uppercase !important;
    cursor: pointer !important;
    transition: all 0.3s ease !important;
    text-decoration: none !important;
    display: inline-block !important;
    text-align: center !important;
}

.plan-item .btn:hover {
    background: var(--primary-dark) !important;
    transform: scale(1.05) !important;
    box-shadow: 0 8px 20px rgba(99, 102, 241, 0.4) !important;
}

.plan-item .btn-success {
    background: var(--success) !important;
}

.plan-item .btn-success:hover {
    background: #059669 !important;
    box-shadow: 0 8px 20px rgba(16, 185, 129, 0.4) !important;
}

/* Responsive */
@media (max-width: 1024px) {
    .plans-deck {
        grid-template-columns: repeat(2, 1fr) !important;
    }
}

@media (max-width: 768px) {
    .plans-deck {
        grid-template-columns: 1fr !important;
        padding: 0 1rem !important;
    }
    
    .plan-item .pricing .price {
        font-size: 2.5rem !important;
    }
}

/* ============================================
   FIX LARGURA DOS PLANOS - VERSÃO MAIS LARGA
   ============================================ */

.plans-deck {
    display: grid !important;
    grid-template-columns: repeat(3, 1fr) !important;
    gap: 3rem !important;
    margin-bottom: 3rem !important;
    max-width: 1400px !important;
    margin-left: auto !important;
    margin-right: auto !important;
    padding: 0 2rem !important;
}

.plan-item {
    background: var(--bg-card) !important;
    border: 2px solid var(--border) !important;
    border-radius: 20px !important;
    padding: 3rem 2.5rem !important;
    min-height: 600px !important;
}

.plan-item .pricing .price {
    font-size: 4rem !important;
}

@media (max-width: 1024px) {
    .plans-deck {
        grid-template-columns: 1fr !important;
        max-width: 500px !important;
    }
}

@media (max-width: 768px) {
    .plans-deck {
        padding: 0 1rem !important;
    }
}

/* ============================================
   PLANOS - LARGURA COMPLETA
   ============================================ */

.plans-deck {
    display: grid !important;
    grid-template-columns: repeat(3, 1fr) !important;
    gap: 2.5rem !important;
    margin-bottom: 3rem !important;
    max-width: 100% !important;
    width: 100% !important;
    padding: 0 3rem !important;
}

.plan-item {
    padding: 3.5rem 3rem !important;
    min-height: 650px !important;
}

.plan-item .pricing .price {
    font-size: 4.5rem !important;
}

@media (max-width: 1200px) {
    .plans-deck {
        grid-template-columns: 1fr !important;
        max-width: 600px !important;
        margin-left: auto !important;
        margin-right: auto !important;
    }
}

/* ============================================
   OVERRIDE SITE.CSS PLANS WIDTH
   ============================================ */

@media (min-width: 768px) {
    .plans-deck .plan-item {
        width: 100% !important;
        margin-top: 0 !important;
    }
}

@media (min-width: 1200px) {
    .plan-item {
        width: 100% !important;
    }
}

/* ============================================
   MELHORIAS PÁGINA DE CURSOS
   ============================================ */

/* Modernizar título "Últimos Lançamentos" */
.last-courses h2.font-2 {
    color: var(--text-primary) !important;
    font-size: 1.75rem !important;
    font-weight: 700 !important;
    margin-bottom: 2rem !important;
    padding-bottom: 1rem !important;
    border-bottom: none !important;
    position: relative !important;
    display: inline-block !important;
}

.last-courses h2.font-2::after {
    content: '' !important;
    position: absolute !important;
    bottom: 0 !important;
    left: 0 !important;
    width: 100% !important;
    height: 4px !important;
    background: linear-gradient(90deg, var(--primary) 0%, var(--primary-light) 100%) !important;
    border-radius: 2px !important;
}

.last-courses h2.font-2 i {
    color: var(--primary) !important;
    margin-right: 0.75rem !important;
}

.last-courses h2.font-2 .title-decorator::before {
    display: none !important;
}

/* Fix para cards de cursos com larguras diferentes */
.card-deck {
    display: grid !important;
    grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)) !important;
    gap: 1.5rem !important;
    margin-bottom: 3rem !important;
}

.card-deck .item {
    width: 100% !important;
    max-width: 100% !important;
}

.card-course {
    width: 100% !important;
    max-width: 100% !important;
}

/* Garantir que todos os cards tenham a mesma altura */
.card-deck .item,
.card-deck > div {
    display: flex !important;
    width: 100% !important;
}

.card-deck .item .card-course,
.card-deck > div .card-course {
    width: 100% !important;
}

@media (max-width: 992px) {
    .card-deck {
        grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)) !important;
    }
}

@media (max-width: 768px) {
    .card-deck {
        grid-template-columns: 1fr !important;
    }
}

/* ============================================
   FIX CARD DE PROFESSORES NA SIDEBAR
   ============================================ */

/* Corrigir card de professores na sidebar da página de cursos */
.sidebar .card-teacher {
    background: var(--bg-secondary) !important;
    border: 1px solid var(--border) !important;
    border-radius: 12px !important;
    padding: 1rem !important;
    margin-bottom: 1rem !important;
    transition: all 0.3s ease !important;
    display: block !important;
}

.sidebar .card-teacher a {
    display: flex !important;
    align-items: center !important;
    gap: 1rem !important;
    text-decoration: none !important;
    flex-direction: row !important;
}

.sidebar .card-teacher:hover {
    background: var(--bg-hover) !important;
    transform: translateY(-2px) !important;
    box-shadow: var(--shadow-md) !important;
}

.sidebar .card-teacher .teacher-profile {
    flex-shrink: 0 !important;
    text-align: left !important;
    margin-bottom: 0 !important;
}

.sidebar .card-teacher .teacher-profile img {
    width: 100px !important;
    height: 100px !important;
    border-radius: 50% !important;
    object-fit: cover !important;
    border: 2px solid var(--primary) !important;
}

.sidebar .card-teacher .teacher-content {
    flex: 1 !important;
    text-align: left !important;
    padding: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
    transform: none !important;
}

.sidebar .card-teacher .teacher-name {
    color: var(--text-primary) !important;
    font-weight: 600 !important;
    font-size: 0.95rem !important;
    margin: 0 !important;
    margin-bottom: 0.25rem !important;
    padding: 0 !important;
    background: transparent !important;
}

.sidebar .card-teacher .count {
    color: var(--text-tertiary) !important;
    font-size: 0.85rem !important;
    text-transform: none !important;
    padding: 0 !important;
}

.sidebar .card-teacher .teacher-bio {
    display: none !important;
}

.sidebar .card-teacher .social-teacher {
    display: none !important;
}

/* ============================================
   TESTEMUNHOS - MELHORIAS
   ============================================ */

/* Melhorar layout dos testemunhos */
.evaluations {
    display: grid !important;
    grid-template-columns: 1fr !important;
    gap: 1.5rem !important;
    margin-bottom: 3rem !important;
}

@media (min-width: 768px) {
    .evaluations {
        grid-template-columns: repeat(2, 1fr) !important;
    }
}

@media (min-width: 1200px) {
    .evaluations {
        grid-template-columns: repeat(3, 1fr) !important;
    }
}

.evaluation {
    background: var(--bg-card) !important;
    border: 1px solid var(--border) !important;
    border-radius: 16px !important;
    padding: 2rem !important;
    transition: all 0.3s ease !important;
    display: flex !important;
    flex-direction: column !important;
    gap: 1rem !important;
}

.evaluation:hover {
    transform: translateY(-5px) !important;
    box-shadow: var(--shadow-lg) !important;
    border-color: var(--primary) !important;
}

.evaluation__profile {
    text-align: center !important;
    margin: 0 auto !important;
}

.evaluation__profile img {
    width: 80px !important;
    height: 80px !important;
    border-radius: 50% !important;
    object-fit: cover !important;
    border: 3px solid var(--primary) !important;
    box-shadow: var(--shadow-md) !important;
    margin: 0 auto !important;
}

.evaluation__content {
    flex: 1 !important;
    display: flex !important;
    flex-direction: column !important;
    gap: 0.75rem !important;
}

.evaluation__name {
    color: var(--text-primary) !important;
    font-size: 1.1rem !important;
    font-weight: 700 !important;
    margin: 0 !important;
    text-align: center !important;
}

.evaluation__data {
    color: var(--text-tertiary) !important;
    font-size: 0.85rem !important;
    text-align: center !important;
    margin: 0 !important;
}

.evaluation__stars {
    display: flex !important;
    justify-content: center !important;
    gap: 0.25rem !important;
    margin: 0.5rem 0 !important;
}

.evaluation__stars i {
    color: var(--warning) !important;
    font-size: 1rem !important;
}

.evaluation__stars i.fa-star-o {
    color: var(--text-tertiary) !important;
}

.evaluation__testimony {
    color: var(--text-secondary) !important;
    line-height: 1.6 !important;
    font-style: italic !important;
    text-align: center !important;
    padding: 1rem !important;
    background: var(--bg-secondary) !important;
    border-radius: 12px !important;
    border-left: 3px solid var(--primary) !important;
    margin: 0 !important;
    font-size: 0.95rem !important;
}

/* Título da seção de testemunhos */
.title-testimony {
    color: var(--text-primary) !important;
    font-size: 1.75rem !important;
    font-weight: 700 !important;
    margin-bottom: 2rem !important;
    text-transform: none !important;
}

/* Container da seção de testemunhos */
section[style*="display"] {
    margin-top: 3rem !important;
}

section h3.font-4 {
    color: var(--text-primary) !important;
    font-size: 1.75rem !important;
    font-weight: 700 !important;
    margin-bottom: 2rem !important;
    padding-bottom: 1rem !important;
    border-bottom: 2px solid var(--border) !important;
}

section h3.font-4 .text-blue {
    color: var(--primary) !important;
}

/* ============================================
   TESTEMUNHOS - CORREÇÃO COMPLETA
   ============================================ */

/* Override completo dos estilos anteriores */
.evaluations.mt-5 {
    display: grid !important;
    grid-template-columns: 1fr !important;
    gap: 2rem !important;
    margin-top: 2rem !important;
    margin-bottom: 3rem !important;
    padding: 0 !important;
}

@media (min-width: 768px) {
    .evaluations.mt-5 {
        grid-template-columns: repeat(2, 1fr) !important;
    }
}

@media (min-width: 1200px) {
    .evaluations.mt-5 {
        grid-template-columns: repeat(3, 1fr) !important;
        gap: 2.5rem !important;
    }
}

/* Card de cada testemunho */
.evaluations .evaluation {
    background: var(--bg-card) !important;
    border: 1px solid var(--border) !important;
    border-radius: 16px !important;
    padding: 2rem !important;
    transition: all 0.3s ease !important;
    display: flex !important;
    flex-direction: column !important;
    gap: 1.25rem !important;
    height: 100% !important;
    box-shadow: var(--shadow-sm) !important;
}

.evaluations .evaluation:hover {
    transform: translateY(-8px) !important;
    box-shadow: 0 12px 40px rgba(99, 102, 241, 0.2) !important;
    border-color: var(--primary) !important;
}

/* Profile - foto do usuário */
.evaluations .evaluation__profile {
    text-align: center !important;
    margin: 0 !important;
    padding: 0 !important;
}

.evaluations .evaluation__profile img {
    width: 90px !important;
    height: 90px !important;
    border-radius: 50% !important;
    object-fit: cover !important;
    border: 4px solid var(--primary) !important;
    box-shadow: 0 4px 12px rgba(99, 102, 241, 0.3) !important;
    margin: 0 auto !important;
    display: block !important;
}

/* Content - informações e testemunho */
.evaluations .evaluation__content {
    flex: 1 !important;
    display: flex !important;
    flex-direction: column !important;
    gap: 0.75rem !important;
    padding: 0 !important;
}

/* Nome do usuário */
.evaluations .evaluation__name {
    color: var(--text-primary) !important;
    font-size: 1.15rem !important;
    font-weight: 700 !important;
    margin: 0 !important;
    text-align: center !important;
    padding: 0 !important;
}

/* Data */
.evaluations .evaluation__data {
    color: var(--text-tertiary) !important;
    font-size: 0.85rem !important;
    text-align: center !important;
    margin: 0 !important;
    padding: 0 !important;
}

/* Estrelas */
.evaluations .evaluation__stars {
    display: flex !important;
    justify-content: center !important;
    gap: 0.3rem !important;
    margin: 0.5rem 0 !important;
    padding: 0 !important;
}

.evaluations .evaluation__stars i.fa-star {
    color: #fbbf24 !important;
    font-size: 1.1rem !important;
}

.evaluations .evaluation__stars i.fa-star-o {
    color: var(--text-tertiary) !important;
    font-size: 1.1rem !important;
}

/* Testemunho - texto */
.evaluations .evaluation__testimony {
    color: var(--text-secondary) !important;
    line-height: 1.7 !important;
    font-style: italic !important;
    text-align: center !important;
    padding: 1.25rem !important;
    background: var(--bg-secondary) !important;
    border-radius: 12px !important;
    border-left: 4px solid var(--primary) !important;
    margin: 0.5rem 0 0 0 !important;
    font-size: 0.95rem !important;
    position: relative !important;
}

.evaluations .evaluation__testimony::before {
    content: '"' !important;
    position: absolute !important;
    top: -10px !important;
    left: 15px !important;
    font-size: 3rem !important;
    color: var(--primary) !important;
    opacity: 0.2 !important;
    font-family: Georgia, serif !important;
}

/* Título da seção */
section h3.font-4.border-bottom {
    color: var(--text-primary) !important;
    font-size: 1.85rem !important;
    font-weight: 700 !important;
    margin-bottom: 0 !important;
    padding-bottom: 1.25rem !important;
    border-bottom: 2px solid var(--border) !important;
    background: transparent !important;
}

section h3.font-4.border-bottom .text-blue {
    color: var(--primary) !important;
    background: transparent !important;
}

/* Garantir que não há estilos conflitantes */
.evaluations .evaluation * {
    box-sizing: border-box !important;
}

/* ============================================
   TESTEMUNHOS - OVERRIDE COMPLETO DO SITE.CSS
   ============================================ */

/* Forçar width 100% e remover max-width do site.css */
@media (min-width:768px) {
    .evaluations .evaluation {
        width: 100% !important;
        max-width: 100% !important;
    }
}

@media (min-width:1024px) {
    .evaluations .evaluation {
        width: 100% !important;
        max-width: 100% !important;
    }
}

/* Remover transform e z-index negativo que causa sobreposição */
.evaluations .evaluation__content {
    background: var(--bg-card) !important;
    transform: none !important;
    z-index: 1 !important;
    color: var(--text-secondary) !important;
}

/* Garantir que todos os elementos internos tenham cores corretas */
.evaluations .evaluation__content * {
    color: inherit !important;
}

.evaluations .evaluation__name {
    color: var(--text-primary) !important;
}

.evaluations .evaluation__data {
    color: var(--text-tertiary) !important;
}

.evaluations .evaluation__testimony {
    color: var(--text-secondary) !important;
}

/* Remover padding excessivo do site.css */
.evaluations .evaluation {
    padding: 12px !important;
}

/* ============================================
   TESTEMUNHOS - CENTRALIZAR FOTO
   ============================================ */

/* Centralizar a foto do aluno */
.evaluations .evaluation__profile {
    display: flex !important;
    justify-content: center !important;
    align-items: center !important;
    width: 100% !important;
    height: auto !important;
    margin: 0 auto !important;
    padding: 0 !important;
    background: transparent !important;
    border-radius: 0 !important;
    box-shadow: none !important;
    overflow: visible !important;
}

/* ============================================
   FÓRUM - TEMA ESCURO COMPLETO
   ============================================ */

/* Search Forum */
form.search-forum input {
    background: var(--bg-secondary) !important;
    border: 1px solid var(--border) !important;
    color: var(--text-primary) !important;
    box-shadow: var(--shadow-sm) !important;
}

form.search-forum input:focus {
    outline-color: var(--primary) !important;
    border-color: var(--primary) !important;
}

form.search-forum input::placeholder {
    color: var(--text-tertiary) !important;
}

form.search-forum button {
    color: var(--text-secondary) !important;
}

form.search-forum:focus button {
    color: var(--primary) !important;
}

/* Sidebar do Fórum */
.filter {
    background: transparent !important;
}

.title-sidebar {
    color: var(--text-primary) !important;
    font-size: 1.1rem !important;
    font-weight: 700 !important;
    margin: 2rem 0 1rem 0 !important;
}

/* Categorias */
ul.categories {
    display: flex !important;
    flex-wrap: wrap !important;
    gap: 0.75rem !important;
    padding: 0 !important;
    margin: 0 !important;
}

ul.categories li {
    list-style: none !important;
}

ul.categories li a {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: 50px !important;
    height: 50px !important;
    border-radius: 12px !important;
    transition: all 0.3s ease !important;
    box-shadow: var(--shadow-sm) !important;
}

ul.categories li a:hover {
    transform: translateY(-4px) !important;
    box-shadow: var(--shadow-md) !important;
}

ul.categories li a img {
    width: 30px !important;
    height: 30px !important;
    object-fit: contain !important;
}

/* Tickets Container */
.tickets {
    background: transparent !important;
    padding: 0 !important;
}

/* Ticket Open - Card de cada ticket */
.ticket-open {
    background: var(--bg-card) !important;
    border: 1px solid var(--border) !important;
    border-radius: 16px !important;
    padding: 1.5rem !important;
    margin-bottom: 1.5rem !important;
    border-bottom: 1px solid var(--border) !important;
    transition: all 0.3s ease !important;
}

.ticket-open:hover {
    transform: translateY(-3px) !important;
    box-shadow: var(--shadow-lg) !important;
    border-color: var(--primary) !important;
}

.ticket-open img {
    width: 60px !important;
    height: 60px !important;
    border-radius: 50% !important;
    border: 3px solid var(--primary) !important;
    object-fit: cover !important;
}

/* Direct Chat - Bubble de mensagem */
.direct-chat {
    background: var(--bg-secondary) !important;
    border: 1px solid var(--border) !important;
    border-radius: 12px !important;
    padding: 1rem !important;
}

.direct-chat:before {
    border-right-color: var(--border) !important;
}

.direct-chat-name {
    color: var(--text-primary) !important;
    font-weight: 700 !important;
}

.direct-chat-timestamp {
    color: var(--text-tertiary) !important;
}

.direct-chat-text {
    color: var(--text-secondary) !important;
}

/* Subject Ticket */
.subject-ticket {
    background: var(--bg-secondary) !important;
    border: 1px solid var(--border) !important;
    color: var(--text-primary) !important;
}

/* Ticket Actions */
.ticket-action {
    display: flex !important;
    justify-content: space-between !important;
    align-items: center !important;
    margin-top: 1rem !important;
}

a.link-reply-comment {
    background: var(--primary) !important;
    color: var(--text-primary) !important;
    padding: 0.5rem 1rem !important;
    border-radius: 8px !important;
    font-size: 0.9rem !important;
    font-weight: 600 !important;
    transition: all 0.3s ease !important;
}

a.link-reply-comment:hover {
    background: var(--primary-light) !important;
    transform: translateY(-2px) !important;
}

a.link-reply-comment .badge {
    background: var(--warning) !important;
    color: var(--bg-primary) !important;
    margin-left: 0.5rem !important;
}

.text-comments {
    color: var(--text-secondary) !important;
    font-weight: 600 !important;
}

.text-comments:hover {
    color: var(--primary) !important;
}

/* Form Ticket */
.form-ticket {
    background: transparent !important;
}

.form-ticket label {
    color: var(--text-primary) !important;
    font-weight: 700 !important;
}

.form-ticket input,
.form-ticket select,
.form-ticket textarea {
    background: var(--bg-secondary) !important;
    border: 1px solid var(--border) !important;
    color: var(--text-primary) !important;
    border-radius: 8px !important;
    width: 100% !important;
    box-sizing: border-box !important;
}

.form-ticket input:focus,
.form-ticket select:focus,
.form-ticket textarea:focus {
    outline: none !important;
    border-color: var(--primary) !important;
    box-shadow: 0 0 0 3px rgba(99, 102, 241, 0.1) !important;
}

.form-ticket input::placeholder,
.form-ticket textarea::placeholder {
    color: var(--text-tertiary) !important;
}

.form-ticket button {
    background: var(--primary) !important;
    color: var(--text-primary) !important;
    font-weight: 700 !important;
    transition: all 0.3s ease !important;
    width: auto !important;
    max-width: 100% !important;
    box-sizing: border-box !important;
}

.form-ticket button:hover {
    background: var(--primary-light) !important;
    transform: translateY(-2px) !important;
    box-shadow: var(--shadow-md) !important;
}

/* Alert */
.alert {
    border-radius: 12px !important;
    border: 1px solid var(--border) !important;
}

.alert-info {
    background: rgba(99, 102, 241, 0.1) !important;
    border-color: var(--primary) !important;
    color: var(--text-primary) !important;
}

.alert-info a {
    color: var(--primary) !important;
}

.alert-info h4 {
    color: var(--text-primary) !important;
}

.alert-form-ticket {
    background: rgba(239, 68, 68, 0.1) !important;
    border-color: var(--danger) !important;
    color: var(--danger) !important;
}

/* Ticket Reply */
.ticket-reply img {
    border: 3px solid var(--primary) !important;
}

.ticket-reply .direct-chat {
    background: var(--bg-secondary) !important;
    border-color: var(--border) !important;
}

.ticket-reply .direct-chat:before {
    border-left-color: var(--border) !important;
    border-right-color: transparent !important;
}

/* Paginação */
.pag {
    margin-top: 2rem !important;
}

.pag .pagination {
    display: flex !important;
    gap: 0.5rem !important;
    justify-content: center !important;
}

.pag .pagination li {
    list-style: none !important;
}

.pag .pagination li a,
.pag .pagination li span {
    background: var(--bg-card) !important;
    border: 1px solid var(--border) !important;
    color: var(--text-secondary) !important;
    padding: 0.5rem 1rem !important;
    border-radius: 8px !important;
    transition: all 0.3s ease !important;
}

.pag .pagination li a:hover {
    background: var(--primary) !important;
    color: var(--text-primary) !important;
    border-color: var(--primary) !important;
}

.pag .pagination li.active span {
    background: var(--primary) !important;
    color: var(--text-primary) !important;
    border-color: var(--primary) !important;
}

.pag .pagination li.disabled span {
    opacity: 0.5 !important;
    cursor: not-allowed !important;
}

/* Course Detail (forum context) */
.course-detail {
    background: transparent !important;
    min-height: auto !important;
}

.ticket-margin {
    background: transparent !important;
    min-height: auto !important;
}

.open-ticket {
    background: var(--bg-secondary) !important;
    border: 1px solid var(--border) !important;
    border-radius: 16px !important;
    padding: 2rem !important;
    padding-bottom: 3rem !important;
    position: relative !important;
    z-index: 1 !important;
    width: 100% !important;
    box-sizing: border-box !important;
    overflow: visible !important;
}

.open-ticket .title-lesson-desc {
    color: var(--text-primary) !important;
    font-size: 1.5rem !important;
    font-weight: 700 !important;
    display: block !important;
    margin-bottom: 1.5rem !important;
}

.alert-form-ticket {
    color: var(--text-secondary) !important;
    display: block !important;
    margin: 1rem 0 !important;
    padding: 1rem !important;
    background: rgba(99, 102, 241, 0.1) !important;
    border-left: 3px solid var(--primary) !important;
    border-radius: 8px !important;
}

/* TinyMCE dentro do open-ticket */
.open-ticket .tox-tinymce,
.form-ticket .tox-tinymce {
    position: relative !important;
    z-index: 10 !important;
    width: 100% !important;
    box-sizing: border-box !important;
}

.open-ticket .tox.tox-tinymce,
.form-ticket .tox.tox-tinymce {
    z-index: 10 !important;
}

/* Dropdowns do TinyMCE */
.tox-tinymce-aux {
    z-index: 99999 !important;
}

/* ============================================
   BREADCRUMB - TEMA ESCURO MODERNO
   ============================================ */

/* Breadcrumb Custom */
.breadcrumb-custom {
    background: transparent !important;
    padding: 2rem 0 !important;
    border-bottom: 1px solid var(--border) !important;
    margin-bottom: 2rem !important;
}

.breadcrumb-custom li {
    list-style: none !important;
}

.breadcrumb-custom a {
    background: var(--bg-secondary) !important;
    color: var(--text-secondary) !important;
    border: 1px solid var(--border) !important;
    padding: 0.6rem 1.2rem !important;
    border-radius: 8px !important;
    text-shadow: none !important;
    font-weight: 600 !important;
    font-size: 0.9rem !important;
    transition: all 0.3s ease !important;
    position: relative !important;
    margin-right: 1.5rem !important;
}

.breadcrumb-custom a:hover {
    background: var(--primary) !important;
    color: var(--text-primary) !important;
    border-color: var(--primary) !important;
    transform: translateY(-2px) !important;
    box-shadow: var(--shadow-md) !important;
}

/* Setas do breadcrumb - modernizar */
.breadcrumb-custom a::before {
    content: "" !important;
    position: absolute !important;
    top: 50% !important;
    margin-top: -15px !important;
    border-width: 15px 0 15px 10px !important;
    border-style: solid !important;
    border-color: var(--bg-secondary) var(--bg-secondary) var(--bg-secondary) transparent !important;
    left: -10px !important;
    z-index: 1 !important;
}

.breadcrumb-custom a:hover::before {
    border-color: var(--primary) var(--primary) var(--primary) transparent !important;
}

.breadcrumb-custom a::after {
    content: "" !important;
    position: absolute !important;
    top: 50% !important;
    margin-top: -15px !important;
    border-top: 15px solid transparent !important;
    border-bottom: 15px solid transparent !important;
    border-left: 10px solid var(--bg-secondary) !important;
    right: -10px !important;
    z-index: 2 !important;
}

.breadcrumb-custom a:hover::after {
    border-left-color: var(--primary) !important;
}

/* Current item */
.breadcrumb-custom .current,
.breadcrumb-custom .current:hover {
    background: var(--primary) !important;
    color: var(--text-primary) !important;
    border-color: var(--primary) !important;
    font-weight: 700 !important;
    cursor: default !important;
    transform: none !important;
}

.breadcrumb-custom .current::after,
.breadcrumb-custom .current::before {
    content: normal !important;
}

/* Primeiro item - remover seta esquerda */
.breadcrumb-custom li:first-child a::before {
    content: normal !important;
}

/* Breadcrumbs alternativo (do site.css) */
.breadcrumbs {
    border-top: 1px solid var(--border) !important;
    padding: 1.5rem 0 !important;
    margin-top: 2rem !important;
}

.breadcrumbs a {
    color: var(--text-secondary) !important;
    font-weight: 600 !important;
    transition: all 0.3s ease !important;
}

.breadcrumbs a:hover {
    color: var(--primary) !important;
}

.breadcrumbs a.current {
    color: var(--primary) !important;
}

.breadcrumbs .divisor {
    color: var(--text-tertiary) !important;
}

/* Progress bar (se existir no breadcrumb) */
.progress {
    background: var(--bg-secondary) !important;
    border: 1px solid var(--border) !important;
}

.progress-bar {
    background: linear-gradient(90deg, var(--primary) 0%, var(--primary-light) 100%) !important;
    box-shadow: 0 0 10px rgba(99, 102, 241, 0.3) !important;
}

/* ============================================
   MENU LATERAL DE AULAS - ACCORDION
   ============================================ */

/* Accordion - Menu de Módulos e Aulas */
.accordion {
    background: transparent !important;
    border-radius: 12px !important;
}

.accordion dt {
    margin-top: 1rem !important;
    margin: 0 !important;
}

.accordion dt:first-child {
    margin-top: 0 !important;
}

/* Título do accordion - Módulo */
.accordionTitle,
.accordion__Heading {
    background: var(--bg-card) !important;
    border: 1px solid var(--border) !important;
    color: var(--text-primary) !important;
    padding: 1rem 1.25rem !important;
    border-radius: 12px !important;
    font-weight: 700 !important;
    font-size: 0.95rem !important;
    box-shadow: var(--shadow-sm) !important;
    transition: all 0.3s ease !important;
    border-bottom: 1px solid var(--border) !important;
}

.accordionTitle:hover {
    background: var(--bg-secondary) !important;
    border-color: var(--primary) !important;
}

.accordionTitle:visited,
.accordionTitle:active,
.accordionTitle:focus {
    color: var(--text-primary) !important;
}

.accordionTitle::before {
    color: var(--primary) !important;
    transition: transform 0.3s ease !important;
}

/* Módulo expandido/ativo */
.accordionTitleActive,
.accordionTitle.is-expanded {
    background: var(--primary) !important;
    color: var(--text-primary) !important;
    border-color: var(--primary) !important;
    box-shadow: var(--shadow-md) !important;
}

.accordionTitle.is-expanded::before {
    transform: rotate(180deg) !important;
    color: var(--text-primary) !important;
}

/* Item do accordion - Lista de aulas */
.accordionItem {
    background: transparent !important;
    overflow: hidden !important;
    transition: max-height 0.5s ease !important;
}

.accordionItem.is-collapsed {
    max-height: 0 !important;
}

/* Links das aulas */
.accordion p {
    background: var(--bg-secondary) !important;
    color: var(--text-secondary) !important;
    padding: 1rem 1.25rem !important;
    margin: 0.5rem 0 !important;
    border: 1px solid var(--border) !important;
    border-radius: 8px !important;
    font-size: 0.85rem !important;
    font-weight: 600 !important;
    transition: all 0.3s ease !important;
    cursor: pointer !important;
}

.accordion p:hover {
    background: var(--bg-card) !important;
    border-color: var(--primary) !important;
    color: var(--text-primary) !important;
    transform: translateX(5px) !important;
}

/* Aula atual */
.accordion p.current {
    background: var(--primary) !important;
    color: var(--text-primary) !important;
    border-color: var(--primary) !important;
    box-shadow: 0 4px 12px rgba(99, 102, 241, 0.3) !important;
    font-weight: 700 !important;
    transform: perspective(1px) scale(1) !important;
}

.accordion p.current:hover {
    transform: perspective(1px) scale(1) !important;
}

/* Badge (free, etc) */
.accordion p .badge {
    background: var(--warning) !important;
    color: var(--bg-primary) !important;
    padding: 0.25rem 0.5rem !important;
    border-radius: 4px !important;
    font-size: 0.7rem !important;
    font-weight: 700 !important;
}

.accordion p.current .badge {
    opacity: 0.9 !important;
    background: rgba(255, 255, 255, 0.2) !important;
    color: var(--text-primary) !important;
}

/* Ícone de check (aula vista) */
.accordion p i.fa-check {
    color: var(--success) !important;
}

.accordion p.current i.fa-check {
    color: var(--text-primary) !important;
}

/* Links dentro do accordion */
.accordion dd a {
    text-decoration: none !important;
    display: block !important;
}

.accordion dd a:hover {
    text-decoration: none !important;
}

/* Lesson description */
.lesson-description {
    background: transparent !important;
    color: var(--text-secondary) !important;
}

.lesson-description p {
    color: var(--text-secondary) !important;
}

/* Title lesson */
.title-lesson {
    color: var(--text-primary) !important;
    background: var(--bg-card) !important;
    padding: 1rem 1.5rem !important;
    border-radius: 8px !important;
    border-left: 4px solid var(--primary) !important;
    box-shadow: var(--shadow-sm) !important;
}

.title-lesson-desc {
    color: var(--text-primary) !important;
}

.title-lesson-desc i {
    color: var(--primary) !important;
}

/* Lesson actions (anterior/próximo) */
.action-lessons {
    margin-top: 2rem !important;
    gap: 1rem !important;
}

.lesson-action {
    background: var(--primary) !important;
    color: var(--text-primary) !important;
    padding: 1rem 1.5rem !important;
    border-radius: 12px !important;
    font-weight: 700 !important;
    transition: all 0.3s ease !important;
    box-shadow: var(--shadow-sm) !important;
}

.lesson-action:hover {
    background: var(--primary-light) !important;
    transform: translateY(-3px) !important;
    box-shadow: var(--shadow-md) !important;
}

/* Last lessons (últimas aulas) */
.last-lessons .lesson-item {
    background: var(--bg-card) !important;
    border-radius: 8px !important;
    margin-bottom: 0.5rem !important;
}

.last-lessons .lesson-item + .lesson-item .lesson-link {
    border-top: 1px solid var(--border) !important;
}

.last-lessons .lesson-link {
    color: var(--text-secondary) !important;
    transition: all 0.3s ease !important;
}

.last-lessons .lesson-link:hover {
    color: var(--primary) !important;
    background: var(--bg-secondary) !important;
    padding-left: 1rem !important;
}

/* Video player */
.video-course,
.video-lesson {
    border-radius: 12px !important;
    overflow: hidden !important;
    box-shadow: var(--shadow-lg) !important;
    border: 1px solid var(--border) !important;
}

/* ============================================
   ALERT LOGIN - MODERNIZADO
   ============================================ */

/* Alert de Login Moderno */
.alert-login-modern {
    display: flex !important;
    align-items: center !important;
    gap: 2rem !important;
    background: var(--bg-card) !important;
    border: 2px solid var(--primary) !important;
    border-radius: 16px !important;
    padding: 2.5rem !important;
    margin: 2rem 0 !important;
    box-shadow: 0 8px 24px rgba(99, 102, 241, 0.2) !important;
    position: relative !important;
    overflow: hidden !important;
}

.alert-login-modern::before {
    content: '' !important;
    position: absolute !important;
    top: 0 !important;
    left: 0 !important;
    width: 100% !important;
    height: 100% !important;
    background: linear-gradient(135deg, rgba(99, 102, 241, 0.05) 0%, transparent 100%) !important;
    pointer-events: none !important;
}

.alert-login-icon {
    flex-shrink: 0 !important;
    width: 80px !important;
    height: 80px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    background: var(--primary) !important;
    border-radius: 50% !important;
    box-shadow: 0 4px 16px rgba(99, 102, 241, 0.4) !important;
    position: relative !important;
    z-index: 1 !important;
}

.alert-login-icon i {
    font-size: 2rem !important;
    color: var(--text-primary) !important;
}

.alert-login-content {
    flex: 1 !important;
    position: relative !important;
    z-index: 1 !important;
}

.alert-login-title {
    color: var(--text-primary) !important;
    font-size: 1.5rem !important;
    font-weight: 700 !important;
    margin: 0 0 0.75rem 0 !important;
}

.alert-login-text {
    color: var(--text-secondary) !important;
    font-size: 1rem !important;
    line-height: 1.6 !important;
    margin: 0 0 1.5rem 0 !important;
}

.alert-login-btn {
    display: inline-flex !important;
    align-items: center !important;
    gap: 0.75rem !important;
    background: var(--primary) !important;
    color: var(--text-primary) !important;
    padding: 0.875rem 2rem !important;
    border-radius: 10px !important;
    font-weight: 700 !important;
    font-size: 1rem !important;
    text-decoration: none !important;
    transition: all 0.3s ease !important;
    box-shadow: 0 4px 12px rgba(99, 102, 241, 0.3) !important;
}

.alert-login-btn:hover {
    background: var(--primary-light) !important;
    transform: translateY(-3px) !important;
    box-shadow: 0 6px 20px rgba(99, 102, 241, 0.4) !important;
    color: var(--text-primary) !important;
}

.alert-login-btn i {
    font-size: 1.1rem !important;
}

/* Responsivo */
@media (max-width: 768px) {
    .alert-login-modern {
        flex-direction: column !important;
        text-align: center !important;
        padding: 2rem !important;
    }
    
    .alert-login-icon {
        width: 70px !important;
        height: 70px !important;
    }
    
    .alert-login-icon i {
        font-size: 1.75rem !important;
    }
    
    .alert-login-title {
        font-size: 1.25rem !important;
    }
}

/* Manter compatibilidade com .no-auth antigo */
.no-auth {
    background: rgba(99, 102, 241, 0.1) !important;
    border: 2px solid var(--primary) !important;
    border-radius: 12px !important;
    padding: 1.5rem !important;
    text-align: center !important;
}

.no-auth p {
    color: var(--text-primary) !important;
    margin-bottom: 1rem !important;
    font-size: 1.1rem !important;
}

.no-auth a {
    display: inline-block !important;
    background: var(--primary) !important;
    color: var(--text-primary) !important;
    padding: 0.75rem 1.5rem !important;
    border-radius: 8px !important;
    text-decoration: none !important;
    font-weight: 700 !important;
    transition: all 0.3s ease !important;
}

.no-auth a:hover {
    background: var(--primary-light) !important;
    transform: translateY(-2px) !important;
}

/* ============================================
   USER MENU DROPDOWN - MODERNO
   ============================================ */

/* Dropdown de usuário */
.user-menu-dropdown {
    position: relative !important;
}

.user-menu-trigger {
    display: flex !important;
    align-items: center !important;
    gap: 0.5rem !important;
    padding: 0.5rem 1rem !important;
    background: var(--bg-secondary) !important;
    border: 1px solid var(--border) !important;
    border-radius: 10px !important;
    color: var(--text-primary) !important;
    font-weight: 600 !important;
    transition: all 0.3s ease !important;
    cursor: pointer !important;
}

.user-menu-trigger:hover {
    background: var(--bg-card) !important;
    border-color: var(--primary) !important;
    color: var(--text-primary) !important;
    text-decoration: none !important;
}

.user-menu-trigger i.fa-user-circle {
    font-size: 1.5rem !important;
    color: var(--primary) !important;
}

.user-menu-trigger i.fa-chevron-down {
    font-size: 0.8rem !important;
    transition: transform 0.3s ease !important;
}

.user-menu-dropdown:hover .user-menu-trigger i.fa-chevron-down {
    transform: rotate(180deg) !important;
}

/* Menu dropdown */
.user-dropdown-menu {
    position: absolute !important;
    top: calc(100% + 0.5rem) !important;
    right: 0 !important;
    background: var(--bg-card) !important;
    border: 1px solid var(--border) !important;
    border-radius: 12px !important;
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.3) !important;
    min-width: 220px !important;
    padding: 0.5rem 0 !important;
    opacity: 0 !important;
    visibility: hidden !important;
    transform: translateY(-10px) !important;
    transition: all 0.3s ease !important;
    z-index: 1000 !important;
    list-style: none !important;
    margin: 0 !important;
}

.user-menu-dropdown:hover .user-dropdown-menu {
    opacity: 1 !important;
    visibility: visible !important;
    transform: translateY(0) !important;
}

.user-dropdown-menu li {
    margin: 0 !important;
    padding: 0 !important;
}

.user-dropdown-menu li a {
    display: flex !important;
    align-items: center !important;
    gap: 0.75rem !important;
    padding: 0.875rem 1.25rem !important;
    color: var(--text-secondary) !important;
    font-weight: 600 !important;
    font-size: 0.95rem !important;
    transition: all 0.2s ease !important;
    text-decoration: none !important;
}

.user-dropdown-menu li a:hover {
    background: var(--bg-secondary) !important;
    color: var(--primary) !important;
    padding-left: 1.5rem !important;
}

.user-dropdown-menu li a i {
    width: 20px !important;
    text-align: center !important;
    color: var(--primary) !important;
    font-size: 1.1rem !important;
}

/* Divider */
.user-dropdown-menu li.divider {
    height: 1px !important;
    background: var(--border) !important;
    margin: 0.5rem 0 !important;
}

/* Sair - destaque vermelho */
.user-dropdown-menu li:last-child a {
    color: var(--danger) !important;
}

.user-dropdown-menu li:last-child a i {
    color: var(--danger) !important;
}

.user-dropdown-menu li:last-child a:hover {
    background: rgba(239, 68, 68, 0.1) !important;
    color: var(--danger) !important;
}

/* Responsivo - mobile */
@media (max-width: 768px) {
    .user-menu-trigger span {
        display: none !important;
    }
    
    .user-dropdown-menu {
        right: auto !important;
        left: 50% !important;
        transform: translateX(-50%) translateY(-10px) !important;
    }
    
    .user-menu-dropdown:hover .user-dropdown-menu {
        transform: translateX(-50%) translateY(0) !important;
    }
}

/* ============================================
   PROFILE PAGE - MEU PERFIL
   ============================================ */

/* Box containers - Dark theme override */
.box {
    background: transparent !important;
}

.box-container,
.box-login {
    background: var(--bg-secondary) !important;
    border: 1px solid var(--border-color) !important;
}

.box-login--large {
    background: var(--bg-secondary) !important;
    border: 1px solid var(--border-color) !important;
}

/* Profile form styling */
.box-login h2,
.box-login h3,
.box-login h4 {
    color: var(--text-primary) !important;
    margin-bottom: 1.5rem;
}

.box-login .title-form {
    color: var(--text-primary) !important;
    font-size: 1.8rem;
    font-weight: 700;
    margin-bottom: 2rem;
    background: linear-gradient(135deg, var(--primary) 0%, var(--secondary) 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

/* Form groups */
.form-eti .form-group {
    margin-bottom: 1.5rem;
}

.form-eti label {
    color: var(--text-primary) !important;
    font-weight: 500;
    margin-bottom: 0.5rem;
    display: block;
}

.form-eti .form-control {
    background: var(--bg-primary) !important;
    border: 1px solid var(--border-color) !important;
    color: var(--text-primary) !important;
    border-radius: 8px;
    padding: 12px 15px;
    transition: all 0.3s ease;
}

.form-eti .form-control:focus {
    background: var(--bg-primary) !important;
    border-color: var(--primary) !important;
    color: var(--text-primary) !important;
    box-shadow: 0 0 0 3px rgba(99, 102, 241, 0.1) !important;
    outline: none;
}

.form-eti .form-control::placeholder {
    color: var(--text-muted) !important;
}

/* Input groups with icons */
.form-eti .input-group {
    position: relative;
}

.form-eti .input-group i {
    color: var(--text-muted);
}

.form-eti .input-group-prepend,
.form-eti .input-group-append {
    background: var(--bg-primary);
    border: 1px solid var(--border-color);
}

.form-eti .input-group-text {
    background: var(--bg-primary) !important;
    border: 1px solid var(--border-color) !important;
    color: var(--text-muted) !important;
}

/* Submit button */
.form-eti .btn-submit,
.form-eti button[type="submit"],
.form-eti .btn-primary {
    background: linear-gradient(135deg, var(--primary) 0%, var(--secondary) 100%) !important;
    border: none !important;
    color: white !important;
    padding: 12px 30px;
    border-radius: 8px;
    font-weight: 600;
    transition: all 0.3s ease;
    cursor: pointer;
}

.form-eti .btn-submit:hover,
.form-eti button[type="submit"]:hover,
.form-eti .btn-primary:hover {
    transform: translateY(-2px);
    box-shadow: 0 10px 25px rgba(99, 102, 241, 0.3) !important;
}

/* Image upload preview */
.form-eti .image-preview {
    background: var(--bg-primary);
    border: 2px dashed var(--border-color);
    border-radius: 8px;
    padding: 20px;
    text-align: center;
    margin-top: 10px;
}

.form-eti .image-preview img {
    max-width: 200px;
    border-radius: 8px;
    border: 2px solid var(--border-color);
}

/* Help text */
.form-eti small,
.form-eti .form-text {
    color: var(--text-muted) !important;
}

/* Alert messages in profile */
.box-login .alert {
    background: rgba(99, 102, 241, 0.1) !important;
    border: 1px solid rgba(99, 102, 241, 0.2) !important;
    color: var(--text-primary) !important;
    border-radius: 8px;
}

.box-login .alert-success {
    background: rgba(34, 197, 94, 0.1) !important;
    border-color: rgba(34, 197, 94, 0.2) !important;
    color: #22c55e !important;
}

.box-login .alert-danger {
    background: rgba(239, 68, 68, 0.1) !important;
    border-color: rgba(239, 68, 68, 0.2) !important;
    color: #ef4444 !important;
}

/* Social links section */
.form-eti .social-links-section {
    margin-top: 2rem;
    padding-top: 2rem;
    border-top: 1px solid var(--border-color);
}

.form-eti .social-links-section h4 {
    color: var(--text-primary) !important;
    margin-bottom: 1rem;
}

/* Responsive adjustments */
@media (max-width: 768px) {
    .box-login--large {
        width: 95vw !important;
        padding: 20px !important;
    }
    
    .box-login .title-form {
        font-size: 1.5rem;
    }
    
    .form-eti .btn-submit,
    .form-eti button[type="submit"] {
        width: 100%;
    }
}

/* ============================================
   INPUT GROUP ADDON - FIX PROFILE PAGE
   ============================================ */

/* Override input-group-addon styling */
.form-eti .input-group-addon {
    background: rgba(99, 102, 241, 0.1) !important;
    color: var(--primary) !important;
    border: 1px solid var(--border-color) !important;
    border-right: none !important;
    margin: 0 !important;
    padding: 12px 15px !important;
    min-width: 48px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    border-radius: 8px 0 0 8px !important;
    font-size: 0.9rem !important;
    font-weight: 500 !important;
}

.form-eti .input-group-addon i {
    color: var(--primary) !important;
}

/* Fix input alignment with addon */
.form-eti .input-group .form-control {
    border-radius: 0 8px 8px 0 !important;
    border-left: none !important;
}

/* Social media addons (text based) */
.form-eti .input-group-addon:not(:has(i)) {
    font-size: 0.85rem !important;
    min-width: auto !important;
    padding: 12px 12px !important;
    white-space: nowrap !important;
}

/* Input group container */
.form-eti .input-group {
    display: flex !important;
    width: 100% !important;
}

/* Disabled inputs styling */
.form-eti .form-control:disabled,
.form-eti .form-control[disabled] {
    background: rgba(255, 255, 255, 0.05) !important;
    color: var(--text-muted) !important;
    cursor: not-allowed !important;
    opacity: 0.7 !important;
}

/* Help block errors */
.form-eti .help-block {
    color: #ef4444 !important;
    font-size: 0.875rem !important;
    margin-top: 0.5rem !important;
    display: block !important;
}

.form-eti .has-error .form-control {
    border-color: #ef4444 !important;
}

.form-eti .has-error .input-group-addon {
    border-color: #ef4444 !important;
    background: rgba(239, 68, 68, 0.1) !important;
    color: #ef4444 !important;
}

/* Responsive input groups */
@media (max-width: 768px) {
    .form-eti .input-group-addon {
        min-width: 42px !important;
        padding: 10px 12px !important;
        font-size: 0.8rem !important;
    }
    
    .form-eti .input-group-addon:not(:has(i)) {
        font-size: 0.75rem !important;
        padding: 10px 8px !important;
    }
}

/* ============================================
   INPUT GROUP ADDON - HEIGHT FIX
   ============================================ */

/* Fix addon height to match input exactly */
.form-eti .input-group-addon {
    height: auto !important;
    line-height: 1.5 !important;
    padding: 10px 15px !important;
}

.form-eti .input-group .form-control {
    height: auto !important;
    padding: 10px 15px !important;
}

/* Ensure perfect vertical alignment */
.form-eti .input-group {
    align-items: stretch !important;
}

.form-eti .input-group-addon,
.form-eti .input-group .form-control {
    align-self: stretch !important;
}

/* Social media text addons - tighter padding */
.form-eti .input-group-addon:not(:has(i)) {
    padding: 10px 12px !important;
}

@media (max-width: 768px) {
    .form-eti .input-group-addon {
        padding: 8px 12px !important;
    }
    
    .form-eti .input-group .form-control {
        padding: 8px 12px !important;
    }
    
    .form-eti .input-group-addon:not(:has(i)) {
        padding: 8px 10px !important;
    }
}

/* ============================================
   INPUT GROUP ADDON - COMPLETE FIX
   ============================================ */

/* Remove the top margin from site.css */
.input-group-addon {
    margin: 0 !important;
}

/* Complete reset for form-eti input groups */
.form-eti .input-group-addon,
.form-eti .input-group .form-control {
    margin: 0 !important;
    box-sizing: border-box !important;
}

/* ============================================
   SUBSCRIPTION PAGE - MINHA ASSINATURA
   ============================================ */

/* Card de Status da Assinatura */
.subscription-status-card {
    background: var(--bg-secondary);
    border: 1px solid var(--border-color);
    border-radius: 16px;
    padding: 2rem;
    box-shadow: 0 10px 40px rgba(0, 0, 0, 0.3);
    margin-top: 4.5rem;
}

.subscription-header {
    display: flex;
    align-items: center;
    gap: 1.5rem;
    padding-bottom: 2rem;
    border-bottom: 1px solid var(--border-color);
}

.subscription-icon {
    width: 80px;
    height: 80px;
    border-radius: 50%;
    background: linear-gradient(135deg, rgba(99, 102, 241, 0.1) 0%, rgba(168, 85, 247, 0.1) 100%);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 2.5rem;
    flex-shrink: 0;
}

.subscription-icon i {
    background: linear-gradient(135deg, var(--primary) 0%, var(--secondary) 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

.subscription-title h3 {
    color: var(--text-primary);
    font-size: 1.8rem;
    font-weight: 700;
    margin: 0;
    margin-bottom: 0.5rem;
}

.subscription-subtitle {
    color: var(--text-muted);
    font-size: 1rem;
    margin: 0;
}

/* Info Items */
.subscription-info-item {
    display: flex;
    align-items: center;
    gap: 1rem;
    padding: 1.5rem;
    background: rgba(99, 102, 241, 0.05);
    border: 1px solid rgba(99, 102, 241, 0.1);
    border-radius: 12px;
    transition: all 0.3s ease;
}

.subscription-info-item:hover {
    background: rgba(99, 102, 241, 0.08);
    border-color: rgba(99, 102, 241, 0.2);
    transform: translateY(-2px);
}

.info-icon {
    width: 48px;
    height: 48px;
    border-radius: 10px;
    background: rgba(99, 102, 241, 0.1);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.5rem;
    color: var(--primary);
    flex-shrink: 0;
}

.info-content {
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
}

.info-label {
    color: var(--text-muted);
    font-size: 0.85rem;
    font-weight: 500;
}

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

/* Status Badges */
.badge-status {
    display: inline-flex;
    align-items: center;
    padding: 0.4rem 1rem;
    border-radius: 20px;
    font-size: 0.85rem;
    font-weight: 600;
    letter-spacing: 0.5px;
}

.badge-status--active {
    background: rgba(34, 197, 94, 0.15);
    color: #22c55e;
}

.badge-status--expired {
    background: rgba(239, 68, 68, 0.15);
    color: #ef4444;
}

.badge-status--suspended {
    background: rgba(245, 158, 11, 0.15);
    color: #f59e0b;
}

.badge-status--inactive {
    background: rgba(156, 163, 175, 0.15);
    color: #9ca3af;
}

/* Cancel Info */
.subscription-cancel-info {
    display: flex;
    gap: 1.5rem;
    padding: 1.5rem;
    margin-top: 2rem;
    background: rgba(239, 68, 68, 0.05);
    border: 1px solid rgba(239, 68, 68, 0.1);
    border-radius: 12px;
}

.cancel-icon {
    width: 48px;
    height: 48px;
    border-radius: 10px;
    background: rgba(239, 68, 68, 0.1);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.5rem;
    color: #ef4444;
    flex-shrink: 0;
}

.cancel-content h4 {
    color: var(--text-primary);
    font-size: 1.1rem;
    font-weight: 600;
    margin: 0 0 0.5rem 0;
}

.cancel-content p {
    color: var(--text-muted);
    font-size: 0.95rem;
    line-height: 1.6;
    margin: 0;
}

.cancel-content a {
    color: var(--primary);
    text-decoration: underline;
}

/* Suspended Alert */
.subscription-suspended-alert {
    display: flex;
    gap: 1.5rem;
    padding: 1.5rem;
    margin-top: 2rem;
    background: rgba(245, 158, 11, 0.05);
    border: 1px solid rgba(245, 158, 11, 0.1);
    border-radius: 12px;
}

.alert-icon {
    width: 48px;
    height: 48px;
    border-radius: 10px;
    background: rgba(245, 158, 11, 0.1);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.5rem;
    color: #f59e0b;
    flex-shrink: 0;
}

.alert-content h4 {
    color: var(--text-primary);
    font-size: 1.1rem;
    font-weight: 600;
    margin: 0 0 0.5rem 0;
}

.alert-content p {
    color: var(--text-muted);
    font-size: 0.95rem;
    margin: 0;
}

/* History Card */
.subscription-history-card {
    background: var(--bg-secondary);
    border: 1px solid var(--border-color);
    border-radius: 16px;
    padding: 2rem;
    margin-bottom: 3rem;
    box-shadow: 0 10px 40px rgba(0, 0, 0, 0.3);
}

.history-header {
    padding-bottom: 1.5rem;
    border-bottom: 1px solid var(--border-color);
    margin-bottom: 1.5rem;
}

.history-header h3 {
    color: var(--text-primary);
    font-size: 1.5rem;
    font-weight: 700;
    margin: 0;
}

.history-header i {
    margin-right: 0.5rem;
    color: var(--primary);
}

/* Table */
.subscription-history-table {
    width: 100%;
    border-collapse: separate;
    border-spacing: 0;
}

.subscription-history-table thead th {
    background: rgba(99, 102, 241, 0.05);
    color: var(--text-primary);
    font-weight: 600;
    font-size: 0.9rem;
    padding: 1rem 1.5rem;
    text-align: left;
    border-bottom: 2px solid var(--border-color);
}

.subscription-history-table thead th:first-child {
    border-top-left-radius: 8px;
}

.subscription-history-table thead th:last-child {
    border-top-right-radius: 8px;
}

.subscription-history-table tbody tr {
    transition: all 0.2s ease;
}

.subscription-history-table tbody tr:hover {
    background: rgba(99, 102, 241, 0.03);
}

.subscription-history-table tbody td {
    padding: 1.25rem 1.5rem;
    border-bottom: 1px solid var(--border-color);
    color: var(--text-muted);
    font-size: 0.95rem;
}

.subscription-history-table tbody tr:last-child td {
    border-bottom: none;
}

.plan-name {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    color: var(--text-primary);
    font-weight: 600;
}

.plan-name i {
    color: var(--primary);
    font-size: 1.1rem;
}

/* History Status Badges */
.history-status-badge {
    display: inline-flex;
    align-items: center;
    padding: 0.35rem 0.9rem;
    border-radius: 16px;
    font-size: 0.8rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.history-status--active,
.history-status--ativa {
    background: rgba(34, 197, 94, 0.15);
    color: #22c55e;
}

.history-status--expired,
.history-status--expirada {
    background: rgba(239, 68, 68, 0.15);
    color: #ef4444;
}

.history-status--suspended,
.history-status--suspensa {
    background: rgba(245, 158, 11, 0.15);
    color: #f59e0b;
}

.history-status--pending,
.history-status--pendente {
    background: rgba(59, 130, 246, 0.15);
    color: #3b82f6;
}

/* Empty State */
.empty-state {
    padding: 3rem;
    text-align: center;
}

.empty-state i {
    font-size: 4rem;
    color: var(--text-muted);
    opacity: 0.3;
    margin-bottom: 1rem;
}

.empty-state p {
    color: var(--text-muted);
    font-size: 1rem;
    margin: 0;
}

/* Responsive */
@media (max-width: 768px) {
    .subscription-status-card,
    .subscription-history-card {
        padding: 1.5rem;
    }

    .subscription-header {
        flex-direction: column;
        text-align: center;
        gap: 1rem;
    }

    .subscription-icon {
        width: 60px;
        height: 60px;
        font-size: 2rem;
    }

    .subscription-title h3 {
        font-size: 1.5rem;
    }

    .subscription-info-item {
        padding: 1rem;
    }

    .info-icon {
        width: 40px;
        height: 40px;
        font-size: 1.2rem;
    }

    .subscription-cancel-info,
    .subscription-suspended-alert {
        flex-direction: column;
        align-items: center;
        text-align: center;
    }

    .table-responsive {
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
    }

    .subscription-history-table {
        min-width: 600px;
    }

    .subscription-history-table thead th,
    .subscription-history-table tbody td {
        padding: 0.75rem 1rem;
        font-size: 0.85rem;
    }
}

/* ============================================
   REMOVE ZOOM FROM COURSE IMAGES - FIX
   ============================================ */

/* Remove all zoom effects from course card images */
.card-course__image img,
.card-course:hover .card-course__image img,
.card-course__image[data-img=cover] img,
.card-course:hover .card-course__image[data-img=cover] img {
    transform: none !important;
    transition: none !important;
}

/* Keep only the card hover effect, not the image */
.card-course {
    transition: all 0.3s ease !important;
}

.card-course:hover {
    transform: translateY(-8px) !important;
}

/* ============================================
   TEACHER PAGE - PROFESSOR
   ============================================ */

/* Empty state for courses */
.empty-state-courses {
    text-align: center;
    padding: 4rem 2rem;
    background: var(--bg-secondary);
    border: 1px solid var(--border-color);
    border-radius: 12px;
    margin: 2rem 0;
}

.empty-state-courses i {
    font-size: 4rem;
    color: var(--text-muted);
    opacity: 0.3;
    margin-bottom: 1rem;
}

.empty-state-courses p {
    color: var(--text-muted);
    font-size: 1.1rem;
    margin: 0;
}

/* Course card metadata */
.course-card-meta {
    display: flex;
    align-items: center;
    gap: 1rem;
    margin-top: 1rem;
    padding-top: 1rem;
    border-top: 1px solid var(--border-color);
}

.course-level {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    font-size: 0.85rem;
    color: var(--text-muted);
    font-weight: 500;
}

.course-level i {
    color: var(--primary);
}

/* ============================================
   TINYMCE EDITOR - DARK THEME
   ============================================ */

/* TinyMCE container */
.mce-tinymce,
.tox .tox-tinymce {
    border: 1px solid var(--border-color) !important;
    border-radius: 8px !important;
    background: var(--bg-secondary) !important;
}

/* TinyMCE toolbar */
.mce-toolbar-grp,
.tox .tox-toolbar,
.tox .tox-toolbar__primary {
    background: var(--bg-primary) !important;
    border-bottom: 1px solid var(--border-color) !important;
}

/* TinyMCE buttons */
.mce-btn,
.tox .tox-tbtn {
    background: transparent !important;
    color: var(--text-primary) !important;
}

.mce-btn:hover,
.tox .tox-tbtn:hover {
    background: rgba(99, 102, 241, 0.1) !important;
    color: var(--primary) !important;
}

/* TinyMCE editor area */
.mce-edit-area,
.tox .tox-edit-area,
.tox .tox-edit-area__iframe {
    background: var(--bg-secondary) !important;
}

/* TinyMCE content area */
.mce-content-body,
body.mce-content-body {
    background: var(--bg-secondary) !important;
    color: var(--text-primary) !important;
}

/* TinyMCE menu bar */
.mce-menubar,
.tox .tox-menubar {
    background: var(--bg-primary) !important;
    border-bottom: 1px solid var(--border-color) !important;
}

.mce-menubtn,
.tox .tox-mbtn {
    color: var(--text-primary) !important;
}

.mce-menubtn:hover,
.tox .tox-mbtn:hover {
    background: rgba(99, 102, 241, 0.1) !important;
}

/* TinyMCE status bar */
.mce-statusbar,
.tox .tox-statusbar {
    background: var(--bg-primary) !important;
    border-top: 1px solid var(--border-color) !important;
}

/* TinyMCE path */
.mce-path,
.tox .tox-statusbar__path {
    color: var(--text-muted) !important;
}

/* TinyMCE panels and modals */
.mce-panel,
.tox .tox-dialog,
.tox .tox-dialog__header,
.tox .tox-dialog__body {
    background: var(--bg-secondary) !important;
    color: var(--text-primary) !important;
}

/* TinyMCE dropdowns */
.mce-menu,
.tox .tox-menu,
.tox .tox-collection {
    background: var(--bg-secondary) !important;
    border: 1px solid var(--border-color) !important;
}

.mce-menu-item,
.tox .tox-collection__item {
    color: var(--text-primary) !important;
}

.mce-menu-item:hover,
.mce-menu-item.mce-selected,
.tox .tox-collection__item:hover {
    background: rgba(99, 102, 241, 0.1) !important;
    color: var(--primary) !important;
}

/* TinyMCE icons */
.mce-ico,
.tox .tox-icon svg {
    fill: var(--text-primary) !important;
}

.mce-btn:hover .mce-ico,
.tox .tox-tbtn:hover .tox-icon svg {
    fill: var(--primary) !important;
}

/* TinyMCE inputs */
.mce-textbox,
.tox input,
.tox textarea,
.tox select {
    background: var(--bg-primary) !important;
    border: 1px solid var(--border-color) !important;
    color: var(--text-primary) !important;
}

.mce-textbox:focus,
.tox input:focus,
.tox textarea:focus,
.tox select:focus {
    border-color: var(--primary) !important;
    box-shadow: 0 0 0 2px rgba(99, 102, 241, 0.1) !important;
}

/* TinyMCE labels */
.mce-label,
.tox label {
    color: var(--text-primary) !important;
}

/* TinyMCE buttons in dialogs */
.mce-btn.mce-primary,
.tox .tox-button {
    background: linear-gradient(135deg, var(--primary) 0%, var(--secondary) 100%) !important;
    color: white !important;
    border: none !important;
}

.mce-btn.mce-primary:hover,
.tox .tox-button:hover {
    box-shadow: 0 4px 12px rgba(99, 102, 241, 0.3) !important;
}

/* TinyMCE scrollbars */
.mce-container *::-webkit-scrollbar,
.tox *::-webkit-scrollbar {
    width: 8px;
    height: 8px;
}

.mce-container *::-webkit-scrollbar-track,
.tox *::-webkit-scrollbar-track {
    background: var(--bg-primary);
}

.mce-container *::-webkit-scrollbar-thumb,
.tox *::-webkit-scrollbar-thumb {
    background: rgba(99, 102, 241, 0.3);
    border-radius: 4px;
}

.mce-container *::-webkit-scrollbar-thumb:hover,
.tox *::-webkit-scrollbar-thumb:hover {
    background: rgba(99, 102, 241, 0.5);
}

/* TinyMCE split buttons */
.mce-splitbtn:hover,
.tox .tox-split-button:hover {
    background: rgba(99, 102, 241, 0.1) !important;
}

/* TinyMCE color picker */
.mce-colorbutton-grid,
.tox .tox-swatches {
    background: var(--bg-secondary) !important;
}

/* TinyMCE notifications */
.mce-notification,
.tox .tox-notification {
    background: var(--bg-secondary) !important;
    border: 1px solid var(--border-color) !important;
    color: var(--text-primary) !important;
}

/* TinyMCE resize handle */
.mce-resizehandle,
.tox .tox-statusbar__resize-handle svg {
    fill: var(--text-muted) !important;
}

/* ============================================
   TINYMCE EDITOR - CONTEÚDO INTERNO (IFRAME)
   ============================================ */

/* Força tema escuro no iframe de conteúdo */
.mce-content-body,
body.mce-content-body,
body#tinymce {
    background-color: var(--bg-secondary) !important;
    color: var(--text-primary) !important;
}

/* Títulos dentro do editor */
.mce-content-body h1,
.mce-content-body h2,
.mce-content-body h3,
.mce-content-body h4,
.mce-content-body h5,
.mce-content-body h6 {
    color: var(--text-primary) !important;
}

/* Parágrafos e texto */
.mce-content-body p,
.mce-content-body div,
.mce-content-body span {
    color: var(--text-primary) !important;
}

/* Listas */
.mce-content-body ul,
.mce-content-body ol,
.mce-content-body li {
    color: var(--text-primary) !important;
}

/* Links dentro do editor */
.mce-content-body a {
    color: var(--primary) !important;
}

.mce-content-body a:hover {
    color: var(--secondary) !important;
}

/* Tabelas */
.mce-content-body table,
.mce-content-body td,
.mce-content-body th {
    border-color: var(--border-color) !important;
    color: var(--text-primary) !important;
}

/* Blockquotes */
.mce-content-body blockquote {
    border-left-color: var(--primary) !important;
    color: var(--text-muted) !important;
}

/* Código */
.mce-content-body code,
.mce-content-body pre {
    background: var(--bg-primary) !important;
    color: var(--primary) !important;
    border: 1px solid var(--border-color) !important;
}

/* Seleção de texto no editor */
.mce-content-body ::selection {
    background: rgba(99, 102, 241, 0.3) !important;
    color: var(--text-primary) !important;
}

.mce-content-body ::-moz-selection {
    background: rgba(99, 102, 241, 0.3) !important;
    color: var(--text-primary) !important;
}

/* Placeholder/hint text */
.mce-content-body[data-mce-placeholder]:not(.mce-visualblocks)::before {
    color: var(--text-muted) !important;
}

/* TinyMCE 5/6 - Conteúdo do iframe */
.tox-edit-area__iframe {
    background-color: #1a1a1a !important;
}

/* Remove fundo branco padrão do HTML/Body no iframe */
html.mce-content-body,
body.mce-content-body,
.mce-content-body {
    background: #1a1a1a !important;
    background-color: #1a1a1a !important;
    color: #e4e4e7 !important;
}

/* Força dark mode no iframe do TinyMCE */
.tox-tinymce iframe html,
.tox-tinymce iframe body,
iframe[id^="tiny-react"] html,
iframe[id^="tiny-react"] body {
    background: #1a1a1a !important;
    background-color: #1a1a1a !important;
    color: #e4e4e7 !important;
}

.mce-content-body p,
.mce-content-body div,
.mce-content-body span {
    color: #e4e4e7 !important;
}

/* ============================================
   PÁGINAS LEGAIS (TERMOS E PRIVACIDADE)
   ============================================ */

/* Container de conteúdo legal */
.legal-content {
    max-width: 900px;
    margin: 0 auto;
    padding: 3rem 2rem;
}

.legal-content p {
    color: var(--text-primary);
    line-height: 1.8;
    margin-bottom: 1.5rem;
    text-align: left;
}

.legal-content strong {
    color: var(--primary);
    font-weight: 600;
}

.legal-content h3 {
    color: var(--text-primary);
    font-size: 1.5rem;
    margin: 2.5rem 0 1.5rem;
    padding-bottom: 0.5rem;
    border-bottom: 2px solid rgba(99, 102, 241, 0.2);
}

.legal-content ul,
.legal-content ol {
    color: var(--text-primary);
    margin: 1.5rem 0;
    padding-left: 2rem;
}

.legal-content li {
    color: var(--text-primary);
    margin-bottom: 0.75rem;
    line-height: 1.8;
}

.legal-content a {
    color: var(--primary);
    text-decoration: none;
    transition: color 0.3s ease;
}

.legal-content a:hover {
    color: var(--secondary);
    text-decoration: underline;
}

/* Seções destacadas */
.legal-content em {
    color: var(--secondary);
    font-style: italic;
}

/* Links externos */
.legal-content a[href^="http"] {
    color: var(--primary);
    border-bottom: 1px dotted var(--primary);
}

.legal-content a[href^="http"]:hover {
    border-bottom-style: solid;
}

/* Informações de contato no final */
.legal-content p[style*="text-align: center"] {
    background: rgba(99, 102, 241, 0.1);
    border: 1px solid rgba(99, 102, 241, 0.2);
    border-radius: 8px;
    padding: 1.5rem;
    margin-top: 3rem;
    color: var(--text-muted) !important;
}

/* Títulos inline com span colorido */
.legal-content .title-pg {
    font-size: 2rem;
    margin-bottom: 2rem;
    color: var(--text-primary);
}

.legal-content .title-pg span {
    background: linear-gradient(135deg, var(--primary) 0%, var(--secondary) 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

/* Responsividade */
@media (max-width: 768px) {
    .legal-content {
        padding: 2rem 1rem;
    }

    .legal-content h3 {
        font-size: 1.25rem;
    }

    .legal-content p {
        font-size: 0.95rem;
    }
}

/* ============================================
   RESPONSIVIDADE COMPLETA - MOBILE & TABLET
   ============================================ */

/* Tablet - 768px a 1024px */
@media (max-width: 1024px) {
    /* Navbar */
    .navbar-nav {
        background: var(--bg-primary);
        padding: 1rem;
        margin-top: 1rem;
        border-radius: 8px;
    }

    .navbar-nav .nav-item {
        margin: 0.5rem 0;
    }

    /* Hero Section */
    .hero-section {
        padding: 4rem 1rem;
    }

    .hero-section__title {
        font-size: 2rem;
    }

    .hero-section__subtitle {
        font-size: 1rem;
    }

    /* Stats */
    .stats-section {
        padding: 3rem 1rem;
    }

    .stat-card {
        margin-bottom: 1rem;
    }

    /* Page Header */
    .page-header {
        padding: 3rem 1rem;
    }

    .page-header__title {
        font-size: 2rem;
    }

    /* Card Deck - 2 colunas no tablet */
    .card-deck {
        grid-template-columns: repeat(2, 1fr);
        gap: 1.5rem;
    }

    /* Plans */
    .plans-container {
        grid-template-columns: 1fr;
        gap: 2rem;
    }

    .plan-card {
        max-width: 100%;
    }

    /* Footer */
    .footer-content {
        grid-template-columns: repeat(2, 1fr);
        gap: 2rem;
    }
}

/* Mobile - até 768px */
@media (max-width: 768px) {
    /* Container */
    .container {
        padding: 0 1rem;
    }

    /* Navbar */
    .navbar-brand img {
        height: 30px;
    }

    .navbar-toggler {
        padding: 0.5rem;
    }

    .user-dropdown {
        position: static;
        width: 100%;
        margin-top: 1rem;
    }

    .user-dropdown__menu {
        position: static;
        width: 100%;
        margin-top: 0.5rem;
        box-shadow: none;
        border: 1px solid var(--border-color);
    }

    /* Hero Section */
    .hero-section {
        padding: 3rem 1rem;
        text-align: center;
    }

    .hero-section__title {
        font-size: 1.75rem;
        line-height: 1.3;
    }

    .hero-section__subtitle {
        font-size: 0.95rem;
    }

    .hero-section__cta {
        flex-direction: column;
        gap: 1rem;
    }

    .hero-section__cta .btn {
        width: 100%;
        justify-content: center;
    }

    /* Stats Section */
    .stats-section {
        padding: 2rem 1rem;
    }

    .stats-grid {
        grid-template-columns: 1fr;
        gap: 1rem;
    }

    .stat-card {
        padding: 1.5rem;
    }

    .stat-card__value {
        font-size: 2rem;
    }

    /* Page Header */
    .page-header {
        padding: 2rem 1rem;
        margin-bottom: 2rem;
    }

    .page-header__icon-wrapper {
        width: 60px;
        height: 60px;
    }

    .page-header__icon {
        font-size: 1.5rem;
    }

    .page-header__title {
        font-size: 1.5rem;
    }

    .page-header__subtitle {
        font-size: 0.9rem;
    }

    /* Header PG */
    .header-pg {
        margin-bottom: 2rem;
    }

    /* Card Deck - 1 coluna no mobile */
    .card-deck {
        grid-template-columns: 1fr;
        gap: 1rem;
    }

    .md\:card-deck--3,
    .md\:card-deck--2,
    .sm\:card-deck--2 {
        grid-template-columns: 1fr;
    }

    /* Course Card */
    .card-course {
        margin-bottom: 1rem;
    }

    .card-course__image {
        height: 180px;
    }

    .card-course__body {
        padding: 1rem;
    }

    .card-course__title {
        font-size: 1rem;
    }

    .card-course__meta {
        flex-direction: column;
        gap: 0.5rem;
        align-items: flex-start;
    }

    /* Course Details */
    .course-header {
        flex-direction: column;
        text-align: center;
    }

    .course-header__content {
        padding: 0;
    }

    .course-tutor {
        flex-direction: column;
        text-align: center;
        gap: 1rem;
    }

    .course-tutor__avatar {
        margin: 0;
    }

    .course-tabs {
        flex-direction: column;
    }

    .course-tab {
        border-left: none;
        border-bottom: 2px solid transparent;
        text-align: center;
    }

    .course-tab.active {
        border-left: none;
        border-bottom-color: var(--primary);
    }

    /* Lesson Sidebar */
    .lesson-sidebar {
        position: static;
        width: 100%;
        max-height: none;
        margin-bottom: 2rem;
    }

    .lesson-content {
        margin-left: 0;
    }

    /* Accordion */
    .accordion-module__header {
        padding: 1rem;
        font-size: 0.95rem;
    }

    .accordion-lesson {
        padding: 0.75rem 1rem;
        font-size: 0.9rem;
    }

    /* Plans */
    .plans-container {
        padding: 2rem 1rem;
    }

    .plan-card {
        padding: 1.5rem;
    }

    .plan-card__price {
        font-size: 2rem;
    }

    .plan-card__features {
        font-size: 0.9rem;
    }

    /* FAQ */
    .faq-section {
        padding: 2rem 1rem;
    }

    .faq-item__question {
        padding: 1rem;
        font-size: 0.95rem;
    }

    .faq-item__answer {
        padding: 1rem;
        font-size: 0.9rem;
    }

    /* Forum */
    .forum-header {
        flex-direction: column;
        gap: 1rem;
    }

    .forum-search {
        width: 100%;
    }

    .ticket-card {
        padding: 1rem;
    }

    .ticket-card__header {
        flex-direction: column;
        gap: 1rem;
        align-items: flex-start;
    }

    .ticket-card__meta {
        width: 100%;
        justify-content: space-between;
    }

    /* Profile Page */
    .profile-section {
        padding: 1.5rem 1rem;
    }

    .form-eti .form-group {
        margin-bottom: 1rem;
    }

    .input-group-addon {
        min-width: 100px;
        font-size: 0.85rem;
    }

    /* Subscription Page */
    .subscription-status-card {
        padding: 1.5rem;
    }

    .subscription-info-grid {
        grid-template-columns: 1fr;
        gap: 1rem;
    }

    .subscription-info-item {
        padding: 1rem;
    }

    .subscription-history-table {
        font-size: 0.85rem;
    }

    .subscription-history-table th,
    .subscription-history-table td {
        padding: 0.75rem 0.5rem;
    }

    /* Ocultar colunas menos importantes em mobile */
    .subscription-history-table th:nth-child(3),
    .subscription-history-table td:nth-child(3) {
        display: none;
    }

    /* Breadcrumb */
    .breadcrumb-modern {
        padding: 1rem;
        font-size: 0.85rem;
    }

    .breadcrumb-modern__item {
        max-width: 120px;
    }

    /* Testimonials */
    .testimonial-card {
        padding: 1.5rem;
    }

    .testimonial-card__text {
        font-size: 0.95rem;
    }

    /* Footer */
    .footer-content {
        grid-template-columns: 1fr;
        gap: 2rem;
        padding: 2rem 1rem;
    }

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

    .footer-bottom {
        padding: 1.5rem 1rem;
        font-size: 0.85rem;
    }

    /* Buttons */
    .btn {
        padding: 0.75rem 1.5rem;
        font-size: 0.9rem;
    }

    .btn-lg {
        padding: 1rem 2rem;
        font-size: 1rem;
    }

    /* Modals */
    .modal-dialog {
        margin: 1rem;
    }

    .modal-content {
        padding: 1.5rem;
    }

    /* Tables */
    .table-responsive {
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
    }

    table {
        font-size: 0.85rem;
    }

    table th,
    table td {
        padding: 0.5rem;
    }

    /* Alert Login */
    .alert-login {
        flex-direction: column;
        padding: 1.5rem;
        text-align: center;
    }

    .alert-login__icon {
        margin: 0 0 1rem 0;
    }

    .alert-login__actions {
        width: 100%;
        justify-content: center;
    }

    .alert-login__actions .btn {
        padding: 0.75rem 1.5rem;
    }

    /* Empty States */
    .empty-state-courses {
        padding: 2rem 1rem;
    }

    .empty-state-courses__icon {
        font-size: 3rem;
    }

    .empty-state-courses__title {
        font-size: 1.25rem;
    }

    /* Legal Content */
    .legal-content {
        padding: 2rem 1rem;
    }

    .legal-content p {
        font-size: 0.9rem;
    }

    /* Video Container */
    .video-container {
        margin: 1rem 0;
    }

    /* Badges */
    .badge {
        font-size: 0.75rem;
        padding: 0.35rem 0.65rem;
    }
}

/* Mobile Pequeno - até 480px */
@media (max-width: 480px) {
    .hero-section__title {
        font-size: 1.5rem;
    }

    .page-header__title {
        font-size: 1.25rem;
    }

    .stat-card__value {
        font-size: 1.75rem;
    }

    .plan-card__price {
        font-size: 1.75rem;
    }

    .card-course__title {
        font-size: 0.95rem;
    }

    .btn {
        padding: 0.65rem 1.25rem;
        font-size: 0.85rem;
    }

    .footer-section h4 {
        font-size: 1rem;
    }

    .footer-section a {
        font-size: 0.9rem;
    }
}

/* Landscape Mobile */
@media (max-width: 768px) and (orientation: landscape) {
    .hero-section {
        padding: 2rem 1rem;
    }

    .page-header {
        padding: 1.5rem 1rem;
    }

    .lesson-sidebar {
        max-height: 300px;
        overflow-y: auto;
    }
}

/* Print Styles */
@media print {
    .navbar,
    .footer-dark,
    .hero-section__cta,
    .btn,
    button {
        display: none !important;
    }

    body {
        background: white !important;
        color: black !important;
    }

    .container {
        max-width: 100% !important;
    }
}

/* High Resolution Displays */
@media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 192dpi) {
    .card-course__image img,
    .course-header__image img {
        image-rendering: -webkit-optimize-contrast;
    }
}

/* Reduce Motion for Accessibility */
@media (prefers-reduced-motion: reduce) {
    * {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
    }
}

/* ============================================
   NOTIFY & NOTIFICATIONS (SNOTIFY)
   ============================================ */

/* Banner Notify */
.notify {
    background: linear-gradient(135deg, var(--primary) 0%, var(--secondary) 100%) !important;
    text-align: center;
    padding: 1.5rem 1rem;
    float: left;
    width: 100%;
    color: white !important;
    font-size: 1rem;
    border-bottom: 2px solid rgba(168, 85, 247, 0.3);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
    z-index: 1000;
    position: relative;
}

.notify span {
    font-weight: 700;
    color: white !important;
    font-size: 1.1rem;
    text-shadow: 0 2px 4px rgba(0, 0, 0, 0.3);
}

.btn-notify {
    background: white !important;
    color: var(--primary) !important;
    padding: 0.75rem 1.5rem;
    border-radius: 50px;
    margin: 0 0.5rem;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2);
    transition: all 0.3s ease;
    font-size: 0.95rem;
    font-weight: 600;
    border: 2px solid white;
    text-decoration: none;
    display: inline-block;
}

.btn-notify:hover {
    background: var(--bg-primary) !important;
    color: white !important;
    transform: translateY(-2px);
    box-shadow: 0 6px 16px rgba(0, 0, 0, 0.3);
    border-color: white;
}

/* Vue Snotify - Sistema de Notificações */
.snotify {
    position: fixed;
    z-index: 9999 !important;
}

.snotifyToast {
    background: var(--bg-secondary) !important;
    border: 1px solid var(--border-color) !important;
    border-radius: 8px !important;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.5) !important;
    color: var(--text-primary) !important;
    padding: 1rem !important;
    min-height: 60px;
}

/* Tipos de notificação */
.snotifyToast--success {
    background: var(--bg-secondary) !important;
    border-left: 4px solid #10b981 !important;
}

.snotifyToast--error {
    background: var(--bg-secondary) !important;
    border-left: 4px solid #ef4444 !important;
}

.snotifyToast--warning {
    background: var(--bg-secondary) !important;
    border-left: 4px solid #f59e0b !important;
}

.snotifyToast--info {
    background: var(--bg-secondary) !important;
    border-left: 4px solid var(--primary) !important;
}

/* Título da notificação */
.snotifyToast__title {
    color: var(--text-primary) !important;
    font-weight: 600;
    font-size: 1rem;
    margin-bottom: 0.25rem;
}

/* Corpo da notificação */
.snotifyToast__body {
    color: var(--text-muted) !important;
    font-size: 0.9rem;
    line-height: 1.5;
}

/* Botões da notificação */
.snotifyToast__buttons {
    display: flex;
    gap: 0.5rem;
    margin-top: 0.75rem;
}

.snotifyToast__buttons button {
    background: var(--primary) !important;
    color: white !important;
    border: none;
    padding: 0.5rem 1rem;
    border-radius: 6px;
    cursor: pointer;
    font-size: 0.85rem;
    transition: all 0.3s ease;
}

.snotifyToast__buttons button:hover {
    background: var(--secondary) !important;
    transform: translateY(-1px);
}

/* Barra de progresso */
.snotifyToast__progressBar {
    background: var(--primary) !important;
    height: 4px;
}

.snotifyToast__progressBar--success {
    background: #10b981 !important;
}

.snotifyToast__progressBar--error {
    background: #ef4444 !important;
}

.snotifyToast__progressBar--warning {
    background: #f59e0b !important;
}

.snotifyToast__progressBar--info {
    background: var(--primary) !important;
}

/* Inner do progresso */
.snotifyToast__progressBar span {
    background: rgba(255, 255, 255, 0.3) !important;
}

/* Ícone de fechar */
.snotifyToast__close {
    color: var(--text-muted) !important;
    font-size: 1.25rem;
    opacity: 0.6;
    transition: opacity 0.3s ease;
}

.snotifyToast__close:hover {
    opacity: 1;
    color: var(--text-primary) !important;
}

/* Container de notificações */
.snotify-rightTop,
.snotify-rightCenter,
.snotify-rightBottom {
    right: 1rem !important;
}

.snotify-leftTop,
.snotify-leftCenter,
.snotify-leftBottom {
    left: 1rem !important;
}

.snotify-centerTop {
    top: 1rem !important;
}

.snotify-centerCenter {
    top: 50% !important;
    transform: translateY(-50%);
}

.snotify-centerBottom {
    bottom: 1rem !important;
}

/* Ícones das notificações */
.snotifyToast__icon {
    font-size: 1.5rem;
    margin-right: 0.75rem;
}

.snotifyToast--success .snotifyToast__icon {
    color: #10b981 !important;
}

.snotifyToast--error .snotifyToast__icon {
    color: #ef4444 !important;
}

.snotifyToast--warning .snotifyToast__icon {
    color: #f59e0b !important;
}

.snotifyToast--info .snotifyToast__icon {
    color: var(--primary) !important;
}

/* Responsividade do Notify */
@media (max-width: 768px) {
    .notify {
        padding: 1rem;
        font-size: 0.85rem;
    }

    .notify span {
        font-size: 0.95rem;
        display: block;
        margin-bottom: 0.75rem;
    }

    .btn-notify {
        padding: 0.6rem 1.25rem;
        font-size: 0.85rem;
        margin: 0.25rem;
        display: inline-block;
    }

    /* Snotify mobile */
    .snotifyToast {
        max-width: calc(100vw - 2rem);
        margin: 0.5rem;
    }

    .snotify-rightTop,
    .snotify-rightCenter,
    .snotify-rightBottom,
    .snotify-leftTop,
    .snotify-leftCenter,
    .snotify-leftBottom {
        left: 0 !important;
        right: 0 !important;
        padding: 0 1rem;
    }
}

@media (max-width: 480px) {
    .notify span {
        font-size: 0.85rem;
    }

    .btn-notify {
        display: block;
        width: 100%;
        max-width: 200px;
        margin: 0.25rem auto;
    }

    .snotifyToast__title {
        font-size: 0.9rem;
    }

    .snotifyToast__body {
        font-size: 0.85rem;
    }
}

/* ============================================
   FIX: NOTIFY BANNER VISIBILITY
   ============================================ */

/* Garantir que o notify apareça acima de tudo */
.notify {
    position: relative !important;
    z-index: 1050 !important;
    display: block !important;
    visibility: visible !important;
    opacity: 1 !important;
}

/* Ajustar navbar para não sobrepor notify */
.navbar {
    position: relative;
    z-index: 1040;
}

/* Header não deve sobrepor notify */
header {
    position: relative;
    z-index: 1030;
}

/* Garantir ordem de empilhamento correta */
body > #app > .notify {
    order: -1;
}

/* ============================================
   FIX: MOBILE MENU COLLAPSE
   ============================================ */

/* Garantir que o menu mobile fique oculto por padrão */
@media (max-width: 991px) {
    .navbar-collapse {
        display: none;
        width: 100%;
        background: var(--bg-primary);
        border-radius: 8px;
        margin-top: 1rem;
        padding: 1rem;
        box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
    }

    .navbar-collapse.show,
    .navbar-collapse.collapsing {
        display: block;
    }

    .navbar-collapse.collapsing {
        transition: height 0.35s ease;
    }

    /* Links do menu mobile */
    .navbar-nav {
        flex-direction: column;
    }

    .navbar-nav .nav-item {
        width: 100%;
        text-align: left;
    }

    .navbar-nav .nav-link {
        padding: 0.75rem 1rem;
        border-radius: 6px;
        margin: 0.25rem 0;
        transition: all 0.3s ease;
    }

    .navbar-nav .nav-link:hover {
        background: rgba(99, 102, 241, 0.1);
        padding-left: 1.5rem;
    }

    /* Botão toggle do menu */
    .navbar-toggler {
        border: 1px solid var(--border-color);
        padding: 0.5rem 0.75rem;
        border-radius: 6px;
        background: transparent;
        transition: all 0.3s ease;
    }

    .navbar-toggler:hover {
        background: rgba(99, 102, 241, 0.1);
        border-color: var(--primary);
    }

    .navbar-toggler:focus {
        outline: none;
        box-shadow: 0 0 0 2px rgba(99, 102, 241, 0.2);
    }

    .navbar-toggler-icon {
        background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 30'%3e%3cpath stroke='rgba(229, 229, 229, 0.8)' stroke-linecap='round' stroke-miterlimit='10' stroke-width='2' d='M4 7h22M4 15h22M4 23h22'/%3e%3c/svg%3e");
    }

    /* User dropdown no mobile */
    .user-dropdown {
        width: 100%;
        margin-top: 1rem;
    }

    .user-dropdown__toggle {
        width: 100%;
        justify-content: space-between;
    }

    .user-dropdown__menu {
        position: static;
        width: 100%;
        margin-top: 0.5rem;
        transform: none !important;
        box-shadow: none;
        border: 1px solid var(--border-color);
    }

    .user-dropdown.show .user-dropdown__menu {
        display: block;
    }

    /* Botões de login/cadastro no mobile */
    .navbar-nav .btn {
        width: 100%;
        margin: 0.25rem 0;
        text-align: center;
    }

    .navbar-nav .btn-primary,
    .navbar-nav .btn-outline-primary {
        justify-content: center;
    }
}

/* Tablet ajustes */
@media (min-width: 768px) and (max-width: 991px) {
    .navbar-collapse {
        padding: 1.5rem;
    }

    .navbar-nav .nav-link {
        font-size: 1rem;
    }
}

/* Desktop - garantir que menu apareça normalmente */
@media (min-width: 992px) {
    .navbar-collapse {
        display: flex !important;
        flex-basis: auto;
    }

    .navbar-toggler {
        display: none;
    }
}

/* ============================================
   MOBILE MENU HAMBURGER - CORREÇÃO COMPLETA
   ============================================ */

/* Botão Hamburger - Oculto no desktop */
.mobile-menu-toggle {
    display: none;
    flex-direction: column;
    gap: 5px;
    background: transparent;
    border: none;
    cursor: pointer;
    padding: 8px;
    z-index: 1100;
}

.mobile-menu-toggle span {
    width: 25px;
    height: 3px;
    background: var(--text-primary);
    border-radius: 3px;
    transition: all 0.3s ease;
}

/* Animação do botão quando menu aberto */
.mobile-menu-toggle.active span:nth-child(1) {
    transform: rotate(45deg) translate(7px, 7px);
}

.mobile-menu-toggle.active span:nth-child(2) {
    opacity: 0;
}

.mobile-menu-toggle.active span:nth-child(3) {
    transform: rotate(-45deg) translate(7px, -7px);
}

/* Mobile - até 991px */
@media (max-width: 991px) {
    /* Mostrar botão hamburger */
    .mobile-menu-toggle {
        display: flex;
    }

    /* Header flexbox */
    .navbar-dark {
        display: flex;
        justify-content: space-between;
        align-items: center;
        position: relative;
    }

    /* Menu mobile - oculto por padrão */
    .nav-links-dark {
        position: fixed;
        top: 0;
        right: -100%;
        height: 100vh;
        width: 280px;
        background: var(--bg-primary);
        flex-direction: column;
        padding: 80px 20px 20px;
        box-shadow: -5px 0 15px rgba(0, 0, 0, 0.5);
        transition: right 0.3s ease;
        overflow-y: auto;
        z-index: 1099;
    }

    /* Menu aberto */
    .nav-links-dark.active {
        right: 0;
    }

    /* Overlay quando menu aberto */
    .nav-links-dark.active::before {
        content: '';
        position: fixed;
        top: 0;
        left: 0;
        width: 100vw;
        height: 100vh;
        background: rgba(0, 0, 0, 0.7);
        z-index: -1;
    }

    /* Itens do menu */
    .nav-links-dark li {
        width: 100%;
        margin: 0;
        padding: 0;
    }

    .nav-links-dark li a {
        display: block;
        padding: 12px 15px;
        margin: 5px 0;
        border-radius: 8px;
        transition: all 0.3s ease;
    }

    .nav-links-dark li a:hover {
        background: rgba(99, 102, 241, 0.1);
        padding-left: 20px;
    }

    /* Botão CTA no mobile */
    .nav-links-dark .nav-cta {
        background: linear-gradient(135deg, var(--primary) 0%, var(--secondary) 100%);
        color: white !important;
        text-align: center;
        margin-top: 10px;
    }

    .nav-links-dark .nav-cta:hover {
        background: linear-gradient(135deg, var(--secondary) 0%, var(--primary) 100%);
        padding-left: 15px;
    }

    /* User dropdown no mobile */
    .user-menu-dropdown {
        width: 100%;
    }

    .user-menu-trigger {
        width: 100%;
        display: flex;
        justify-content: space-between;
        align-items: center;
    }

    .user-dropdown-menu {
        position: static !important;
        width: 100%;
        opacity: 1 !important;
        visibility: visible !important;
        transform: none !important;
        margin-top: 10px;
        box-shadow: none;
        border: 1px solid var(--border-color);
        border-radius: 8px;
    }

    .user-menu-dropdown:hover .user-dropdown-menu,
    .user-menu-dropdown .user-menu-trigger.active + .user-dropdown-menu {
        display: block;
    }
}

/* Tablet */
@media (min-width: 768px) and (max-width: 991px) {
    .nav-links-dark {
        width: 320px;
        padding: 100px 30px 30px;
    }

    .nav-links-dark li a {
        font-size: 1.1rem;
    }
}

/* Desktop - garantir que tudo funcione normalmente */
@media (min-width: 992px) {
    .mobile-menu-toggle {
        display: none !important;
    }

    .nav-links-dark {
        position: static;
        height: auto;
        width: auto;
        flex-direction: row;
        padding: 0;
        box-shadow: none;
        background: transparent;
        overflow: visible;
    }

    .nav-links-dark li {
        width: auto;
    }
}

/* ============================================
   FIX: Z-INDEX HIERARCHY
   ============================================ */

/* Hierarquia de z-index correta */
.notify {
    z-index: 1100 !important;
}

.mobile-menu-toggle {
    z-index: 1090;
}

.nav-links-dark {
    z-index: 1080 !important;
}

.nav-links-dark.active::before {
    z-index: 1070 !important;
}

.header-dark {
    z-index: 1060;
}

.navbar-dark {
    z-index: 1050;
}

/* Garantir que notify fique visível acima do overlay */
@media (max-width: 991px) {
    .notify {
        position: relative;
        z-index: 1100 !important;
    }

    .nav-links-dark {
        z-index: 1080 !important;
    }

    .nav-links-dark.active::before {
        z-index: 1070 !important;
    }
}

/* ============================================
   FIX: Z-INDEX CORRETO - SOBRESCREVENDO
   ============================================ */

/* Remover z-index anterior do notify e aplicar corretamente */
.notify {
    position: relative !important;
    z-index: 2000 !important;
}

/* Mobile menu com z-index menor que notify */
@media (max-width: 991px) {
    .mobile-menu-toggle {
        z-index: 1000 !important;
    }

    .nav-links-dark {
        z-index: 1050 !important;
    }

    .nav-links-dark.active::before {
        z-index: 1040 !important;
    }
}

/* Header e navbar com z-index menor */
.header-dark,
.navbar-dark {
    z-index: 100 !important;
}

/* ============================================
   Z-INDEX FINAL - ÚLTIMA PALAVRA
   ============================================ */

/* Notify sempre no topo - FINAL */
body .notify,
#app .notify {
    z-index: 9999 !important;
    position: relative !important;
}

/* Menu mobile abaixo do notify - FINAL */
@media (max-width: 991px) {
    .nav-links-dark {
        z-index: 999 !important;
    }

    .nav-links-dark.active::before {
        z-index: 998 !important;
    }

    .mobile-menu-toggle {
        z-index: 1000 !important;
        position: relative !important;
    }
}

/* ============================================
   FIX DEFINITIVO: NOTIFY E MENU MOBILE
   ============================================ */

/* Notify não deve bloquear cliques */
.notify {
    pointer-events: auto !important;
    z-index: 1030 !important;
}

/* Botões dentro do notify devem receber cliques */
.notify a,
.notify button,
.notify .btn-notify {
    pointer-events: auto !important;
}

/* Header e menu mobile com z-index maior que notify */
@media (max-width: 991px) {
    .header-dark {
        position: sticky !important;
        top: 0 !important;
        z-index: 1040 !important;
    }

    .navbar-dark {
        position: relative !important;
        z-index: 1041 !important;
    }

    .mobile-menu-toggle {
        z-index: 1042 !important;
        pointer-events: auto !important;
    }

    .nav-links-dark {
        z-index: 1050 !important;
    }

    .nav-links-dark.active::before {
        z-index: 1045 !important;
    }

    /* Notify abaixo do header no mobile */
    .notify {
        z-index: 1020 !important;
        position: relative !important;
    }
}

/* Desktop - notify pode ficar acima */
@media (min-width: 992px) {
    .notify {
        z-index: 1030 !important;
    }

    .header-dark {
        z-index: 1020 !important;
    }
}

/* ============================================
   SOLUÇÃO FINAL: HEADER ANTES DO NOTIFY
   ============================================ */

/* Header fixo no topo */
.header-dark {
    position: sticky !important;
    top: 0 !important;
    z-index: 1050 !important;
    background: var(--bg-primary) !important;
}

/* Notify logo abaixo do header */
.notify {
    position: relative !important;
    z-index: 1000 !important;
    margin-top: 0 !important;
}

/* Mobile menu acima de tudo quando aberto */
@media (max-width: 991px) {
    .mobile-menu-toggle {
        z-index: 1060 !important;
    }

    .nav-links-dark {
        z-index: 1055 !important;
    }

    .nav-links-dark.active::before {
        z-index: 1054 !important;
    }
}

/* ============================================
   FIX: MENU DESKTOP VISÍVEL
   ============================================ */

/* Garantir que o menu apareça no desktop */
@media (min-width: 992px) {
    .nav-links-dark {
        display: flex !important;
        position: static !important;
        height: auto !important;
        width: auto !important;
        flex-direction: row !important;
        padding: 0 !important;
        box-shadow: none !important;
        background: transparent !important;
        overflow: visible !important;
        opacity: 1 !important;
        visibility: visible !important;
    }

    .mobile-menu-toggle {
        display: none !important;
    }
}

/* Mobile - garantir que não esteja com display none quando fechado */
@media (max-width: 991px) {
    .nav-links-dark {
        display: flex !important;
    }
}

/* ============================================
   OCULTAR NOTIFY NO MOBILE
   ============================================ */

/* Ocultar notificação no mobile */
@media (max-width: 991px) {
    .notify {
        display: none !important;
    }
}

/* Mostrar notificação apenas no desktop */
@media (min-width: 992px) {
    .notify {
        display: block !important;
    }
}

/* ============================================
   FIX: MENU DESKTOP CLICÁVEL
   ============================================ */

/* Garantir que o header e menu recebam cliques */
.header-dark,
.navbar-dark,
.nav-links-dark,
.nav-links-dark li,
.nav-links-dark li a {
    pointer-events: auto !important;
}

/* Remover position sticky que pode estar causando problema */
@media (min-width: 992px) {
    .header-dark {
        position: relative !important;
    }
}

/* Vue Snotify não deve bloquear cliques */
.snotify,
vue-snotify {
    pointer-events: none !important;
}

.snotifyToast {
    pointer-events: auto !important;
}

/* Garantir z-index correto no desktop */
@media (min-width: 992px) {
    .header-dark {
        z-index: 1050 !important;
    }

    .nav-links-dark {
        z-index: 1051 !important;
    }
}

/* ============================================
   FIX AGRESSIVO: REMOVER SOBREPOSIÇÕES
   ============================================ */

/* Remover qualquer elemento que possa estar sobrepondo */
#app::before,
#app::after,
body::before,
body::after {
    display: none !important;
}

/* Vue Snotify container */
.snotify-rightTop,
.snotify-rightCenter,
.snotify-rightBottom,
.snotify-leftTop,
.snotify-leftCenter,
.snotify-leftBottom,
.snotify-centerTop,
.snotify-centerCenter,
.snotify-centerBottom {
    pointer-events: none !important;
}

/* Header com z-index muito alto */
.header-dark {
    position: relative !important;
    z-index: 9998 !important;
}

.navbar-dark {
    position: relative !important;
    z-index: 9999 !important;
}

.nav-links-dark {
    position: relative !important;
    z-index: 10000 !important;
}

/* Links do menu com z-index alto */
.nav-links-dark li a {
    position: relative !important;
    z-index: 10001 !important;
    cursor: pointer !important;
}

/* Garantir que #app não bloqueie */
#app {
    position: relative !important;
    pointer-events: none !important;
}

#app > * {
    pointer-events: auto !important;
}

/* ============================================
   FIX: POSICIONAMENTO CORRETO DO MENU
   ============================================ */

/* Remover position relative que estava quebrando o layout */
.header-dark,
.navbar-dark,
.nav-links-dark {
    position: static !important;
}

/* Links sem position relative */
.nav-links-dark li a {
    position: static !important;
}

/* Manter apenas z-index sem afetar position */
.header-dark {
    z-index: 9998 !important;
}

.navbar-dark {
    z-index: 9999 !important;
}

.nav-links-dark {
    z-index: 10000 !important;
}

/* Desktop - garantir flexbox correto */
@media (min-width: 992px) {
    .navbar-dark {
        display: flex !important;
        justify-content: space-between !important;
        align-items: center !important;
        width: 100% !important;
    }

    .nav-links-dark {
        display: flex !important;
        align-items: center !important;
        gap: 2rem !important;
        margin-left: auto !important;
    }
}

/* ============================================
   FIX FINAL: CORRIGIR APENAS POSITION SEM QUEBRAR RESPONSIVO
   ============================================ */

/* Reverter position static - usar position normal */
.header-dark,
.navbar-dark {
    position: relative !important;
}

.nav-links-dark,
.nav-links-dark li,
.nav-links-dark li a {
    position: static !important;
}

/* Mobile - garantir que o menu comece oculto */
@media (max-width: 991px) {
    .nav-links-dark {
        position: fixed !important;
        right: -100% !important;
        top: 70px !important;
        width: 280px !important;
        height: calc(100vh - 70px) !important;
        background: var(--bg-secondary) !important;
        flex-direction: column !important;
        padding: 2rem 0 !important;
        transition: right 0.3s ease !important;
        z-index: 1000 !important;
        display: flex !important;
    }

    .nav-links-dark.active {
        right: 0 !important;
    }

    .nav-links-dark li {
        width: 100% !important;
    }

    .nav-links-dark li a {
        display: block !important;
        padding: 1rem 2rem !important;
        width: 100% !important;
    }
}

/* Desktop - menu inline normal */
@media (min-width: 992px) {
    .nav-links-dark {
        position: static !important;
        display: flex !important;
        align-items: center !important;
        gap: 2rem !important;
        margin-left: auto !important;
    }
}

/* ============================================
   FIX: LINKS CLICÁVEIS SEM AFETAR LAYOUT
   ============================================ */

/* Garantir que os links recebam eventos de clique */
.nav-links-dark li a {
    pointer-events: auto !important;
    cursor: pointer !important;
    z-index: 10001 !important;
}

/* Garantir que elementos pai não bloqueiem */
.nav-links-dark,
.nav-links-dark li {
    pointer-events: auto !important;
}

/* Header e navbar com pointer-events normal */
.header-dark,
.navbar-dark {
    pointer-events: auto !important;
}

/* Corrigir #app que pode estar bloqueando */
#app {
    pointer-events: none !important;
}

#app > * {
    pointer-events: auto !important;
}

/* Garantir que nada sobreponha os links no desktop */
@media (min-width: 992px) {
    .nav-links-dark li a {
        position: relative !important;
        z-index: 10001 !important;
    }
}

/* ============================================
   SOLUÇÃO DEFINITIVA: REMOVER BLOQUEIOS DE CLIQUE
   ============================================ */

/* Forçar que TODOS os links sejam clicáveis */
.nav-links-dark a,
.nav-links-dark li a,
a {
    pointer-events: auto !important;
}

/* Remover qualquer overlay invisível */
.header-dark::before,
.header-dark::after,
.navbar-dark::before,
.navbar-dark::after,
.nav-links-dark::before,
.nav-links-dark::after {
    content: none !important;
    display: none !important;
}

/* Garantir que Vue não bloqueie */
.vue-snotify,
.vue-snotify * {
    pointer-events: none !important;
}

/* Permitir cliques apenas nos toasts */
.snotify-toast {
    pointer-events: auto !important;
}

/* Header sempre no topo da pilha */
.header-dark {
    z-index: 9999 !important;
}

.nav-links-dark {
    z-index: 10000 !important;
}

.nav-links-dark a {
    z-index: 10001 !important;
    position: relative !important;
}

/* ============================================
   PROMO MODAL POP-UP (APARECE UMA VEZ)
   ============================================ */

.promo-modal {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 99999;
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.3s ease, visibility 0.3s ease;
}

.promo-modal.active {
    opacity: 1;
    visibility: visible;
}

.promo-modal-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.85);
    backdrop-filter: blur(5px);
}

.promo-modal-content {
    position: relative;
    background: linear-gradient(135deg, var(--bg-secondary) 0%, #1a1a2e 100%);
    border: 2px solid var(--primary);
    border-radius: 20px;
    padding: 3rem 2.5rem;
    max-width: 500px;
    width: 90%;
    box-shadow: 0 20px 60px rgba(99, 102, 241, 0.3);
    animation: modalSlideIn 0.4s ease;
    z-index: 100000;
}

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

.promo-modal-close {
    position: absolute;
    top: 1rem;
    right: 1rem;
    width: 36px;
    height: 36px;
    background: rgba(255, 255, 255, 0.1);
    border: 1px solid rgba(255, 255, 255, 0.2);
    border-radius: 50%;
    color: #fff;
    font-size: 24px;
    line-height: 1;
    cursor: pointer;
    transition: all 0.3s ease;
    display: flex;
    align-items: center;
    justify-content: center;
}

.promo-modal-close:hover {
    background: rgba(255, 255, 255, 0.2);
    transform: rotate(90deg);
}

.promo-modal-body {
    text-align: center;
}

.promo-modal-body h2 {
    color: #fff;
    font-size: 2.5rem;
    margin: 0 0 1rem 0;
    font-weight: 700;
    text-shadow: 0 0 20px rgba(99, 102, 241, 0.5);
}

.promo-modal-title {
    color: #fff;
    font-size: 1.5rem;
    margin: 0 0 0.5rem 0;
    font-weight: 600;
}

.promo-modal-title strong {
    color: var(--primary);
    font-size: 1.8rem;
}

.promo-modal-subtitle {
    color: rgba(255, 255, 255, 0.7);
    font-size: 1rem;
    margin: 0 0 2rem 0;
}

.promo-modal-actions {
    display: flex;
    justify-content: center;
    gap: 1rem;
}

.btn-promo-primary {
    background: linear-gradient(135deg, var(--primary) 0%, var(--secondary) 100%);
    color: #fff;
    padding: 1rem 2.5rem;
    border-radius: 50px;
    font-weight: 600;
    font-size: 1.1rem;
    text-decoration: none;
    display: inline-block;
    transition: all 0.3s ease;
    box-shadow: 0 10px 30px rgba(99, 102, 241, 0.4);
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.btn-promo-primary:hover {
    transform: translateY(-3px);
    box-shadow: 0 15px 40px rgba(99, 102, 241, 0.6);
}

/* Responsivo */
@media (max-width: 576px) {
    .promo-modal-content {
        padding: 2rem 1.5rem;
    }

    .promo-modal-body h2 {
        font-size: 2rem;
    }

    .promo-modal-title {
        font-size: 1.2rem;
    }

    .promo-modal-title strong {
        font-size: 1.4rem;
    }

    .btn-promo-primary {
        padding: 0.9rem 2rem;
        font-size: 1rem;
    }
}

/* ============================================
   AJUSTES SIDEBAR LIÇÕES
   ============================================ */

/* Reduzir padding da sidebar */
.ac-courses {
    padding: 0rem !important;
}

/* Reduzir padding dos itens do accordion */
.accordion-item {
    padding: 0.5rem 1rem !important;
}

/* Garantir que o conteúdo colapsado fique completamente oculto */
.accordion-content.is-collapsed {
    max-height: 0 !important;
    overflow: hidden !important;
    opacity: 0 !important;
    visibility: hidden !important;
    padding: 0 !important;
    margin: 0 !important;
}

/* Quando expandido */
.accordion-content:not(.is-collapsed) {
    max-height: 5000px !important;
    opacity: 1 !important;
    visibility: visible !important;
    transition: max-height 0.3s ease, opacity 0.3s ease !important;
}

/* Ajustar espaçamento das lições dentro do accordion */
.accordion-content ul {
    padding: 0.5rem 0 !important;
    margin: 0 !important;
}

.accordion-content li {
    padding: 0.5rem 1rem !important;
}

/* Reduzir padding dos títulos dos módulos */
.accordion-header,
.accordionItemHeading {
    padding: 0.75rem 1rem !important;
}

/* ============================================
   PRÉ-REQUISITOS - ESTILO PADRÃO CURSOS
   ============================================ */

/* Container de pré-requisitos com grid moderno */
.prerequisites-list,
.course-prerequisites {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
    gap: 1.5rem;
    margin-top: 1.5rem;
}

/* Cards de pré-requisitos */
.prerequisite-card,
.course-prerequisites .course-card {
    background: var(--bg-secondary);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 12px;
    overflow: hidden;
    transition: all 0.3s ease;
}

.prerequisite-card:hover,
.course-prerequisites .course-card:hover {
    transform: translateY(-5px);
    border-color: var(--primary);
    box-shadow: 0 10px 30px rgba(99, 102, 241, 0.2);
}

/* Imagem do curso */
.prerequisite-card img,
.course-prerequisites .course-card img {
    width: 100%;
    height: 180px;
    object-fit: contain;
    background: var(--bg-primary);
}

/* Conteúdo do card */
.prerequisite-card-body,
.course-prerequisites .course-card-body {
    padding: 1.5rem;
}

.prerequisite-card-title,
.course-prerequisites .course-card-title {
    color: #fff;
    font-size: 1.1rem;
    font-weight: 600;
    margin: 0 0 0.5rem 0;
    line-height: 1.4;
}

.prerequisite-card-text,
.course-prerequisites .course-card-text {
    color: rgba(255, 255, 255, 0.7);
    font-size: 0.9rem;
    margin: 0 0 1rem 0;
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

/* Botão do card */
.prerequisite-card .btn,
.course-prerequisites .course-card .btn {
    display: inline-block;
    background: linear-gradient(135deg, var(--primary) 0%, var(--secondary) 100%);
    color: #fff;
    padding: 0.6rem 1.5rem;
    border-radius: 8px;
    text-decoration: none;
    font-weight: 500;
    transition: all 0.3s ease;
}

.prerequisite-card .btn:hover,
.course-prerequisites .course-card .btn:hover {
    transform: translateY(-2px);
    box-shadow: 0 5px 15px rgba(99, 102, 241, 0.4);
}

/* Responsivo */
@media (max-width: 768px) {
    .prerequisites-list,
    .course-prerequisites {
        grid-template-columns: 1fr;
    }
}

/* ============================================
   FIX PRÉ-REQUISITOS - CARDS CORRETOS
   ============================================ */

/* Sobrescrever card-deck horizontal para pré-requisitos */
.card-deck.card-deck--horizontal {
    display: grid !important;
    grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)) !important;
    gap: 1.5rem !important;
    margin-top: 1.5rem !important;
}

.card-deck.card-deck--horizontal .item {
    width: 100% !important;
    max-width: 100% !important;
    flex: none !important;
}

/* Cards de curso nos pré-requisitos */
.card-deck .card-course {
    background: var(--bg-secondary) !important;
    border: 1px solid rgba(255, 255, 255, 0.1) !important;
    border-radius: 12px !important;
    overflow: hidden !important;
    transition: all 0.3s ease !important;
    height: 100% !important;
    display: flex !important;
    flex-direction: column !important;
}

.card-deck .card-course:hover {
    transform: translateY(-5px) !important;
    border-color: var(--primary) !important;
    box-shadow: 0 10px 30px rgba(99, 102, 241, 0.2) !important;
}

.card-deck .card-course a {
    display: flex !important;
    flex-direction: column !important;
    height: 100% !important;
    text-decoration: none !important;
}

/* Imagem do card */
.card-deck .card-course__image {
    width: 100% !important;
    height: 200px !important;
    position: relative !important;
    overflow: hidden !important;
}

.card-deck .card-course__image img {
    width: 100% !important;
    height: 100% !important;
    object-fit: contain !important;
}

/* Conteúdo do card */
.card-deck .card-course__content {
    padding: 1.5rem !important;
    flex: 1 !important;
    display: flex !important;
    flex-direction: column !important;
}

.card-deck .card-course__content h1 {
    color: #fff !important;
    font-size: 1.1rem !important;
    margin-bottom: 0.5rem !important;
}

.card-deck .card-course__content p {
    color: rgba(255, 255, 255, 0.7) !important;
    font-size: 0.9rem !important;
    line-height: 1.5 !important;
}

/* Badge grátis */
.card-deck .badge--free {
    position: absolute !important;
    top: 1rem !important;
    right: 1rem !important;
    background: var(--primary) !important;
    color: #fff !important;
    padding: 0.4rem 0.8rem !important;
    border-radius: 6px !important;
    font-size: 0.85rem !important;
    font-weight: 600 !important;
    z-index: 10 !important;
}

/* Responsivo */
@media (max-width: 768px) {
    .card-deck.card-deck--horizontal {
        grid-template-columns: 1fr !important;
    }
}

/* ============================================
   PÁGINA DE CONTATO MODERNA
   ============================================ */

/* Grid de Cards de Contato */
.contact-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
    gap: 2rem;
    margin-bottom: 4rem;
}

/* Card de Contato */
.contact-card {
    background: var(--bg-secondary);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 16px;
    padding: 2.5rem 2rem;
    text-align: center;
    transition: all 0.3s ease;
    position: relative;
    overflow: hidden;
}

.contact-card::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 4px;
    background: linear-gradient(135deg, var(--primary) 0%, var(--secondary) 100%);
    transform: scaleX(0);
    transition: transform 0.3s ease;
}

.contact-card:hover {
    transform: translateY(-8px);
    border-color: var(--primary);
    box-shadow: 0 15px 40px rgba(99, 102, 241, 0.25);
}

.contact-card:hover::before {
    transform: scaleX(1);
}

/* Ícone do Card */
.contact-card__icon {
    width: 80px;
    height: 80px;
    margin: 0 auto 1.5rem;
    background: linear-gradient(135deg, var(--primary) 0%, var(--secondary) 100%);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 2.5rem;
    color: #fff;
    transition: transform 0.3s ease;
}

.contact-card:hover .contact-card__icon {
    transform: scale(1.1) rotate(5deg);
}

/* Títulos e Descrições */
.contact-card__title {
    color: #fff;
    font-size: 1.5rem;
    font-weight: 600;
    margin-bottom: 0.75rem;
}

.contact-card__description {
    color: rgba(255, 255, 255, 0.7);
    font-size: 0.95rem;
    margin-bottom: 1.5rem;
    line-height: 1.5;
}

/* Botão do Card */
.contact-card__button {
    display: inline-block;
    padding: 0.9rem 2rem;
    border-radius: 50px;
    font-weight: 600;
    font-size: 1rem;
    text-decoration: none;
    transition: all 0.3s ease;
    margin-bottom: 1rem;
}

.contact-card__button i {
    margin-right: 0.5rem;
}

/* Botões Específicos por Rede */
.contact-card__button--whatsapp {
    background: #25D366;
    color: #fff;
}

.contact-card__button--whatsapp:hover {
    background: #20BA5A;
    transform: translateY(-2px);
    box-shadow: 0 8px 20px rgba(37, 211, 102, 0.4);
}

.contact-card__button--email {
    background: linear-gradient(135deg, #6366f1 0%, #8b5cf6 100%);
    color: #fff;
}

.contact-card__button--email:hover {
    transform: translateY(-2px);
    box-shadow: 0 8px 20px rgba(99, 102, 241, 0.4);
}

.contact-card__button--instagram {
    background: linear-gradient(135deg, #f09433 0%, #e6683c 25%, #dc2743 50%, #cc2366 75%, #bc1888 100%);
    color: #fff;
}

.contact-card__button--instagram:hover {
    transform: translateY(-2px);
    box-shadow: 0 8px 20px rgba(225, 48, 108, 0.4);
}

.contact-card__button--youtube {
    background: #FF0000;
    color: #fff;
}

.contact-card__button--youtube:hover {
    background: #CC0000;
    transform: translateY(-2px);
    box-shadow: 0 8px 20px rgba(255, 0, 0, 0.4);
}

.contact-card__button--facebook {
    background: #1877F2;
    color: #fff;
}

.contact-card__button--facebook:hover {
    background: #0C63D4;
    transform: translateY(-2px);
    box-shadow: 0 8px 20px rgba(24, 119, 242, 0.4);
}

.contact-card__button--telegram {
    background: #0088cc;
    color: #fff;
}

.contact-card__button--telegram:hover {
    background: #006DA3;
    transform: translateY(-2px);
    box-shadow: 0 8px 20px rgba(0, 136, 204, 0.4);
}

/* Info adicional do card */
.contact-card__info {
    color: rgba(255, 255, 255, 0.6);
    font-size: 0.9rem;
    margin-top: 0.5rem;
}

/* Seção de Informações Adicionais */
.contact-info-section {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: 2rem;
    margin-top: 3rem;
}

.contact-info-card {
    background: rgba(255, 255, 255, 0.03);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 12px;
    padding: 2rem;
}

.contact-info-card h3 {
    color: var(--primary);
    font-size: 1.3rem;
    margin-bottom: 1.5rem;
    display: flex;
    align-items: center;
    gap: 0.75rem;
}

.contact-info-card p {
    color: rgba(255, 255, 255, 0.8);
    line-height: 1.8;
    margin-bottom: 0.5rem;
}

.contact-info-card strong {
    color: #fff;
}

/* Responsivo */
@media (max-width: 768px) {
    .contact-grid {
        grid-template-columns: 1fr;
        gap: 1.5rem;
    }

    .contact-card {
        padding: 2rem 1.5rem;
    }

    .contact-card__icon {
        width: 70px;
        height: 70px;
        font-size: 2rem;
    }

    .contact-info-section {
        grid-template-columns: 1fr;
        gap: 1.5rem;
    }
}

/* Botões Discord e TikTok */
.contact-card__button--discord {
    background: #5865F2;
    color: #fff;
}

.contact-card__button--discord:hover {
    background: #4752C4;
    transform: translateY(-2px);
    box-shadow: 0 8px 20px rgba(88, 101, 242, 0.4);
}

.contact-card__button--tiktok {
    background: #000000;
    color: #fff;
}

.contact-card__button--tiktok:hover {
    background: #EE1D52;
    transform: translateY(-2px);
    box-shadow: 0 8px 20px rgba(238, 29, 82, 0.4);
}

/* Seção de ticket na página de aula */
.ticket {
    background: var(--bg-secondary) !important;
    border: 2px solid var(--primary) !important;
    border-radius: 16px !important;
    padding: 2rem !important;
    margin: 2rem 0 !important;
    box-shadow: 0 0 20px rgba(99, 102, 241, 0.15) !important;
}

.ticket .title-lesson-desc {
    color: var(--text-primary) !important;
}

.ticket .title-lesson-desc i {
    color: var(--primary) !important;
    margin-right: 0.5rem !important;
}

.tickets {
    margin: 1.5rem 0 !important;
}

/* ============================================
   PÁGINA DE VERIFICAR CERTIFICADO
   ============================================ */

.verify-certificate-card {
    max-width: 600px;
    margin: 0 auto;
    background: var(--bg-secondary);
    border: 1px solid var(--border);
    border-radius: 16px;
    padding: 3rem 2.5rem;
    box-shadow: 0 10px 40px rgba(0, 0, 0, 0.3);
}

.verify-certificate-icon {
    width: 100px;
    height: 100px;
    margin: 0 auto 2rem;
    background: linear-gradient(135deg, var(--primary) 0%, var(--secondary) 100%);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 3rem;
    color: #fff;
    box-shadow: 0 8px 25px rgba(99, 102, 241, 0.3);
}

.verify-certificate-title {
    color: var(--text-primary);
    font-size: 2rem;
    font-weight: 700;
    text-align: center;
    margin-bottom: 1rem;
}

.verify-certificate-description {
    color: var(--text-secondary);
    text-align: center;
    font-size: 1rem;
    margin-bottom: 2.5rem;
    line-height: 1.6;
}

.verify-certificate-form {
    margin-top: 2rem;
}

.form-group-verify {
    margin-bottom: 2rem;
}

.form-group-verify label {
    display: block;
    color: var(--text-primary);
    font-weight: 600;
    margin-bottom: 0.75rem;
    font-size: 1rem;
}

.input-with-icon {
    position: relative;
}

.input-with-icon i {
    position: absolute;
    left: 1rem;
    top: 50%;
    transform: translateY(-50%);
    color: var(--text-tertiary);
    font-size: 1.2rem;
}

.form-input-verify {
    width: 100%;
    padding: 1rem 1rem 1rem 3rem;
    background: var(--bg-primary);
    border: 2px solid var(--border);
    border-radius: 12px;
    color: var(--text-primary);
    font-size: 1rem;
    transition: all 0.3s ease;
    box-sizing: border-box;
}

.form-input-verify:focus {
    outline: none;
    border-color: var(--primary);
    box-shadow: 0 0 0 4px rgba(99, 102, 241, 0.1);
}

.form-input-verify::placeholder {
    color: var(--text-tertiary);
}

.error-message {
    display: block;
    color: #ef4444;
    font-size: 0.875rem;
    margin-top: 0.5rem;
}

.btn-verify-certificate {
    width: 100%;
    padding: 1.25rem 2rem;
    background: linear-gradient(135deg, var(--primary) 0%, var(--secondary) 100%);
    color: #fff;
    font-size: 1.1rem;
    font-weight: 700;
    border: none;
    border-radius: 12px;
    cursor: pointer;
    transition: all 0.3s ease;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.75rem;
}

.btn-verify-certificate:hover {
    transform: translateY(-2px);
    box-shadow: 0 15px 35px rgba(99, 102, 241, 0.4);
}

.btn-verify-certificate i {
    font-size: 1.2rem;
}

.verify-certificate-info {
    margin-top: 1.5rem;
    padding: 1rem;
    background: rgba(99, 102, 241, 0.05);
    border-left: 3px solid var(--primary);
    border-radius: 8px;
    color: var(--text-secondary);
    font-size: 0.9rem;
    line-height: 1.6;
}

.verify-certificate-info i {
    color: var(--primary);
    margin-right: 0.5rem;
}

/* Responsivo */
@media (max-width: 768px) {
    .verify-certificate-card {
        padding: 2rem 1.5rem;
    }

    .verify-certificate-icon {
        width: 80px;
        height: 80px;
        font-size: 2.5rem;
    }

    .verify-certificate-title {
        font-size: 1.5rem;
    }
}