/*------------------------------------------------------------------*\
    4. COMPONENTS - Forms
\*------------------------------------------------------------------*/

/* ==========================================================================
   GRID LAYOUT
   ========================================================================== */

@media screen and (min-width: 1024px) {

    #form_budget .elementor-form-fields-wrapper {
        display: grid !important;
        grid-template-columns: repeat(12, 1fr);
        gap: 25px 8px;
        position: relative;
    }

    /* Reset Elementor default widths */
    #form_budget .elementor-form-fields-wrapper > .elementor-field-group {
        width: 100%;
        flex-basis: unset !important;
        padding: 0 !important;
        margin-bottom: 0;
    }

    /* ---- Top fields: 50% each (span 6 of 12 columns) ---- */
    #form_budget .elementor-field-group-name,
    #form_budget .elementor-field-group-company,
    #form_budget .elementor-field-group-email,
    #form_budget .elementor-field-group-phone {
        grid-column: span 6;
    }

    /* ---- Project type: full width ---- */
    #form_budget .elementor-field-group-project_type {
        grid-column: 1 / -1;
        grid-row: 3;
    }

    /* ---- Textarea: full width, before services ---- */
    #form_budget .elementor-field-group-project_detail {
        grid-column: 1 / -1;
        grid-row: 4;
    }

    /* ---- Services title: full width ---- */
    #form_budget .elementor-field-type-html {
        grid-column: 1 / -1;
        grid-row: 5;
    }

    /* ==========================================================================
       SERVICES BAND — one grid row (6), three checkbox columns; each amount
       input aligns to a specific checkbox row.

       DOM order: CB1, DD1, DD2, CB2, DD3, DD4, CB3
         CB1 (cols 1-3) Interior / Exterior / Rendered Floor Plans / 360
            DD1 Amount  -> Interior   (row 1)
            DD2 Amount  -> Exterior   (row 2)
         CB2 (cols 5-7) Cinematic / Short Reels / Website / Social Media
            DD3 Minutes -> Cinematic  (row 1)
            DD4 Amount  -> Short Reels (row 2)
         CB3 (cols 9-11) Branding / Brochure / Floor Plans Brochure x2 / Marketing
       ========================================================================== */

    /* Vertical rhythm of one checkbox option:
       height = 25 line + 24 padding + 2 border = 51px ; gap 12 + margin 2 = 14px */
    #form_budget .elementor-form-fields-wrapper {
        --svc-opt-h: 51px;   /* checkbox option height          */
        --svc-pitch: 65px;   /* option height + spacing below it */
    }

    /* All service items share the band row and top-align */
    #form_budget .elementor-field-group-service_checkbox_1,
    #form_budget .elementor-field-group-service_checkbox_2,
    #form_budget .elementor-field-group-service_checkbox_3,
    #form_budget .elementor-field-group-service_dropdown_1,
    #form_budget .elementor-field-group-service_dropdown_2,
    #form_budget .elementor-field-group-service_dropdown_3,
    #form_budget .elementor-field-group-service_dropdown_4 {
        grid-row: 6;
        align-self: start;
    }

    /* Checkbox columns */
    #form_budget .elementor-field-group-service_checkbox_1 { grid-column: 1 / 4; }
    #form_budget .elementor-field-group-service_checkbox_2 { grid-column: 5 / 8; }
    #form_budget .elementor-field-group-service_checkbox_3 { grid-column: 9 / 12; }

    /* Amount / Minutes inputs — share one narrow column per checkbox group;
       the row-2 input is pushed down exactly one option pitch so it lines up
       with the second checkbox. */
    #form_budget .elementor-field-group-service_dropdown_1,
    #form_budget .elementor-field-group-service_dropdown_2 { grid-column: 4 / 5; }
    #form_budget .elementor-field-group-service_dropdown_3,
    #form_budget .elementor-field-group-service_dropdown_4 { grid-column: 8 / 9; }

    #form_budget .elementor-field-group-service_dropdown_2,
    #form_budget .elementor-field-group-service_dropdown_4 {
        margin-top: var(--svc-pitch);
    }

    /* Match input height to a checkbox option so their tops align;
       bordered + transparent like the adjacent service boxes (Elementor's
       kit default is a #141414 fill with no border). */
    #form_budget .elementor-field-group-service_dropdown_1 .elementor-field,
    #form_budget .elementor-field-group-service_dropdown_2 .elementor-field,
    #form_budget .elementor-field-group-service_dropdown_3 .elementor-field,
    #form_budget .elementor-field-group-service_dropdown_4 .elementor-field {
        height: var(--svc-opt-h);
        background-color: transparent;
        border: 1px solid var(--color-border);
        border-radius: 4px;
    }

    /* ---- File upload: overlay the textarea's bottom-right corner.
       Shares the Project Details cell (row 4) and pins to end/end, so it
       tracks the textarea at any width instead of a fixed pixel offset. ---- */
    #form_budget .elementor-field-group-services_file_upload {
        grid-column: 1 / -1;
        grid-row: 4;
        justify-self: end;
        align-self: end;
        width: auto !important;
        margin: 0 15px 12px 0;
        z-index: 2;
    }

    /* ---- Acceptance: full width, before submit ---- */
    #form_budget .elementor-field-group-acceptance_text {
        grid-column: 1 / -1;
        grid-row: 7;
        margin-bottom: 0px;
    }

    #form_budget .elementor-acceptance-field label::before {
        border: 1px solid #fff !important;
    }

    /* ---- Submit: full width ---- */
    #form_budget .elementor-field-type-submit {
        grid-column: 1 / -1;
        grid-row: 8;
        justify-content: flex-start;
        margin-top: 15px !important;
    }

}

