/* Product Submission Form Styles
   Keep this file lean and only override what is needed. Use --card-bg, --border-radius, .btn, .form-input, etc. from style.css. */

.submit-product-form-container {
    max-width: 540px;
    margin: 0 auto;
    padding: 24px 20px;
    background: var(--card-bg);
}

.submit-product-form-container h2 {
    margin-bottom: 0.5em;
    font-size: 1.3em;
    text-align: center;
}

#publicProductForm {
    width: 100%;
}

#publicProductForm label {
    display: block;
    margin-bottom: 6px;
    font-weight: 500;
    color: var(--secondary);
}

#publicProductForm .form-input {
    width: 100%;
    padding: 8px;
    border-radius: 4px;
    border: 1px solid #bbb;
    font-size: 1em;
    background: var(--card-bg);
    color: var(--text-color);
    margin-bottom: 0.5em;
    box-sizing: border-box;
}

.submit-help-list {
    color: var(--secondary);
    margin: 8px 0 0 0;
    padding-left: 18px;
    font-size: 0.95em;
}

#publicProductForm .btn {
    width: 100%;
    position: relative;
    margin-top: 8px;
}

#public-product-response {
    margin-top: 1em;
    min-height: 1em;
}

.spinner-svg {
    margin-left: 8px;
    width: 18px;
    height: 18px;
    animation: spin 0.8s linear infinite;
    vertical-align: middle;
}

.spinner-path {
    stroke: var(--secondary, #666);
    stroke-dasharray: 90, 150;
    stroke-dashoffset: 0;
    stroke-linecap: round;
    animation: dash 1.5s ease-in-out infinite;
}

@keyframes spin {
    100% { transform: rotate(360deg); }
}

@keyframes dash {
    0% { stroke-dasharray: 1, 150; stroke-dashoffset: 0; }
    50% { stroke-dasharray: 90, 150; stroke-dashoffset: -35; }
    100% { stroke-dasharray: 90, 150; stroke-dashoffset: -124; }
}

@media (max-width: 500px) {
    .submit-product-form-container {
        padding: 12px 5px;
    }
    .submit-product-form-container h2 {
        font-size: 1.1em;
    }
    #publicProductForm .btn {
        font-size: 1em;
    }
}