/* Custom styles for ANWB QR Generator */

/* ANWB Colors */
:root {
    --anwb-blue: #013D86;
    /* --anwb-blue: #00469D; */
    --anwb-yellow: #FFD940;
    --anwb-yellow-hover: #FFE14D;
}

/* Form radio button custom styles */
input[type="radio"] {
    appearance: none;
    width: 1.2rem;
    height: 1.2rem;
    border: 2px solid #D1D5DB;
    border-radius: 50%;
    outline: none;
    transition: all 0.2s ease-in-out;
}

input[type="radio"]:checked {
    border-color: #0096DA !important;
    background-color: #0096DA !important;
    box-shadow: inset 0 0 0 3px #0096DA !important;
}

input[type="radio"]:checked {
    border-color: #0096DA;
    background-color: #0096DA;
}

/* Custom focus styles */
/* input:focus, select:focus {
    border-color: var(--anwb-blue);
    box-shadow: 0 0 0 2px rgba(0, 70, 157, 0.1);
} */

/* Loading spinner animation */
@keyframes spin {
    from {
        transform: rotate(0deg);
    }
    to {
        transform: rotate(360deg);
    }
}

.animate-spin {
    animation: spin 1s linear infinite;
}

/* QR Preview container */
#qr-preview img {
    /* border-radius: 0.5rem; */
    /* border: 1px solid #D1D5DB; */
}

img {
    display: inline-block;
}

/* Responsive adjustments */
@media (max-width: 640px) {
    .container {
        padding-left: 1rem;
        padding-right: 1rem;
    }
    
    input[type="radio"] {
        width: 1rem;
        height: 1rem;
    }
}