/* ==========================================================================
   SERVICES TITLE
   ========================================================================== */

#form_budget .form-services-title {
    color: #fff;
    font-size: 20px;
    font-weight: 500;
}

/* ==========================================================================
   CHECKBOX STYLING
   ========================================================================== */

/* Checkbox options - vertical column layout */
#form_budget .elementor-field-subgroup.elementor-subgroup-inline {
    display: flex !important;
    flex-direction: column;
    align-items: stretch;
    gap: 12px !important;
}

/* Individual checkbox option */
#form_budget .elementor-field-subgroup.elementor-subgroup-inline .elementor-field-option {
    border: 1px solid var(--color-border) !important;
    border-radius: 4px !important;
    display: flex;
    justify-content: start;
    align-items: center;
    accent-color: var(--color-accent-alt);
    line-height: 25px;
    margin-left: 10px;
    padding: 12px 15px;
    margin-bottom: 2px !important;
    height: 40px;
}

#form_budget .elementor-field-option label {
    font-size: 11px;
}

/* Hide native checkbox */
#form_budget .elementor-field-option input[type="checkbox"] {
    display: none !important;
}

/* Custom checkbox - unchecked */
#form_budget .elementor-field-option input ~ label::before {
    content: '\00a0';
    font-family: 'FontAwesome';
    display: inline-block;
    width: 16px;
    height: 16px;
    border: 1px solid var(--color-accent-alt);
    font-size: 14px !important;
    line-height: 17px !important;
    margin-right: 10px !important;
}

.elementor-field-group-acceptance_text label:before {
    border: 1px solid #fff !important;
}

/* Custom checkbox - checked */
#form_budget .elementor-field-option input:checked ~ label::before {
    content: '\00a0';
    background-image: url('/makeitvisually/wp-content/uploads/2026/03/checked-icon.svg');
    background-repeat: no-repeat;
    background-size: 8px 9px;
    background-position: 3px 3px;
}

/* ==========================================================================
   DROPDOWN STYLING
   ========================================================================== */

#form_budget .elementor-field-group .elementor-select-wrapper select {
    font-size: 12px;
}

/* Bootstrap chevron arrow (all selects) */
#form_budget .elementor-field-type-select .elementor-select-wrapper select {
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3e%3cpath fill='none' stroke='%23ffffff' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='m2 5 6 6 6-6'/%3e%3c/svg%3e");
    background-repeat: no-repeat;
    background-position: right 18px center;
    background-size: 12px;
    padding-right: 24px;
}

