.uploader-form 
{
    width: 100%;
    flex-basis: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--background);
    border-radius: 50px;
    border: 1px solid var(--ncs-container-strong);
    padding: 0;
    overflow: visible;
    /* max-width: 480px; */
    margin: 0;
    transition: all 0.2s;
    overflow: clip;

    &:focus-within {
        border: 2px solid var(--ncs-primary);
        box-shadow: 0 0 0 4px color-mix(in srgb, var(--ncs-primary) 25%, transparent);
    }

    input {
        border-radius: var(--button-border-radius);
    
        &[type="text"]
        {
            border: 0;
            background: none;
            font-weight: 500;
            padding: 12px 24px;
            width: 100%;
            font-size: var(--font-sm);
            font-family: 'Plus Jakarta Sans';
            transition: all 0.2s;
        }

        &[type="text"]:focus-visible {
            outline: none;
        }
        
        &[type="submit"] {
            flex-shrink: 0;
            border: none;
            margin: 4px;
            padding: 12px 24px;
            background-color: var(--ncs-primary);
            color: var(--ncs-on-primary);
            border-radius: 50px;
            cursor: pointer;
            font-family: 'Plus Jakarta Sans', sans-serif;
            font-size: var(--font-md);
            font-weight: 500;
            transition: 0.2s;
            box-shadow: -70px 0 120px color-mix(in srgb, var(--ncs-primary) 60%, transparent);
        }
        
        &[type="submit"]:hover {
            background-color: var(--ncs-primary);
            color: var(--ncs-on-primary);
            box-shadow: 0 0 0 4px color-mix(in srgb, var(--ncs-primary) 25%, transparent);
        }
    }

    /* pasteMode renders a generic secondary <button class="cta cta-secondary"> instead of
       input[type="submit"]; keep it flush in the input row like the submit button. */
    & > .cta {
        flex-shrink: 0;
        margin: 4px;
    }
}
@media(max-width:767px) {
.uploader-form {
            overflow: visible;
            flex-direction: column;
            border: 0;
            background-color: transparent;

            &:focus-within {
                border: 0;
                box-shadow: none;
            }

            &[data-state="success"] input[type="text"] {
                border: 2px solid var(--maestra-green);
                box-shadow: 0 0 0 4px color-mix(in srgb, var(--maestra-green) 12%, transparent);
            }

            &[data-state="error"] input[type="text"] {
                border: 2px solid var(--maestra-red); 
                box-shadow: 0 0 0 4px color-mix(in srgb, var(--maestra-red) 12%, transparent);
            }

            & input
            {
                &[type="submit"],
                &[type="submit"]:hover
                {
                    box-shadow: none!important;
                    max-width: min-content!important;
                }

                &[type=text]
                {
                    background: var(--background);
                    border: 2px solid color-mix(in srgb, var(--text) 20%, transparent);
                    margin-bottom: 15px;
                }

                &[type=text]:focus-within {
                    border: 2px solid var(--maestra-blue);
                    box-shadow: 0 0 0 4px rgba(0, 138, 255, 0.2);
                }
            }
        }
    }

@media (prefers-reduced-motion: reduce) {
  .uploader-form,
  .uploader-form input[type="text"],
  .uploader-form input[type="submit"] {
    transition-property: border-color, box-shadow, background-color, color, opacity;
  }
}