/**
 * Custom Gravity Forms Styling for Open Application Component
 * Matches exact Tailwind design specifications
 */
form {
    width: 100% !important;
}

/* Main form wrapper - w-96 flex flex-col justify-start items-start gap-6 */
.open-application-form .gform_wrapper {
    width: 100%;
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    align-items: flex-start;
    gap: 24px;
}

/* Form body wrapper */
.open-application-form .gform_wrapper .gform_body {
    align-self: stretch;
    width: 100%;
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    align-items: flex-start;
    gap: 8px;
}

/* Fields container - self-stretch flex flex-col justify-start items-start gap-2 */
.open-application-form .gform_wrapper .gform_fields {
    align-self: stretch;
    width: 100%;
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    justify-content: flex-start;
    align-items: flex-start;
    gap: 8px;
    padding: 0;
    margin: 0;
    list-style: none;
}

/* Individual field containers */
.open-application-form .gform_wrapper .gfield {
    margin: 0 !important;
    padding: 0 !important;
    width: 100%;
}

/* File upload fields row wrapper */
.open-application-form .gform_wrapper .gfield--type-fileupload.gfield--width-half {
    width: calc(50% - 4px) !important;
}

/* Full width fields - self-stretch */
.open-application-form .gform_wrapper .gfield--width-full {
    align-self: stretch;
    width: 100% !important;
    flex: 0 0 100%;
}

/* Regular input field containers - self-stretch px-6 py-4 bg-White-Smoke rounded outline outline-1 outline-offset-[-1px] outline-zinc-900/10 flex justify-start items-start gap-2 */
.open-application-form .gform_wrapper .ginput_container_text,
.open-application-form .gform_wrapper .ginput_container_email,
.open-application-form .gform_wrapper .ginput_container_phone,
.open-application-form .gform_wrapper .ginput_container_textarea,
.open-application-form .gform_wrapper .gfield--width-full:not(.gfield--type-fileupload) .ginput_container,
.open-application-form .gform_wrapper .ginput_complex {
    align-self: stretch;
    width: 100%;
    padding: 7px 24px;
    background: #F2F2F2;
    border-radius: 0.25rem;
    outline: 1px solid rgba(24, 24, 27, 0.1);
    outline-offset: -1px;
    display: flex;
    justify-content: flex-start;
    align-items: flex-start;
    gap: 8px;
}

/* Input fields - text styling */
.open-application-form .gform_wrapper input[type="text"],
.open-application-form .gform_wrapper input[type="email"],
.open-application-form .gform_wrapper input[type="tel"],
.open-application-form .gform_wrapper textarea {
    border: none;
    background: transparent;
    padding: 0;
    margin: 0;
    outline: none;
    width: 100%;
    flex: 1;
    justify-content: flex-start;
    color: #1C1C1C;
    font-size: 14px;
    font-family: 'Inter', sans-serif;
    font-weight: 400;
    line-height: 20px;
    box-shadow: none !important;
    resize: vertical;
}

.open-application-form .gform_wrapper input::placeholder,
.open-application-form .gform_wrapper textarea::placeholder {
    color: #1C1C1C;
}

/* Textarea specific - adjust padding for better vertical spacing */
.open-application-form .gform_wrapper .ginput_container_textarea {
    padding: 16px 24px;
}

/* Name field - make it span full width */
.open-application-form .gform_wrapper .name_first {
    width: 100%;
    flex: 1;
    padding: 0 !important;
}

/* File upload fields - create a row wrapper for half-width fields */
.open-application-form .gform_wrapper .gfield--type-fileupload.gfield--width-half {
    display: flex;
    width: calc(50% - 4px) !important;
    vertical-align: top;
    position: relative;
}

.open-application-form .gform_wrapper .gfield--type-fileupload.gfield--width-half:nth-of-type(odd) {
    margin-right: 8px;
}

.open-application-form .gform_wrapper .gfield--type-fileupload.gfield--width-half:nth-of-type(even) {
    margin-left: 0;
}

.open-application-form .gform-theme--foundation .gform-grid-row {
    margin-inline: 0 !important;
}

/* File upload container */
.open-application-form .gform_wrapper .ginput_container_fileupload {
    width: 100%;
    height: 52px;
    padding: 16px 24px;
    background: #F2F2F2;
    border-radius: 0.25rem;
    outline: 1px solid rgba(24, 24, 27, 0.1);
    outline-offset: -1px;
    display: flex;
    justify-content: flex-start;
    align-items: flex-start;
    gap: 8px;
    position: relative;
}

/* File description - positioned absolute, centered vertically, left aligned with inputs */
.open-application-form .gform_wrapper .gfield--type-fileupload .gfield_description {
    position: absolute;
    left: 24px;
    top: 50%;
    transform: translateY(-50%);
    color: #1C1C1C;
    font-size: 14px;
    font-family: 'Inter', sans-serif;
    font-weight: 400;
    line-height: 20px;
    margin: 0;
    pointer-events: none;
    z-index: 1;
    width: auto;
    max-width: calc(100% - 72px); /* Account for padding and icon */
    height: auto;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    transition: color 0.3s ease, font-weight 0.3s ease;
}