/* Service dropdowns - smaller style */
#form_budget .elementor-field-group-service_dropdown_1 .elementor-select-wrapper select,
#form_budget .elementor-field-group-service_dropdown_2 .elementor-select-wrapper select,
#form_budget .elementor-field-group-service_dropdown_3 .elementor-select-wrapper select,
#form_budget .elementor-field-group-service_dropdown_4 .elementor-select-wrapper select,
#form_budget .elementor-field-group-service_dropdown_2_1 .elementor-select-wrapper select {
    background-color: #1f1f1f;
    border: 1px solid var(--color-border) !important;
    border-radius: 4px !important;
    font-size: 10px;
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3e%3cpath fill='none' stroke='%23ffffff' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='m2 5 6 6 6-6'/%3e%3c/svg%3e");
    background-repeat: no-repeat;
    background-position: right 8px center;
    background-size: 12px;
    padding-right: 24px;
}

/* Service dropdown options */
#form_budget .elementor-field-group-service_dropdown_1 .elementor-select-wrapper select option,
#form_budget .elementor-field-group-service_dropdown_2 .elementor-select-wrapper select option,
#form_budget .elementor-field-group-service_dropdown_3 .elementor-select-wrapper select option,
#form_budget .elementor-field-group-service_dropdown_4 .elementor-select-wrapper select option,
#form_budget .elementor-field-group-service_dropdown_2_1 .elementor-select-wrapper select option {
    background-color: #1f1f1f;
    color: var(--neutral-0);
}

/* Hide Elementor default arrow */
#form_budget .elementor-select-wrapper .select-caret-down-wrapper svg {
    display: none;
}

/* ==========================================================================
   FILE UPLOAD STYLING
   ========================================================================== */

#form_budget .elementor-field-type-upload input[type="file"] {
    color: var(--color-accent-alt) !important;
    background-color: transparent;
    font-size: 0px;
}

#form_budget .elementor-field-type-upload input[type="file"]::before {
    content: 'Adicionar arquivo';
    padding: 15px 15px;
    border-radius: 25px;
    color: #A6A6A6;
    font-size: 14px;
    line-height: 1em !important;
}

#form_budget .elementor-field-type-upload input[type="file"]::after {
    content: '';
    background-image: url("/makeitvisually/wp-content/uploads/2026/03/arrow-upload-icon.svg");
    background-repeat: no-repeat;
    background-size: contain;
    width: 16px;
    height: 16px;
    display: inline-block;
    margin: -5px -7px;
}

#form_budget .elementor-field-type-upload input[type="file"]::file-selector-button {
    display: none;
}

/* ==========================================================================
   MOBILE LAYOUT (< 1024px)
   ========================================================================== */

