/* ============================================
   PUBLIC FORM STYLES (Pages/Public/Form.cshtml)
   Dynamic branding via Razor-injected CSS custom properties.
   ============================================ */

/* --- Reset / overrides for embed context --- */
html, body {
    margin: 0 !important;
    padding: 0 !important;
    background: transparent !important;
}

body.form-layout-body {
    background: transparent !important;
}

/* --- Main wrapper --- */
.form-embed-wrapper {
    min-width: 280px;
    width: 100% !important;
    max-width: 100% !important;
    min-height: 100vh;
    font-family: var(--fe-font-family);
    font-size: var(--fe-base-font-size);
    color: var(--fe-text-color);
    padding: 1.5rem 1rem;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    box-sizing: border-box;
}

/* --- Labels --- */
.form-embed-wrapper .form-label {
    color: var(--fe-label-color) !important;
    font-weight: var(--fe-label-weight) !important;
    font-size: var(--fe-base-font-size) !important;
    display: block;
    margin-bottom: 0.5rem;
    letter-spacing: 0.01em;
}

/* --- Title --- */
.form-embed-wrapper .form-title {
    color: var(--fe-primary-color) !important;
    font-weight: 700;
    font-size: var(--fe-title-font-size);
    font-family: var(--fe-font-family);
}

/* --- Description --- */
.form-embed-wrapper .form-description {
    color: var(--fe-description-color) !important;
}

/* --- Form card --- */
.form-embed-wrapper .form-container {
    background: var(--fe-form-card-bg) !important;
    border-radius: 16px !important;
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.12) !important;
    max-width: 700px !important;
    width: 100% !important;
    margin: 0 auto !important;
    padding: 2rem !important;
    border: 1px solid rgba(0, 0, 0, 0.05) !important;
    position: relative;
    overflow: hidden;
    box-sizing: border-box;
}

/* --- Inputs --- */
.form-embed-wrapper .form-container .form-control,
.form-embed-wrapper .form-container .form-select {
    border: 2px solid var(--fe-input-border-color) !important;
    border-radius: 8px !important;
    padding: 0.75rem 1rem !important;
    font-size: var(--fe-base-font-size) !important;
    font-family: var(--fe-font-family) !important;
    background: #fff !important;
    color: var(--fe-text-color) !important;
    transition: border-color 0.2s, box-shadow 0.2s !important;
    width: 100% !important;
    box-sizing: border-box;
}

.form-embed-wrapper .form-container .form-control:focus,
.form-embed-wrapper .form-container .form-select:focus {
    border-color: var(--fe-input-focus-color) !important;
    box-shadow: 0 0 0 4px var(--fe-input-focus-rgba) !important;
    outline: none !important;
}

/* --- Submit & navigation buttons ---
   Let inline styles from Razor control background/color so branding
   overrides from the builder are honored. The embed-form.css generic
   .btn-submit rule uses !important on --form-accent (the old variable),
   so we must override it here with higher specificity + !important
   pointing at the inline style attribute instead. We do this by NOT
   setting background/color at all — the inline style already carries
   the correct values. We just need to neutralize the embed-form.css
   !important declarations for buttons inside .form-embed-wrapper.    */
.form-embed-wrapper .form-container .btn-submit {
    background: unset !important;
    color: unset !important;
}

/* Re-apply the inline style via the [style] attribute selector.
   Browsers apply attribute styles after unset, so the inline
   background / color will win. */
.form-embed-wrapper .form-container .btn-submit[style] {
    /* Allow inline styles to take effect by removing the embed-form.css override */
}

/* --- Rating stars --- */
.form-embed-wrapper .form-container .rating-input .star-label i.bi-star-fill {
    color: var(--fe-primary-color) !important;
}

/* --- Checkbox / Radio accent --- */
.form-embed-wrapper .form-container input[type="checkbox"],
.form-embed-wrapper .form-container input[type="radio"] {
    accent-color: var(--fe-primary-color) !important;
}

.form-embed-wrapper .form-check-label {
    color: var(--fe-text-color) !important;
}

/* --- Step progress bar --- */
.form-embed-wrapper .step-progress-bar {
    height: 6px;
    background: #e9ecef;
    border-radius: 3px;
    overflow: hidden;
    margin-bottom: 1.5rem;
    max-width: 700px;
    width: 100%;
}

.form-embed-wrapper .step-progress-fill {
    height: 100%;
    background: linear-gradient(90deg, var(--fe-primary-color), var(--fe-accent-color));
    transition: width 0.3s ease;
}

/* --- Validation --- */
.text-danger {
    color: #dc3545 !important;
}

/* --- Field wrappers --- */
.form-embed-wrapper .field-wrapper {
    margin-bottom: 1.25rem;
    width: 100%;
}

/* --- Two-column grid --- */
.form-embed-wrapper .form-fields-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 1rem 1.5rem;
    grid-auto-flow: dense;
    align-items: start;
    width: 100%;
}

.form-embed-wrapper .field-wrapper .mb-3,
.form-embed-wrapper .form-fields-grid .field-wrapper {
    width: 100%;
}

.form-embed-wrapper input,
.form-embed-wrapper select,
.form-embed-wrapper textarea {
    width: 100% !important;
    box-sizing: border-box !important;
}

/* Remove double margin inside grid cells */
.form-fields-grid .field-wrapper .form-field-container {
    margin-bottom: 0 !important;
}

/* --- Responsive --- */
@media (max-width: 768px) {
    .form-embed-wrapper .form-fields-grid {
        grid-template-columns: 1fr;
    }

    .form-embed-wrapper {
        padding: 1rem 0.75rem;
    }

    .form-embed-wrapper .form-container {
        padding: 1.5rem 1rem !important;
    }
}