/* Custom styles for 1st Choice Fingerprinting Registration */

body {
    font-family: 'Roboto', sans-serif;
}

/* ─── Brand buttons ─────────────────────────────────────── */
.btn-brand-purple {
    background-color: #9148F9;
    color: white;
}
.btn-brand-purple:hover {
    background-color: #7a39d4;
}
.btn-brand-blue {
    background-color: #4012E4;
    color: white;
}
.btn-brand-blue:hover {
    background-color: #3010C0;
}

/* ─── Validation styles ─────────────────────────────────── */
.field-validation-error {
    color: #dc2626;
    font-size: 0.875rem;
    margin-top: 0.25rem;
    display: block;
}
.input-validation-error {
    border-color: #dc2626 !important;
}
.validation-summary-errors {
    background-color: #fef2f2;
    border: 1px solid #fecaca;
    padding: 1rem;
    border-radius: 0.5rem;
    margin-bottom: 1rem;
}
.validation-summary-errors ul {
    list-style: none;
    padding: 0;
    margin: 0;
}
.validation-summary-errors li {
    color: #dc2626;
    font-size: 0.875rem;
}

/* ─── Form inputs – ensure full tap target on mobile ────── */
input[type="text"],
input[type="email"],
input[type="tel"],
input[type="password"],
input[type="number"],
input[type="date"],
select,
textarea {
    min-height: 44px;   /* WCAG recommended touch target */
    font-size: 1rem;    /* Prevent iOS auto-zoom (≥16px) */
}

/* ─── Radio / checkbox card active state ────────────────── */
label:has(input[type="radio"]:checked),
label:has(input[type="checkbox"]:checked) {
    border-color: #9148F9;
    background-color: #faf5ff;
}

/* ─── Calendar – better tap targets on mobile ───────────── */
.cal-day {
    min-height: 36px;
    display: flex;
    align-items: center;
    justify-content: center;
}

/* ─── Time slot buttons – uniform height ────────────────── */
.time-slot-btn {
    min-height: 44px;
}

/* ─── Responsive table utilities ────────────────────────── */
@media (max-width: 640px) {
    .table-responsive-hide {
        display: none;
    }
}

/* ─── Smooth focus ring ──────────────────────────────────── */
*:focus-visible {
    outline: 2px solid #9148F9;
    outline-offset: 2px;
}

/* ─── Loading state for buttons ─────────────────────────── */
button[disabled] {
    cursor: not-allowed;
    opacity: 0.6;
}

/* ─── Page transitions ───────────────────────────────────── */
main {
    animation: fadeIn 0.15s ease-in;
}
@keyframes fadeIn {
    from { opacity: 0; transform: translateY(4px); }
    to   { opacity: 1; transform: translateY(0); }
}

/* ─── ID example illustration ────────────────────────────── */
.id-example-content:not(.hidden) {
    animation: idExampleSlide 0.2s ease-out;
}
@keyframes idExampleSlide {
    from { opacity: 0; transform: translateY(-8px); }
    to   { opacity: 1; transform: translateY(0); }
}
.id-example-svg {
    border: 1px solid #e2e8f0;
}
.example-chevron.rotate-180 {
    transform: rotate(180deg);
}
.example-tab {
    cursor: pointer;
}
.example-tab:hover:not(.bg-brand-purple) {
    background-color: #f5f3ff;
}