/* When file is selected */
.open-application-form .gform_wrapper .gfield--type-fileupload.file-selected .gfield_description {
    color: #1CC866 !important;
    font-weight: 500 !important;
}

.open-application-form .gform_wrapper .gfield--type-fileupload.file-selected .ginput_container_fileupload {
    outline-color: #1CC866 !important;
    background: #f0fdf4 !important;
}

/* Hide other descriptions (non-file upload) */
.open-application-form .gform_wrapper .gfield:not(.gfield--type-fileupload) .gfield_description {
    display: none;
}

/* Hide file upload rules */
.open-application-form .gform_wrapper .gform_fileupload_rules {
    display: none;
}

/* File input - hidden but clickable */
.open-application-form .gform_wrapper input[type="file"] {
    position: absolute;
    opacity: 0;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    cursor: pointer;
}

/* File upload icon - w-6 h-6 with SVG background */
.open-application-form .gform_wrapper .ginput_container_fileupload::after {
    content: '';
    width: 24px;
    height: 24px;
    position: absolute;
    right: 24px;
    top: 50%;
    transform: translateY(-50%);
    flex-shrink: 0;
    background-image: url('data:image/svg+xml;utf8,<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M12 13L12 4M7 14H5C4.44772 14 4 14.4477 4 15V19C4 19.5523 4.44772 20 5 20H19C19.5523 20 20 19.5523 20 19V15C20 14.4477 19.5523 14 19 14H17M16 9L12 14L8 9M17 17H17.01" stroke="%231C1C1C" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/></svg>');
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
}

/* Remove the old inner icon square */

/* Form footer - self-stretch flex justify-end items-start gap-2 */
.open-application-form .gform_wrapper .gform_footer {
    align-self: stretch;
    width: 100%;
    display: flex;
    justify-content: flex-end;
    align-items: flex-start;
    gap: 8px;
    margin: 0;
    padding-top: 24px;
}

/* Submit button - match btn-secondary exactly */
.open-application-form .gform_wrapper .gform_button {
    /* Base button styles */
    padding: 12px 24px !important;
    /* py-3 px-6 */
    background: #1CC866 !important;
    /* bg-secondary-100 */
    border-radius: 50px !important;
    /* rounded-[50px] */
    border: none !important;
    cursor: pointer !important;
    white-space: nowrap !important;

    /* Flexbox */
    display: flex !important;
    justify-content: center !important;
    align-items: center !important;
    overflow: hidden !important;

    /* Transitions */
    transition: background-color 0.3s ease !important;
    /* transition-colors duration-300 */

    /* Typography */
    font-family: 'Inter', sans-serif !important;
    font-size: 14px !important;
    line-height: 20px !important;
    font-weight: 400 !important;
    color: #1C1C1C !important;
}

.open-application-form .gform_wrapper .gform_button:hover {
    background: #CFDDCF !important;
    /* bg-secondary-50 */
}

/* Button text wrapper - h-5 flex flex-col justify-start items-start overflow-hidden */
.open-application-form .gform_wrapper .gform_button .btn-text {
    height: 20px !important;
    /* h-5 */
    display: flex !important;
    flex-direction: column !important;
    justify-content: flex-start !important;
    align-items: flex-start !important;
    overflow: hidden !important;
}

/* Button text inner - flex flex-col justify-center items-center transition-transform duration-300 */
.open-application-form .gform_wrapper .gform_button .btn-text-inner {
    display: flex !important;
    flex-direction: column !important;
    justify-content: center !important;
    align-items: center !important;
    transition: transform 0.3s ease;
    /* transition-transform duration-300 */
}

.open-application-form .gform_wrapper .gform_button:hover .btn-text-inner {
    transform: translateY(-20px);
    /* -translate-y-5 (5 * 4px = 20px) */
}

/* Button label - text-primary-200 text-sm font-normal font-sans leading-5 h-5 flex items-center */
.open-application-form .gform_wrapper .gform_button .btn-label {
    color: #1C1C1C !important;
    /* text color */
    font-size: 14px;
    /* text-sm */
    font-family: 'Inter', sans-serif;
    /* font-sans */
    font-weight: 400;
    /* font-normal */
    line-height: 20px;
    /* leading-5 */
    height: 20px;
    /* h-5 */
    display: flex;
    align-items: center;
}

/* Hide labels */
.open-application-form .gform_wrapper .gfield_label,
.open-application-form .gform_wrapper .hidden_label .gfield_label {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border-width: 0;
}

/* Hide sub labels */
.open-application-form .gform_wrapper .gform-field-label--type-sub {
    display: none;
}

/* Focus states */
.open-application-form .gform_wrapper input[type="text"]:focus,
.open-application-form .gform_wrapper input[type="email"]:focus,
.open-application-form .gform_wrapper input[type="tel"]:focus {
    outline: none;
}

.open-application-form .gform_wrapper .ginput_container:focus-within,
.open-application-form .gform_wrapper .ginput_container_fileupload:focus-within {
    outline: 1px solid rgba(24, 24, 27, 0.1);
}

/* Validation errors */
.open-application-form .gform_wrapper .gfield_error .ginput_container {
    outline-color: #ef4444;
}

.open-application-form .gform_wrapper .validation_message {
    color: #ef4444;
    font-size: 12px;
    margin-top: 4px;
}