@media screen and (max-width: 1023px) {

    /* ----------------------------------------------------------------
       12-column grid. Top fields go two-up; the services band reflows
       into two checkbox columns (left 1/6, right 8/13) with the
       Amount/Minutes inputs nested in the middle column (6/8) on the
       same row as their matching left-column service. Every item is
       placed on an explicit row so there is no auto-placement.
       ---------------------------------------------------------------- */
    #form_budget .elementor-form-fields-wrapper {
        display: grid !important;
        grid-template-columns: repeat(12, 1fr);
        gap: 14px 8px;
        position: relative;
    }

    #form_budget .elementor-form-fields-wrapper > .elementor-field-group {
        width: 100% !important;
        flex-basis: unset !important;
        padding: 0 !important;
        margin: 0 !important;
    }

    /* ---- Top fields: two-up ---- */
    #form_budget .elementor-field-group-name    { grid-column: 1 / 7;  grid-row: 1; }
    #form_budget .elementor-field-group-company { grid-column: 7 / 13; grid-row: 1; }
    #form_budget .elementor-field-group-email   { grid-column: 1 / 7;  grid-row: 2; }
    #form_budget .elementor-field-group-phone   { grid-column: 7 / 13; grid-row: 2; }

    /* ---- Project type / details: full width ---- */
    #form_budget .elementor-field-group-project_type   { grid-column: 1 / -1; grid-row: 3; }
    #form_budget .elementor-field-group-project_detail { grid-column: 1 / -1; grid-row: 4; }

    /* ---- File upload: overlay the textarea bottom-right corner ---- */
    #form_budget .elementor-form-fields-wrapper .elementor-field-group-services_file_upload {
        grid-column: 1 / -1;
        grid-row: 4;
        justify-self: end;
        align-self: end;
        width: auto !important;
        margin: 0 12px 10px 0 !important;
        z-index: 2;
    }

    /* ---- Services title: full width ---- */
    #form_budget .elementor-field-type-html { grid-column: 1 / -1; grid-row: 5; }

    /* ----------------------------------------------------------------
       SERVICES BAND — flatten each checkbox group (display:contents on
       the group AND its inline subgroup) so the individual options
       become direct items of the wrapper grid and can be placed
       independently of the Amount/Minutes inputs that sit between them.
       ---------------------------------------------------------------- */
    #form_budget .elementor-field-group-service_checkbox_1,
    #form_budget .elementor-field-group-service_checkbox_2,
    #form_budget .elementor-field-group-service_checkbox_3 {
        display: contents;
    }
    #form_budget .elementor-field-group-service_checkbox_1 .elementor-field-subgroup.elementor-subgroup-inline,
    #form_budget .elementor-field-group-service_checkbox_2 .elementor-field-subgroup.elementor-subgroup-inline,
    #form_budget .elementor-field-group-service_checkbox_3 .elementor-field-subgroup.elementor-subgroup-inline {
        display: contents !important;
    }

    /* Group 1 — Interior/Exterior (left) · Rendered/360 (right) */
    #form_budget .elementor-field-group-service_checkbox_1 .elementor-field-option:nth-child(1) { grid-column: 1 / 6;  grid-row: 6; }
    #form_budget .elementor-field-group-service_checkbox_1 .elementor-field-option:nth-child(2) { grid-column: 1 / 6;  grid-row: 7; }
    #form_budget .elementor-field-group-service_checkbox_1 .elementor-field-option:nth-child(3) { grid-column: 8 / 13; grid-row: 6; }
    #form_budget .elementor-field-group-service_checkbox_1 .elementor-field-option:nth-child(4) { grid-column: 8 / 13; grid-row: 7; }
    #form_budget .elementor-field-group-service_dropdown_1 { grid-column: 6 / 8; grid-row: 6; }
    #form_budget .elementor-field-group-service_dropdown_2 { grid-column: 6 / 8; grid-row: 7; }

    /* Group 2 — Cinematic/Short Reels (left) · Website/Social (right) */
    #form_budget .elementor-field-group-service_checkbox_2 .elementor-field-option:nth-child(1) { grid-column: 1 / 6;  grid-row: 8; }
    #form_budget .elementor-field-group-service_checkbox_2 .elementor-field-option:nth-child(2) { grid-column: 1 / 6;  grid-row: 9; }
    #form_budget .elementor-field-group-service_checkbox_2 .elementor-field-option:nth-child(3) { grid-column: 8 / 13; grid-row: 8; }
    #form_budget .elementor-field-group-service_checkbox_2 .elementor-field-option:nth-child(4) { grid-column: 8 / 13; grid-row: 9; }
    #form_budget .elementor-field-group-service_dropdown_3 { grid-column: 6 / 8; grid-row: 8; }
    #form_budget .elementor-field-group-service_dropdown_4 { grid-column: 6 / 8; grid-row: 9; }

    /* Group 3 — Branding/Brochure/Marketing (left) · Floor Plans x2 (right) */
    #form_budget .elementor-field-group-service_checkbox_3 .elementor-field-option:nth-child(1) { grid-column: 1 / 6;  grid-row: 10; }
    #form_budget .elementor-field-group-service_checkbox_3 .elementor-field-option:nth-child(2) { grid-column: 1 / 6;  grid-row: 11; }
    #form_budget .elementor-field-group-service_checkbox_3 .elementor-field-option:nth-child(3) { grid-column: 8 / 13; grid-row: 10; }
    #form_budget .elementor-field-group-service_checkbox_3 .elementor-field-option:nth-child(4) { grid-column: 8 / 13; grid-row: 11; }
    #form_budget .elementor-field-group-service_checkbox_3 .elementor-field-option:nth-child(5) { grid-column: 1 / 6;  grid-row: 12; }

    /* Service option boxes: fill their column, drop inherited spacing */
    #form_budget .elementor-field-subgroup.elementor-subgroup-inline .elementor-field-option {
        margin-left: 0;
        margin-bottom: 0 !important;
        width: 100%;
    }
    #form_budget .elementor-field-option label {
        font-size: 9px !important;
    }

    /* Vertically center the checkbox + label within each option box */
    #form_budget .elementor-field-type-checkbox .elementor-field-subgroup .elementor-field-option label {
        display: flex;
        align-items: center;
    }

    /* Amount / Minutes inputs: match the option box height, fill the cell */
    #form_budget .elementor-field-group-service_dropdown_1 .elementor-field,
    #form_budget .elementor-field-group-service_dropdown_2 .elementor-field,
    #form_budget .elementor-field-group-service_dropdown_3 .elementor-field,
    #form_budget .elementor-field-group-service_dropdown_4 .elementor-field {
        height: 100%;
        min-height: 40px;
        width: 100%;
        background-color: transparent;
        border: 1px solid var(--color-border);
        border-radius: 4px;
        font-size: 10px;
        padding: 0 8px;
        text-align: center;
    }

    /* ---- Acceptance + submit ---- */
    #form_budget .elementor-field-group-acceptance_text { grid-column: 1 / -1; grid-row: 13; }
    #form_budget .elementor-field-type-submit {
        grid-column: 1 / -1;
        grid-row: 14;
        justify-content: center;
        margin-top: 20px !important;
    }

    /* ---- Misc ---- */
    #form_budget .elementor-field-group-project_type .elementor-select-wrapper select,
    #form_budget .form-services-title {
        font-size: var(--fluid-label) !important;
    }

    #form_budget .elementor-field-group-project_detail textarea::placeholder {
        font-size: 11px;
        color: #fff;
    }

    #form_budget .elementor-field-type-upload input[type="file"]::before {
        font-size: 11px;
    }

    #form_budget .elementor-field-type-upload input[type="file"]::after {
        width: 12px;
        height: 12px;
        margin: -3px -7px;
    }
}

