/*
|--------------------------------------------------------------------------
| XectiQ Certificate Verification
|--------------------------------------------------------------------------
*/

:root {
    --primary-color: #2563eb;
    --primary-dark: #1d4ed8;
    --accent-color: #0ea5e9;
    --background-color: #f8fafc;
    --surface-color: #ffffff;
    --text-color: #0f172a;
    --muted-text-color: #64748b;
    --border-color: #e2e8f0;
    --focus-color: rgba(37, 99, 235, 0.32);
}

html {
    scroll-behavior: smooth;
}

body {
    min-width: 320px;
    overflow-x: hidden;
}

button,
input,
textarea,
select {
    font: inherit;
}

button,
a {
    -webkit-tap-highlight-color: transparent;
}

img,
svg {
    display: block;
    max-width: 100%;
}

[x-cloak] {
    display: none !important;
}

::selection {
    background-color: rgba(37, 99, 235, 0.18);
    color: var(--text-color);
}

/*
|--------------------------------------------------------------------------
| Accessibility
|--------------------------------------------------------------------------
*/

.focus-ring:focus-visible {
    outline: 3px solid var(--focus-color);
    outline-offset: 3px;
}

a:focus-visible,
button:focus-visible,
input:focus-visible,
textarea:focus-visible,
select:focus-visible {
    outline-offset: 3px;
}

/*
|--------------------------------------------------------------------------
| Page Background
|--------------------------------------------------------------------------
*/

.page-background {
    background:
        radial-gradient(
            circle at 10% 10%,
            rgba(14, 165, 233, 0.1),
            transparent 35%
        ),
        radial-gradient(
            circle at 90% 20%,
            rgba(37, 99, 235, 0.1),
            transparent 35%
        ),
        var(--background-color);
}

/*
|--------------------------------------------------------------------------
| Form Styling
|--------------------------------------------------------------------------
*/

input::placeholder {
    opacity: 1;
}

input:-webkit-autofill,
input:-webkit-autofill:hover,
input:-webkit-autofill:focus {
    -webkit-text-fill-color: var(--text-color);
    caret-color: var(--text-color);
    box-shadow:
        0 0 0 1000px var(--surface-color) inset;
    transition:
        background-color 5000s ease-in-out 0s;
}

input[aria-invalid="true"] {
    background-color: rgba(254, 242, 242, 0.55);
}

input:disabled,
button:disabled {
    cursor: not-allowed;
}

/*
|--------------------------------------------------------------------------
| Code and Certificate Numbers
|--------------------------------------------------------------------------
*/

code {
    font-family:
        "Courier New",
        Courier,
        monospace;
}

/*
|--------------------------------------------------------------------------
| Reduced Motion
|--------------------------------------------------------------------------
*/

@media (prefers-reduced-motion: reduce) {
    html {
        scroll-behavior: auto;
    }

    *,
    *::before,
    *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        scroll-behavior: auto !important;
        transition-duration: 0.01ms !important;
    }
}