/* Gravity Forms "Send us a message" form (form CSS class: pluckd-contact).
   The "Launch a search" hiring form reuses these styles (CSS classes:
   pluckd-contact pluckd-hiring); its overrides are at the end of this file.
   Built for the "Gravity Forms 2.5 Theme" (theme="gravity-theme"). */

.gform_wrapper.pluckd-contact_wrapper {
    --ink: #111111;
    --pink: #FF43DC;
    --orange: #FF8A1F;
    max-width: 560px;
    padding: 28px 28px 30px;
    background: #fff;
    border: 2px solid var(--ink);
    border-radius: 14px;
    box-shadow: 8px 8px 0 var(--orange);
    color: var(--ink);
    font-family: 'Bricolage Grotesque', sans-serif;
}

/* No "(Required)" text or "indicates required fields" note */
.gform_wrapper.pluckd-contact_wrapper .gfield_required,
.gform_wrapper.pluckd-contact_wrapper .gform_required_legend {
    display: none !important;
}

/* Heading */
.gform_wrapper.pluckd-contact_wrapper .gform_heading {
    margin: 0 0 18px;
}

.gform_wrapper.pluckd-contact_wrapper .gform_title {
    margin: 0;
    font-family: inherit;
    font-size: 30px;
    font-weight: 800;
    line-height: 1.2;
}

/* Grid spacing */
.gform_wrapper.pluckd-contact_wrapper .gform_fields {
    column-gap: 16px;
    row-gap: 18px;
}

/* Labels */
.gform_wrapper.pluckd-contact_wrapper .gfield_label,
.gform_wrapper.pluckd-contact_wrapper legend.gfield_label {
    margin: 0 0 8px;
    padding: 0;
    font-family: inherit;
    font-size: 18px;
    font-weight: 700;
    line-height: 1.3;
}

/* Inputs */
.gform_wrapper.pluckd-contact_wrapper input[type="text"],
.gform_wrapper.pluckd-contact_wrapper input[type="email"],
.gform_wrapper.pluckd-contact_wrapper input[type="tel"],
.gform_wrapper.pluckd-contact_wrapper select,
.gform_wrapper.pluckd-contact_wrapper textarea {
    width: 100%;
    min-height: 44px;
    padding: 10px 12px;
    background: #fff;
    color: var(--ink);
    border: 1.5px solid var(--ink);
    border-radius: 0;
    box-shadow: none;
    font-family: inherit;
    font-size: 15px;
    line-height: 1.4;
}

.gform_wrapper.pluckd-contact_wrapper textarea {
    height: 140px;
    min-height: 140px;
    resize: vertical;
}

.gform_wrapper.pluckd-contact_wrapper ::placeholder {
    color: #8a8a8a;
    opacity: 1;
}

/* No focus outline/ring on fields and buttons (both forms); !important beats Orbital's focus styles */
.gform_wrapper.pluckd-contact_wrapper input:focus,
.gform_wrapper.pluckd-contact_wrapper select:focus,
.gform_wrapper.pluckd-contact_wrapper textarea:focus,
.gform_wrapper.pluckd-contact_wrapper button:focus,
.gform_wrapper.pluckd-contact_wrapper input:focus-visible,
.gform_wrapper.pluckd-contact_wrapper select:focus-visible,
.gform_wrapper.pluckd-contact_wrapper textarea:focus-visible,
.gform_wrapper.pluckd-contact_wrapper button:focus-visible {
    outline: none !important;
    box-shadow: none !important;
}

/* Select arrow */
.gform_wrapper.pluckd-contact_wrapper select {
    appearance: none;
    padding-right: 36px;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1.5l5 5 5-5' fill='none' stroke='%23111' stroke-width='2'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 12px center;
    cursor: pointer;
}

.gform_wrapper.pluckd-contact_wrapper select:has(option[value=""]:checked) {
    color: #8a8a8a;
}

/* ---------- "I'm reaching out because I'm..." as buttons ---------- */
.gform_wrapper.pluckd-contact_wrapper .pluckd-choice-buttons .gfield_radio {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
}

.gform_wrapper.pluckd-contact_wrapper .pluckd-choice-buttons .gchoice {
    position: relative;
    display: block !important;
    width: auto !important;
    margin: 0 !important;
    padding: 0 !important;
}

