/* ==========================================================================
   Vindam Landing — Components
   Clicked-state overrides, validation UI, and reusable component styles.
   ========================================================================== */

/* --- Clicked State (flow step icons) --- */
.clicked__opacity-100 {
    opacity: 1 !important;
}

.clicked .opacity-0 {
    opacity: 1 !important;
}

.clicked svg.text-gray-400 {
    color: #6DBEDA !important;
    /* brand-primary */
}

.clicked .text-black {
    color: #6DBEDA !important;
}

.clicked .stroke-white {
    stroke: black !important;
}

/* --- Form Validation --- */
.input-error {
    border-bottom-color: #EF4444 !important;
    box-shadow: 0 4px 4px -4px rgba(239, 68, 68, 0.5);
}

.error-tooltip {
    position: absolute;
    bottom: -22px;
    left: 0;
    background: rgba(20, 20, 20, 0.95);
    border: 1px solid rgba(239, 68, 68, 0.3);
    color: #FCA5A5;
    font-size: 8px;
    padding: 2px 6px;
    border-radius: 4px;
    z-index: 60;
    white-space: nowrap;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    pointer-events: none;
    animation: fadeIn 0.3s ease-out;
    backdrop-filter: blur(4px);
}

/* --- Focus Visible (keyboard accessibility) --- */
input:focus-visible,
textarea:focus-visible,
select:focus-visible {
    outline: none;
    box-shadow: 0 0 0 2px rgba(109, 190, 218, 0.5);
    border-color: #6DBEDA !important;
}

button:focus-visible {
    outline: 2px solid rgba(109, 190, 218, 0.6);
    outline-offset: 2px;
}