/* forms.css — shared form styles for PreviewViz pages.
   Load with <link rel="stylesheet" href="/forms.css" /> in each page's <head>,
   AFTER the page's own <style> block or BEFORE it — either works, but keep
   it consistent across pages. I'd put it just before the page's own <style>.

   Currently contains: the style-pill radio group only.
   Later: general .contact-form styles can move here once every page is on it. */

.style-pills {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    margin-top: 0.5rem;
}

.style-pills input[type="radio"] {
    position: absolute;
    opacity: 0;
    pointer-events: none;
}

.style-pills label {
    display: inline-block;
    margin: 0;
    padding: 0.5rem 1rem;
    border: 1px solid #d0d0d0;
    border-radius: 50px;
    background: #fff;
    color: #374151;
    font-size: 0.92rem;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.15s ease;
    user-select: none;
}

.style-pills label:hover {
    border-color: #93c5fd;
    color: #1d4ed8;
}

.style-pills input[type="radio"]:checked + label {
    background: #2563eb;
    border-color: #2563eb;
    color: #fff;
}

.style-pills input[type="radio"]:focus-visible + label {
    outline: 3px solid #93c5fd;
    outline-offset: 2px;
}