/* Hide the radio dot but keep it usable by keyboard / screen readers */
.gform_wrapper.pluckd-contact_wrapper .pluckd-choice-buttons input[type="radio"] {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    margin: 0;
    opacity: 0;
    cursor: pointer;
}

/* !important: Gravity Forms gives choice labels a max-width and margin */
.gform_wrapper.pluckd-contact_wrapper .pluckd-choice-buttons label {
    display: inline-block !important;
    width: auto !important;
    max-width: none !important;
    margin: 0 !important;
    white-space: nowrap;
    padding: 9px 16px;
    background: #fff;
    color: var(--ink);
    border: 2px solid var(--choice, var(--ink));
    font-size: 18px;
    font-weight: 500;
    line-height: 1.2;
    cursor: pointer;
    transition: background-color 0.2s ease, color 0.2s ease, border-color 0.2s ease;
}

/* Border colour per option (as in the design) */
.gform_wrapper.pluckd-contact_wrapper .pluckd-choice-buttons .gchoice:nth-child(1) { --choice: var(--ink); }
.gform_wrapper.pluckd-contact_wrapper .pluckd-choice-buttons .gchoice:nth-child(2) { --choice: var(--pink); }
.gform_wrapper.pluckd-contact_wrapper .pluckd-choice-buttons .gchoice:nth-child(3) { --choice: var(--orange); }

/* Selected option: black */
.gform_wrapper.pluckd-contact_wrapper .pluckd-choice-buttons input[type="radio"]:checked + label {
    background: var(--ink);
    color: #fff;
    border-color: var(--ink);
    font-weight: 700;
}

/* ---------- Updates checkbox ---------- */
.gform_wrapper.pluckd-contact_wrapper .pluckd-updates .gchoice {
    display: flex;
    align-items: center;
    gap: 10px;
}

.gform_wrapper.pluckd-contact_wrapper .pluckd-updates input[type="checkbox"] {
    flex-shrink: 0;
    width: 18px;
    height: 18px;
    margin: 0;
    accent-color: var(--ink);
    cursor: pointer;
}

.gform_wrapper.pluckd-contact_wrapper .pluckd-updates label {
    margin: 0;
    font-size: 14px;
    font-weight: 400;
    cursor: pointer;
}

/* ---------- Résumé upload (shown for "Looking for a role") ---------- */
.gform_wrapper.pluckd-contact_wrapper input[type="file"] {
    width: 100%;
    padding: 10px 12px;
    background: #fff;
    color: var(--ink);
    border: 1.5px dashed var(--ink);
    font-family: inherit;
    font-size: 15px;
    cursor: pointer;
}

.gform_wrapper.pluckd-contact_wrapper input[type="file"]::file-selector-button {
    margin-right: 12px;
    padding: 6px 14px;
    background: var(--ink);
    color: #fff;
    border: 0;
    font-family: inherit;
    font-size: 15px;
    font-weight: 700;
    cursor: pointer;
}

/* "Accepted file types / Max. file size" note and the field description */
.gform_wrapper.pluckd-contact_wrapper .gfield--type-fileupload .gform_fileupload_rules,
.gform_wrapper.pluckd-contact_wrapper .gfield--type-fileupload .gfield_description {
    margin: 6px 0 0;
    padding: 0;
    color: #555;
    font-size: 13px;
}

/* Our description already says it; hide Gravity Forms' duplicate */
.gform_wrapper.pluckd-contact_wrapper .gfield--type-fileupload .gform_fileupload_rules {
    display: none;
}

/* ---------- Submit button ---------- */
.gform_wrapper.pluckd-contact_wrapper .gform_footer {
    margin: 22px 0 0;
    padding: 0;
}

.gform_wrapper.pluckd-contact_wrapper .gform_footer .gform_button,#gform_submit_button_2 {
    padding: 10px 26px;
    color: #000;
    border: 0;
    border-radius: 0;
    font-family: inherit;
    font-size: 18px;
    font-weight: 700;
    line-height: 1.4;
    cursor: pointer;
    transition: background-color 0.2s ease;
}
#gform_submit_button_2 {
        background: #0AE5DF !important;

}
 #gform_submit_button_3{
    background: #FF8110 !important;
}
.gform_wrapper.pluckd-contact_wrapper .gform_footer .gform_button:hover,
.gform_wrapper.pluckd-contact_wrapper .gform_footer .gform_button:focus {
    background: var(--ink);
    color: #fff;
}