/* ==========================================================================
   FOCUS HIGHLIGHT
   ========================================================================== */

#form_budget .elementor-field-group input:not([type="checkbox"]):not([type="file"]),
#form_budget .elementor-field-group textarea,
#form_budget .elementor-field-group select {
    transition: border-color 0.3s ease, box-shadow 0.3s ease;
}

#form_budget .elementor-field-group input:not([type="checkbox"]):not([type="file"]):focus,
#form_budget .elementor-field-group textarea:focus,
#form_budget .elementor-field-group select:focus {
    border-color: var(--input-focus-border) !important;
    box-shadow: 0 0 0 1px var(--input-focus-border);
    outline: none;
}

/* ==========================================================================
   VALIDATION STATES
   ========================================================================== */

/* Error state — red border on the field group */
#form_budget .miv-field-error input:not([type="checkbox"]):not([type="file"]),
#form_budget .miv-field-error textarea,
#form_budget .miv-field-error select {
    border-color: var(--input-error) !important;
    box-shadow: 0 0 0 1px var(--input-error);
}

/* Error state — service dropdowns (higher specificity to override !important border) */
#form_budget .miv-field-error.elementor-field-type-select .elementor-select-wrapper select {
    border-color: var(--input-error) !important;
    box-shadow: 0 0 0 1px var(--input-error);
}

/* Error message */
#form_budget .miv-error-message {
    display: block;
    color: var(--input-error);
    font-family: var(--font-secondary);
    font-size: var(--fluid-label);
    margin-top: 6px;
    opacity: 0;
}

/* Success state — green border after valid blur */
#form_budget .miv-field-success input:not([type="checkbox"]):not([type="file"]),
#form_budget .miv-field-success textarea,
#form_budget .miv-field-success select {
    border-color: var(--input-success) !important;
    box-shadow: 0 0 0 1px var(--input-success);
}

/* ==========================================================================
   ELEMENTOR SUCCESS / ERROR MESSAGES
   ========================================================================== */

#form_budget .elementor-message {
    font-family: var(--font-secondary);
    font-size: var(--fluid-label);
    padding: 16px 20px;
    border-radius: var(--input-radius);
    margin-top: 16px;
}

#form_budget .elementor-message-success {
    color: var(--input-success);
    background: rgba(78, 203, 113, 0.08);
    border: 1px solid rgba(78, 203, 113, 0.25);
    margin-top: 60px;
}

#form_budget .elementor-message-danger {
    color: var(--input-error);
    background: rgba(255, 107, 107, 0.08);
    border: 1px solid rgba(255, 107, 107, 0.25);
    margin-top: 60px;
}