/**
 * Howlform Universal Responsive Form Layout Engine
 * 12-column CSS Grid system for all Howlform forms and field types.
 */

:root {
    --ff-grid-col-gap: 20px;
    --ff-grid-row-gap: 0px;
    --ff-label-color: inherit;
    --ff-label-font-weight: 500;
}

/* 1. Parent 12-Column Responsive CSS Grid Container */
.frm-fluent-form,
.frm-fluent-form > fieldset {
    display: grid !important;
    grid-template-columns: repeat(12, 1fr) !important;
    column-gap: var(--ff-grid-col-gap, 20px) !important;
    row-gap: var(--ff-grid-row-gap, 0px) !important;
    width: 100% !important;
    max-width: 100% !important;
    margin: 0 !important;
    padding: 0 !important;
    border: none !important;
    min-width: 0 !important;
    box-sizing: border-box !important;
}

/* 2. Hidden Elements & Screen Reader Legend Do Not Consume Grid Cells */
.frm-fluent-form legend,
.frm-fluent-form legend.ff_screen_reader_title {
    position: absolute !important;
    width: 1px !important;
    height: 1px !important;
    padding: 0 !important;
    margin: -1px !important;
    overflow: hidden !important;
    clip: rect(0, 0, 0, 0) !important;
    border: 0 !important;
}

.frm-fluent-form input[type="hidden"],
.frm-fluent-form .ff-form-inline-style,
.frm-fluent-form style,
.frm-fluent-form script {
    display: none !important;
}

/* 3. Universal Item Defaults: Span 12 Columns (100% Width) */
.frm-fluent-form > *,
.frm-fluent-form > fieldset > * {
    grid-column: span 12;
    min-width: 0;
    max-width: 100%;
    box-sizing: border-box;
}

.frm-fluent-form .ff-el-group {
    min-width: 0;
    width: 100%;
    box-sizing: border-box;
    margin-bottom: 20px;
}

/* 4. Desktop & Tablet 12-Column Grid Layout Spans (>= 768px) */
@media (min-width: 768px) {
    .frm-fluent-form .ff-col-12,
    .frm-fluent-form > fieldset > .ff-col-12 {
        grid-column: span 12 !important;
    }
    .frm-fluent-form .ff-col-6,
    .frm-fluent-form > fieldset > .ff-col-6 {
        grid-column: span 6 !important;
    }
    .frm-fluent-form .ff-col-4,
    .frm-fluent-form > fieldset > .ff-col-4 {
        grid-column: span 4 !important;
    }
    .frm-fluent-form .ff-col-8,
    .frm-fluent-form > fieldset > .ff-col-8 {
        grid-column: span 8 !important;
    }
    .frm-fluent-form .ff-col-3,
    .frm-fluent-form > fieldset > .ff-col-3 {
        grid-column: span 3 !important;
    }
    .frm-fluent-form .ff-col-9,
    .frm-fluent-form > fieldset > .ff-col-9 {
        grid-column: span 9 !important;
    }

    /* Specific column spans starting on a new row */
    .frm-fluent-form .ff-col-12.ff-new-row,
    .frm-fluent-form > fieldset > .ff-col-12.ff-new-row {
        grid-column: 1 / span 12 !important;
    }
    .frm-fluent-form .ff-col-6.ff-new-row,
    .frm-fluent-form > fieldset > .ff-col-6.ff-new-row {
        grid-column: 1 / span 6 !important;
    }
    .frm-fluent-form .ff-col-4.ff-new-row,
    .frm-fluent-form > fieldset > .ff-col-4.ff-new-row {
        grid-column: 1 / span 4 !important;
    }
    .frm-fluent-form .ff-col-8.ff-new-row,
    .frm-fluent-form > fieldset > .ff-col-8.ff-new-row {
        grid-column: 1 / span 8 !important;
    }
    .frm-fluent-form .ff-col-3.ff-new-row,
    .frm-fluent-form > fieldset > .ff-col-3.ff-new-row {
        grid-column: 1 / span 3 !important;
    }
    .frm-fluent-form .ff-col-9.ff-new-row,
    .frm-fluent-form > fieldset > .ff-col-9.ff-new-row {
        grid-column: 1 / span 9 !important;
    }

    /* Force new row fallback */
    .frm-fluent-form .ff-new-row,
    .frm-fluent-form > fieldset > .ff-new-row {
        grid-column-start: 1 !important;
    }
}

