/* neomorphism.css */
:root {
    --bg-primary: #f0f4f8;
    --bg-secondary: #ffffff;
    --text-primary: #2d3748;
    --shadow-light: rgba(0, 0, 0, 0.1);
    --shadow-dark: rgba(0, 0, 0, 0.2);
    --border-radius: 15px;
    --transition-speed: 0.3s;
    --border-color: #dadce0;
}

/* Efeito Neomorphic base */
.neomorphic {
    background: var(--bg-primary);
    border-radius: var(--border-radius);
    box-shadow: 
        5px 5px 10px var(--shadow-light),
        -5px -5px 10px var(--bg-secondary);
    transition: all var(--transition-speed) ease;
    /* padding-left: 20px; */
    text-align: center;
}

/* Variações de sombra */
.neomorphic-inset {
    box-shadow: 
        inset 3px 3px 6px var(--shadow-light),
        inset -3px -3px 6px var(--bg-secondary);
}

.neomorphic-hover:hover {
    box-shadow: 
        5px 5px 15px var(--shadow-dark),
        -5px -5px 15px var(--bg-secondary);
    transform: scale(1.02);
}

/* Elementos de formulário */
.neomorphic-input {
    background: var(--bg-primary);
    border: 1px solid var(--borders-color);
    border-radius: var(--border-radius);
    padding: 12px 15px;
    font-size: 16px;
    color: var(--text-primary);
    box-shadow: 
        inset 3px 3px 6px var(--shadow-light),
        inset -3px -3px 6px var(--bg-secondary);
    outline: none;
    transition: all var(--transition-speed) ease;
}

.neomorphic-input:focus {
    box-shadow: 
        inset 4px 4px 8px var(--shadow-dark),
        inset -4px -4px 8px var(--bg-secondary),
        0 0 10px rgba(41, 128, 185, 0.2);
}

/* Botões Neomorphic */
.neomorphic-btn {
    background: var(--bg-primary);
    border: 1px solid var(--borders-color);
    border-radius: var(--border-radius);
    padding: 12px 20px;
    font-size: 16px;
    color: var(--text-primary);
    box-shadow: 
        5px 5px 10px var(--shadow-light),
        -5px -5px 10px var(--bg-secondary);
    cursor: pointer;
    transition: all var(--transition-speed) ease;
    /* position: relative;
    overflow: hidden; */
    text-align: center;
}

.neomorphic-btn:before {
    content: '';
    position: absolute;
    top: 0;
    left: -100%;
    width: 100%;
    height: 100%;
    background: linear-gradient(
        120deg, 
        transparent, 
        rgba(255,255,255,0.3), 
        transparent
    );
    transition: all var(--transition-speed) ease;
}

/* .neomorphic-btn:hover:before {
    left: 100%;
} */

.neomorphic-btn:active,
.neomorphic-btn.active {
    box-shadow: 
        inset 3px 3px 6px var(--shadow-light),
        inset -3px -3px 6px var(--bg-secondary);
}

/* Cards Neomorphic */
.neomorphic-card {
    background: var(--bg-primary);
    border-radius: var(--border-radius);
    box-shadow: 
        5px 5px 15px var(--shadow-light),
        -5px -5px 15px var(--bg-secondary);
    padding: 20px;
    margin-bottom: 20px;
    transition: all var(--transition-speed) ease;
}

.neomorphic-card:hover {
    transform: translateY(-10px);
    box-shadow: 
        8px 8px 20px var(--shadow-dark),
        -8px -8px 20px var(--bg-secondary);
}

/* Toggle Switch Neomorphic */
.neomorphic-toggle {
    position: relative;
    display: inline-block;
    width: 60px;
    height: 34px;
}

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

.neomorphic-toggle-slider {
    position: absolute;
    cursor: pointer;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: var(--bg-primary);
    transition: .4s;
    border-radius: 34px;
    box-shadow: 
        3px 3px 6px var(--shadow-light),
        -3px -3px 6px var(--bg-secondary);
}

.neomorphic-toggle-slider:before {
    position: absolute;
    content: "";
    height: 26px;
    width: 26px;
    left: 4px;
    bottom: 4px;
    background: var(--bg-secondary);
    transition: .4s;
    border-radius: 50%;
    box-shadow: 
        2px 2px 4px var(--shadow-light);
}

.neomorphic-toggle input:checked + .neomorphic-toggle-slider {
    background: #2196F3;
}

.neomorphic-toggle input:checked + .neomorphic-toggle-slider:before {
    transform: translateX(26px);
}

/* Variações de cores */
.neomorphic-primary {
    background: #4a90e2;
    color: white;
}

.neomorphic-success {
    background: #2ecc71;
    color: white;
}

.neomorphic-danger {
    background: #e74c3c;
    color: white;
}

.neomorphic-warning {
    background: #f39c12;
    color: white;
}

/* Responsividade */
@media (max-width: 768px) {
    .neomorphic-btn {
        /*padding: 10px 15px;*/
        font-size: 14px;
    }
    
    .neomorphic-input {
        padding: 10px 12px;
        font-size: 14px;
    }
}