/* ---------- Errors + thank-you message ---------- */
.gform_wrapper.pluckd-contact_wrapper .gfield_error input,
.gform_wrapper.pluckd-contact_wrapper .gfield_error select,
.gform_wrapper.pluckd-contact_wrapper .gfield_error textarea {
    border-color: #d63638;
}

/* Plain red text under the field; !important beats Gravity Forms' boxed style */
.gform_wrapper.pluckd-contact_wrapper .validation_message,
.gform_wrapper.pluckd-contact_wrapper .gfield_validation_message,
.gform_wrapper.pluckd-contact_wrapper .instruction {
    margin: 6px 0 0 !important;
    padding: 0 !important;
    background: none !important;
    border: 0 !important;
    color: #d63638;
    font-size: 13px !important;
    line-height: 1.4;
}

#gform_confirmation_message_3 {
    font-size: 30px;
    font-weight: 800;
    text-align: center;
}

.gform_confirmation_wrapper.pluckd-contact {
    padding: 28px;
    background: #fff;
    border: 2px solid #111;
    border-radius: 14px;
    box-shadow: 8px 8px 0 #FF8A1F;
    font-family: 'Bricolage Grotesque', sans-serif;
    font-size: 18px;
    font-weight: 700;
}

/* Mobile: one column */
@media (max-width: 600px) {
    .gform_wrapper.pluckd-contact_wrapper {
        padding: 22px 18px 24px;
    }

    .gform_wrapper.pluckd-contact_wrapper .gfield--width-half {
        grid-column: span 12;
    }
}

/* ---------- "Launch a search" hiring form (form CSS classes: pluckd-contact pluckd-hiring) ---------- */
.gform_wrapper.pluckd-hiring_wrapper {
    max-width: none;
    padding: 28px 24px 30px;
    background: #A9F6F4;
    border: 0;
    border-radius: 14px;
    box-shadow: none;
}

/* No title is shown, so drop the heading block (it only holds the hidden required note) */
.gform_wrapper.pluckd-hiring_wrapper .gform_heading {
    display: none;
}

/* Section headings ("About you", "About the role"), same size as the contact form title, without Gravity Forms' divider line */
.gform_wrapper.pluckd-contact_wrapper.pluckd-hiring_wrapper .pluckd-section {
    margin: 0;
    padding: 0;
    border: 0;
}

.gform_wrapper.pluckd-contact_wrapper.pluckd-hiring_wrapper .pluckd-section:not(:first-child) {
    margin-top: 22px;
}

.gform_wrapper.pluckd-contact_wrapper.pluckd-hiring_wrapper .gsection_title {
    margin: 0;
    font-family: inherit;
    font-size: 30px;
    font-weight: 800;
    line-height: 1.2;
}

.ginput_container.ginput_container_radio .gfield_radio {
    flex-direction: row !important;
}
/* .ginput_container + min-block-size: both Gravity Forms themes make large textareas much taller */
.gform_wrapper.pluckd-contact_wrapper.pluckd-hiring_wrapper .gfield .ginput_container textarea {
    height: 140px;
    min-block-size: 140px;
}

/* All choice buttons have a black border */
.gform_wrapper.pluckd-hiring_wrapper .pluckd-choice-buttons .gchoice:nth-child(n) {
    --choice: var(--ink);
}

.gform_wrapper.pluckd-hiring_wrapper .pluckd-choice-buttons label {
    padding: 8px 12px;
    border-width: 1.5px;
}

.gform_wrapper.pluckd-hiring_wrapper .pluckd-updates input[type="checkbox"] {
    background: #fff;
}

.gform_confirmation_wrapper.pluckd-hiring {
    background: #A9F6F4;
    border: 0;
    box-shadow: none;
}

@media (max-width: 600px) {
    .gform_wrapper.pluckd-hiring_wrapper {
        padding: 22px 18px 24px;
    }
}