@tailwind base;
@tailwind components;
@tailwind utilities;

@layer base {
    body {
        background-image: radial-gradient(circle at 50% 50%, #1f1b13 0%, #16130b 100%);
        position: relative;
    }
    
    body::before {
        content: "";
        position: fixed;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        opacity: 0.03;
        pointer-events: none;
        background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'%3F%3E%3Cfilter id='noiseFilter'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.65' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23noiseFilter)'/%3E%3C/svg%3E");
        z-index: 9999;
    }
    
    .material-symbols-outlined {
        font-variation-settings: 'FILL' 0, 'wght' 200, 'GRAD' 0, 'opsz' 24;
    }
}

@layer components {
    .dossier-border {
        border: 1px solid #333333;
        transition: border-color 0.3s ease, box-shadow 0.3s ease;
    }
    
    .dossier-border:hover {
        border-color: #d4af37;
        box-shadow: 0 0 15px rgba(212, 175, 55, 0.1);
    }
    
    .custom-radio:checked + label {
        border-color: #f2ca50;
        background-color: rgba(212, 175, 55, 0.05);
        color: #f2ca50;
    }

    .step-section {
        display: none;
    }

    .step-section.active {
        display: block;
        animation: fadeIn 0.8s ease-in-out;
    }

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

    .step-indicator-item.active .step-circle {
        border-color: #f2ca50;
        background-color: rgba(242, 202, 80, 0.1);
        color: #f2ca50;
    }

    .step-indicator-item.active .step-line {
        background-color: #f2ca50;
    }

    .step-indicator-item.completed .step-circle {
        border-color: #f2ca50;
        background-color: #f2ca50;
        color: #16130b;
    }

    .step-indicator-item.completed .step-line {
        background-color: #f2ca50;
    }

    /* Form Input Validations styling */
    input:invalid.touched,
    textarea:invalid.touched {
        border-color: #ffb4ab;
    }
    
    .error-message {
        color: #ffb4ab;
        font-size: 10px;
        font-family: 'Inter', sans-serif;
        letter-spacing: 0.1em;
        text-transform: uppercase;
        margin-top: 4px;
        display: none;
    }
    
    input:invalid.touched + .error-message,
    textarea:invalid.touched + .error-message {
        display: block;
    }

    /* Intl-tel-input overrides for A Ordem theme */
    .iti {
        width: 100%;
        display: block;
    }
    
    .iti__country-list {
        background-color: #1f1b13;
        border: 1px solid #333333;
        color: #eae1d4;
        font-family: 'Inter', sans-serif;
        box-shadow: 0 4px 20px rgba(0,0,0,0.5);
    }
    
    .iti__country-list .iti__country.iti__highlight {
        background-color: rgba(212, 175, 55, 0.1);
        color: #f2ca50;
    }
    
    .iti__selected-dial-code {
        color: #eae1d4;
    }
    
    .iti__arrow {
        border-top-color: #eae1d4;
    }
    .iti__arrow--up {
        border-bottom-color: #eae1d4;
    }
}