/* 5. Mobile Single-Column Responsive Stacking (< 768px) */
@media (max-width: 767px) {
    .frm-fluent-form,
    .frm-fluent-form > fieldset {
        display: flex !important;
        flex-direction: column !important;
        width: 100% !important;
        gap: 0 !important;
    }
    .frm-fluent-form > *,
    .frm-fluent-form > fieldset > * {
        width: 100% !important;
        max-width: 100% !important;
        grid-column: span 12 !important;
        grid-column-start: auto !important;
    }
}

/* 6. Dynamic Conditional Fields Reflow */
.frm-fluent-form .ff-hidden,
.frm-fluent-form .ff_excluded,
.frm-fluent-form [style*="display: none"],
.frm-fluent-form [style*="display:none"] {
    display: none !important;
}

/* 7. Adaptive Contrast & Typography Integration (Style Precedence Engine) */
/* Priority 1 (per-field) > Priority 2 (form-wide) > Priority 3 (auto-contrast / theme) */
.frm-fluent-form .ff-el-input--label label,
.frm-fluent-form .ff-el-form-check-label,
.frm-fluent-form .howlform-total-label,
.frm-fluent-form .howlform-branding-title {
    color: var(--ff-field-label-color, var(--ff-form-label-color, var(--ff-label-color, inherit))) !important;
    font-weight: var(--ff-field-label-font-weight, var(--ff-form-label-font-weight, var(--ff-label-font-weight, 500))) !important;
    font-size: var(--ff-field-label-font-size, inherit) !important;
}

.frm-fluent-form .ff-el-input--label {
    margin-bottom: var(--ff-field-label-margin-bottom, inherit) !important;
}

/* Required Asterisk Marker: strictly scoped to labels, never leaking to errors */
.frm-fluent-form .ff-el-input--label.ff-el-is-required.asterisk-right label:after,
.frm-fluent-form .ff-el-input--label.ff-el-is-required.asterisk-left label:before,
.frm-fluent-form .ff-el-input--label.ff-el-is-required label:after,
.frm-fluent-form .ff-el-input--label.ff-el-is-required label:before,
.frm-fluent-form .ff-el-input--label label span.ff-el-required,
.frm-fluent-form .ff-el-input--label label span.text-danger,
.frm-fluent-form .ff-el-input--label span.ff-el-required,
.frm-fluent-form .ff-el-required {
    color: var(--ff-field-asterisk-color, var(--ff-asterisk-color, #f56c6c)) !important;
}

/* Dark Hero / Dark Container Adaptive Contrast Fallback (Priority 3) */
.elementor-element-69a32fc2 .frm-fluent-form,
.elementor-element-7c403bb2 .frm-fluent-form,
[data-theme="dark"] .frm-fluent-form,
.dark-theme .frm-fluent-form,
.dark-bg .frm-fluent-form,
.has-dark-background .frm-fluent-form,
.frm-fluent-form.ff-dark-bg {
    --ff-label-color: #ffffff;
}

.elementor-element-69a32fc2 .frm-fluent-form .ff-help-message,
.elementor-element-7c403bb2 .frm-fluent-form .ff-help-message,
[data-theme="dark"] .frm-fluent-form .ff-help-message,
.frm-fluent-form.ff-dark-bg .ff-help-message,
.frm-fluent-form.ff-dark-bg .text-muted {
    color: rgba(255, 255, 255, 0.85) !important;
}

.frm-fluent-form.ff-dark-bg .ff-upload-drag-hint,
.frm-fluent-form.ff-dark-bg .ff-upload-meta-hint {
    color: rgba(255, 255, 255, 0.75) !important;
}

/* 8. Submit Button & Pricing Alignment */
.frm-fluent-form .howlform-total-summary {
    display: block !important;
    width: 100% !important;
}

.frm-fluent-form .howlform-total-row {
    display: inline-flex !important;
    align-items: baseline !important;
    justify-content: flex-start !important;
    flex-wrap: wrap !important;
    gap: 6px !important;
    width: fit-content !important;
    max-width: 100% !important;
    margin: 0 !important;
    padding: 0 !important;
}

.frm-fluent-form .howlform-total-amount {
    margin: 0 !important;
    margin-left: 0 !important;
    text-align: left !important;
    white-space: nowrap !important;
}

.frm-fluent-form .ff_submit_btn_wrapper {
    margin-top: 10px;
    margin-bottom: 0;
}
.frm-fluent-form .ff-btn-submit {
    margin-top: 0;
}


/* Compact single-row textarea in side-by-side layouts */
.frm-fluent-form textarea[rows="1"] {
    min-height: 41px !important;
    height: 41px !important;
    padding: 9px 12px !important;
    box-sizing: border-box !important;
}