/* ==========================================================================
   IA CARDS PRO - CUSTOM FONTS
   Fontes personalizadas da aplicação
   ========================================================================== */

/* 
   Para adicionar uma fonte OTF, siga este exemplo:
   
   @font-face {
       font-family: 'NomeDaFonte';
       src: url('../fonts/nome-da-fonte.otf') format('opentype');
       font-weight: normal;
       font-style: normal;
       font-display: swap; /* Melhora a performance de carregamento */
   }
   
   @font-face {
       font-family: 'NomeDaFonte';
       src: url('../fonts/nome-da-fonte-bold.otf') format('opentype');
       font-weight: bold;
       font-style: normal;
       font-display: swap;
   }
   
   @font-face {
       font-family: 'NomeDaFonte';
       src: url('../fonts/nome-da-fonte-italic.otf') format('opentype');
       font-weight: normal;
       font-style: italic;
       font-display: swap;
   }
*/

/* Fonte FS Elliot Pro Bold */
@font-face {
    font-family: 'FS Elliot Pro';
    src: url('../fonts/FS Elliot ProBold.otf') format('opentype');
    font-weight: bold;
    font-style: normal;
    font-display: swap;
}

/* Aplicar a fonte personalizada em elementos específicos */
.custom-font {
    font-family: 'FS Elliot Pro', 'Arial', sans-serif;
    font-weight: bold;
}

/* Aplicar em títulos principais */
.main-title {
    font-family: 'FS Elliot Pro', 'Arial', sans-serif;
    font-weight: bold;
}

/* Aplicar em títulos do admin */
.admin-title {
    font-family: 'FS Elliot Pro', 'Arial', sans-serif;
    font-weight: bold;
}

/* Aplicar em botões importantes */
.btn-primary, .btn-deposit, .btn-back-dashboard {
    font-family: 'FS Elliot Pro', 'Arial', sans-serif;
    font-weight: bold;
}

/* Aplicar em elementos específicos do dashboard */
.dashboard-container h1,
.dashboard-container h2,
.dashboard-container h3,
.dashboard-container h4,
.dashboard-container h5,
.dashboard-container h6,
.dashboard-container p,
.dashboard-container span,
.dashboard-container div,
.dashboard-container a,
.dashboard-container button,
.dashboard-container label,
.dashboard-container input,
.dashboard-container textarea,
.dashboard-container select,
.section h1,
.section h2,
.section h3,
.section h4,
.section h5,
.section h6,
.section p,
.section span,
.section div,
.section a,
.section button,
.section label,
.section input,
.section textarea,
.section select,
.header h1,
.header h2,
.header h3,
.header h4,
.header h5,
.header h6,
.header p,
.header span,
.header div,
.header a,
.header button,
.header label,
.header input,
.header textarea,
.header select,
.footer h1,
.footer h2,
.footer h3,
.footer h4,
.footer h5,
.footer h6,
.footer p,
.footer span,
.footer div,
.footer a,
.footer button,
.footer label,
.footer input,
.footer textarea,
.footer select {
    font-family: 'FS Elliot Pro', 'Arial', sans-serif !important;
    font-weight: bold !important;
}

/* Aplicar em elementos da página de login */
.login-card h1,
.login-card p,
.login-card .form-label,
.login-card .form-input,
.login-card .btn,
.login-card .alert,
.login-card .signup-link,
.login-card .forgot-password,
.login-card .checkbox-wrapper,
.login-header h1,
.login-header p,
.login-form .form-input,
.login-form .form-label,
.login-btn,
.modal h3,
.modal h4,
.modal p,
.modal .btn,
.alert,
.signup-link,
.forgot-password,
.checkbox-wrapper {
    font-family: 'FS Elliot Pro', 'Arial', sans-serif !important;
    font-weight: bold !important;
}

/* Aplicar globalmente em todos os elementos de texto */
body, h1, h2, h3, h4, h5, h6, p, span, div, a, button, input, label, small {
    font-family: 'FS Elliot Pro', 'Arial', sans-serif;
    font-weight: bold;
}

/* Forçar aplicação da fonte em toda a página de login */
body.login-page,
body.login-page *,
.login-container *,
.login-card *,
.modal * {
    font-family: 'FS Elliot Pro', 'Arial', sans-serif !important;
    font-weight: bold !important;
}

/* Forçar aplicação da fonte em toda a página do dashboard */
body.dashboard-page,
body.dashboard-page *,
.dashboard-container *,
.sections-container *,
.header *,
.footer *,
.modal * {
    font-family: 'FS Elliot Pro', 'Arial', sans-serif !important;
    font-weight: bold !important;
}

/* Excluir ícones FontAwesome da aplicação da fonte personalizada */
.fas, .far, .fab, .fal, .fad, .fa,
[class*="fa-"],
i[class*="fa-"],
.toggle-password i,
.input-wrapper i,
.header i,
.footer i,
.dashboard-container i,
.sections-container i,
.modal i,
button i,
a i,
span i,
div i {
    font-family: "Font Awesome 6 Free", "Font Awesome 6 Pro", "Font Awesome 6 Brands" !important;
    font-weight: 900 !important;
    font-style: normal !important;
    font-variant: normal !important;
    text-rendering: auto !important;
    line-height: 1 !important;
}

/* Estilos específicos para ícones dos campos de login */
.login-form .input-wrapper i:first-child {
    position: absolute !important;
    left: var(--spacing-md) !important;
    color: #666666 !important;
    z-index: 2 !important;
    pointer-events: none !important;
    font-size: 16px !important;
    top: 50% !important;
    transform: translateY(-50%) !important;
}

.login-form .toggle-password {
    position: absolute !important;
    right: var(--spacing-md) !important;
    top: 50% !important;
    transform: translateY(-50%) !important;
    background: none !important;
    border: none !important;
    color: #666666 !important;
    cursor: pointer !important;
    padding: var(--spacing-xs) !important;
    border-radius: var(--radius-sm) !important;
    transition: all var(--transition-normal) !important;
    z-index: 3 !important;
    font-size: 16px !important;
}

.login-form .toggle-password:hover {
    color: var(--secondary-gold) !important;
    background: rgba(0, 171, 246, 0.1) !important;
}

.login-form .toggle-password:active {
    transform: translateY(-50%) scale(0.95) !important;
}

/* Estilos responsivos para ícones em mobile */
@media (max-width: 768px) {
    .login-form .input-wrapper i:first-child {
        left: 16px !important;
        font-size: 16px !important;
    }
    
    .login-form .toggle-password {
        right: 16px !important;
        width: 40px !important;
        height: 40px !important;
        font-size: 16px !important;
    }
}

@media (max-width: 480px) {
    .login-form .input-wrapper i:first-child {
        left: 12px !important;
        font-size: 15px !important;
    }
    
    .login-form .toggle-password {
        right: 12px !important;
        width: 36px !important;
        height: 36px !important;
        font-size: 15px !important;
    }
}