/**
 * AutoCUI ANAF – styles.css
 * Stiluri pentru banner status, indicator loading, feedback câmpuri.
 * Proiectat să fie specific și să nu interfereze cu stilurile temei.
 */

/* ─────────────────────────────────────────────────────────────────────────
   VARIABILE
───────────────────────────────────────────────────────────────────────── */

:root {
    --autocui-green:      #40916c;
    --autocui-green-dark: #2d6a4f;
    --autocui-green-bg:   #d8f3dc;
    --autocui-green-border: #95d5b2;
    --autocui-red:        #dc2626;
    --autocui-red-bg:     #fef2f2;
    --autocui-red-border: #fca5a5;
    --autocui-amber-bg:   #fffbeb;
    --autocui-amber-border: #fcd34d;
    --autocui-amber-text: #92400e;
    --autocui-radius:     6px;
    --autocui-transition: 0.2s ease;
}

/* ─────────────────────────────────────────────────────────────────────────
   BANNER STATUS (#anaf-status)
   Afișat sub câmpul CUI cu stări: loading / success / error
───────────────────────────────────────────────────────────────────────── */

.autocui-status {
    display: none; /* ascuns implicit; activat prin JS */
    align-items: center;
    gap: 0.5rem;
    margin-top: 0.5rem;
    padding: 0.6rem 0.9rem;
    border-radius: var(--autocui-radius);
    font-size: 0.875rem;
    line-height: 1.5;
    border: 1px solid transparent;
    transition: opacity var(--autocui-transition);
}

/* Loading */
.autocui-status--loading {
    background: var(--autocui-amber-bg);
    border-color: var(--autocui-amber-border);
    color: var(--autocui-amber-text);
}

/* Succes */
.autocui-status--success {
    background: #f0faf3;
    border-color: var(--autocui-green-border);
    color: var(--autocui-green-dark);
}

/* Eroare */
.autocui-status--error {
    background: var(--autocui-red-bg);
    border-color: var(--autocui-red-border);
    color: var(--autocui-red);
}

/* Iconița */
.autocui-status__icon {
    flex-shrink: 0;
    font-style: normal;
}

/* ─────────────────────────────────────────────────────────────────────────
   CÂMPURI COMPLETATE AUTOMAT
───────────────────────────────────────────────────────────────────────── */

/* Input completat de ANAF – border verde */
.autocui-filled {
    border-color: var(--autocui-green) !important;
    background-color: #f0faf3 !important;
    transition: border-color var(--autocui-transition),
                background-color var(--autocui-transition);
}

/* Input cu eroare de validare CUI */
.autocui-field--error {
    border-color: var(--autocui-red) !important;
    box-shadow: 0 0 0 3px rgba(220, 38, 38, 0.12) !important;
}

/* ─────────────────────────────────────────────────────────────────────────
   BUTON "Caută ANAF" (#anaf-btn)
   Stilurile de bază – pot fi suprascrise de tema voastră.
───────────────────────────────────────────────────────────────────────── */

#anaf-btn {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    padding: 0.6rem 1rem;
    background: var(--autocui-green-dark);
    color: #fff;
    border: none;
    border-radius: var(--autocui-radius);
    font-size: 0.875rem;
    font-weight: 600;
    cursor: pointer;
    white-space: nowrap;
    transition: background var(--autocui-transition), opacity var(--autocui-transition);
    line-height: 1;
}

#anaf-btn:hover:not(:disabled) {
    background: #1b4332;
}

#anaf-btn:disabled,
#anaf-btn.autocui-btn--loading {
    opacity: 0.65;
    cursor: not-allowed;
}

/* Spinner loading pe buton */
#anaf-btn.autocui-btn--loading::before {
    content: '';
    display: inline-block;
    width: 13px;
    height: 13px;
    border: 2px solid rgba(255, 255, 255, 0.35);
    border-top-color: #fff;
    border-radius: 50%;
    animation: autocui-spin 0.65s linear infinite;
    flex-shrink: 0;
}

@keyframes autocui-spin {
    to { transform: rotate(360deg); }
}

/* ─────────────────────────────────────────────────────────────────────────
   GRUP INPUT CUI + BUTON (flex side-by-side)
   Adăugați clasa .autocui-cui-group pe containerul div al câmpului CUI.
   Exemplu HTML:
     <div class="autocui-cui-group">
       <input type="text" id="cui" ... />
       <button type="button" id="anaf-btn">Caută ANAF</button>
     </div>
───────────────────────────────────────────────────────────────────────── */

.autocui-cui-group {
    display: flex;
    gap: 0.5rem;
    align-items: stretch;
}

.autocui-cui-group input {
    flex: 1;
    min-width: 0; /* previne overflow în flex */
}

/* Responsive: stivuire pe mobil */
@media (max-width: 480px) {
    .autocui-cui-group {
        flex-direction: column;
    }

    #anaf-btn {
        width: 100%;
        justify-content: center;
    }
}