/**
 * Gravity Forms Styler — frontend layout styles
 *
 * Label layout modes (inline / floating / hidden) and the custom select caret.
 * Per-widget values arrive as CSS custom properties on the wrapper:
 *   --ee-gf-label-width   inline label column width
 *   --ee-gf-select-arrow  custom dropdown caret colour
 *
 * @since 2.3.5
 */

/* ------------------------------------------------------------------ *
 * Inline labels — label sits to the left of the input on one row
 * ------------------------------------------------------------------ */
.ee-gf-labels-inline .gform_wrapper .gfield {
    display: flex;
    align-items: flex-start;
    gap: 12px;
}

.ee-gf-labels-inline .gform_wrapper .gfield > .gfield_label {
    flex: 0 0 var( --ee-gf-label-width, 160px );
    max-width: var( --ee-gf-label-width, 160px );
    margin: 0;
    padding-top: 8px;
}

.ee-gf-labels-inline .gform_wrapper .gfield > .ginput_container,
.ee-gf-labels-inline .gform_wrapper .gfield > .gfield_description {
    flex: 1 1 auto;
    min-width: 0;
}

/* ================================================================== *
 * Floating labels
 *
 * The label rests where the value goes (like a placeholder) and floats to
 * the top of the field on focus / when filled. Uses a Material-style
 * underline field: transparent background, bottom border only. The input's
 * vertical padding is fixed so the label positions are predictable across
 * themes. Works for simple inputs, textareas, selects and the sub-labels of
 * complex fields (name, address).
 * ================================================================== */

/* Underline field style — transparent, bottom border only, fixed padding.
   Field border COLOUR still comes from the widget's own border-color control. */
.ee-gf-labels-floating .gform_wrapper input:not([type="submit"]):not([type="button"]):not([type="radio"]):not([type="checkbox"]):not([type="file"]),
.ee-gf-labels-floating .gform_wrapper textarea,
.ee-gf-labels-floating .gform_wrapper select {
    background-color: transparent !important;
    border-width: 0 0 1px 0 !important;
    border-style: solid !important;
    border-radius: 0 !important;
    box-shadow: none !important;
    padding: 18px 0 6px 0 !important;
}

/* Positioning context — simple fields and each complex sub-field cell */
.ee-gf-labels-floating .gform_wrapper .gfield:has(> .ginput_container > input),
.ee-gf-labels-floating .gform_wrapper .gfield:has(> .ginput_container > textarea),
.ee-gf-labels-floating .gform_wrapper .gfield:has(> .ginput_container > select),
.ee-gf-labels-floating .gform_wrapper .ginput_complex > span,
.ee-gf-labels-floating .gform_wrapper .ginput_container_name > span {
    position: relative;
}

/* Resting position — over the input's value area (top-aligned, matches the
   fixed 18px input padding so it works for tall textareas too). */
.ee-gf-labels-floating .gform_wrapper .gfield:has(> .ginput_container > input) > .gfield_label,
.ee-gf-labels-floating .gform_wrapper .gfield:has(> .ginput_container > textarea) > .gfield_label,
.ee-gf-labels-floating .gform_wrapper .gfield:has(> .ginput_container > select) > .gfield_label,
.ee-gf-labels-floating .gform_wrapper .gfield > .ee-gf-float-label,
.ee-gf-labels-floating .gform_wrapper .ginput_complex > span > .gform-field-label--type-sub,
.ee-gf-labels-floating .gform_wrapper .ginput_container_name > span > .gform-field-label--type-sub {
    position: absolute;
    left: 0;
    top: 18px;
    margin: 0;
    padding: 0;
    max-width: 100%;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
    background: transparent;
    transform-origin: left top;
    transition: top .15s ease, transform .15s ease, color .15s ease;
    pointer-events: none;
    z-index: 1;
}

/* Floated position — pulled up to the top of the field, smaller. */
.ee-gf-labels-floating .gform_wrapper .gfield:has(> .ginput_container > input).ee-gf-filled > .gfield_label,
.ee-gf-labels-floating .gform_wrapper .gfield:has(> .ginput_container > input):focus-within > .gfield_label,
.ee-gf-labels-floating .gform_wrapper .gfield:has(> .ginput_container > textarea).ee-gf-filled > .gfield_label,
.ee-gf-labels-floating .gform_wrapper .gfield:has(> .ginput_container > textarea):focus-within > .gfield_label,
.ee-gf-labels-floating .gform_wrapper .gfield:has(> .ginput_container > select).ee-gf-filled > .gfield_label,
.ee-gf-labels-floating .gform_wrapper .gfield:has(> .ginput_container > select):focus-within > .gfield_label,
.ee-gf-labels-floating .gform_wrapper .gfield.ee-gf-filled > .ee-gf-float-label,
.ee-gf-labels-floating .gform_wrapper .gfield:focus-within > .ee-gf-float-label,
.ee-gf-labels-floating .gform_wrapper .ginput_complex > span.ee-gf-filled > .gform-field-label--type-sub,
.ee-gf-labels-floating .gform_wrapper .ginput_complex > span:focus-within > .gform-field-label--type-sub,
.ee-gf-labels-floating .gform_wrapper .ginput_container_name > span.ee-gf-filled > .gform-field-label--type-sub,
.ee-gf-labels-floating .gform_wrapper .ginput_container_name > span:focus-within > .gform-field-label--type-sub {
    top: 1px;
    transform: scale( .78 );
}

/* Sub-labels: make First/Last-name etc. read like the main labels. Main labels
   get their weight/size from GF's `.gform_wrapper.gravity-theme .gfield_label`
   (16px/700 — a class sub-labels don't have) and their colour from the primary
   label token; sub-labels otherwise fall back to GF's dimmer/smaller "tertiary"
   styling. Match both here. (The widget's Label Color/Typography controls still
   override when set.) */
.ee-gf-labels-floating .gform_wrapper .gform-field-label--type-sub {
    /* weight + size are GF's hardcoded .gfield_label values (16px/700); the rest
       are the PRIMARY label tokens (sub-labels default to the dimmer tertiary
       ones — line-height especially was still throwing them off). !important so a
       leftover Sub-label Typography control value can't shrink them below the mains. */
    color: var( --gf-ctrl-label-color-primary ) !important;
    font-family: var( --gf-ctrl-label-font-family-primary ) !important;
    font-size: 16px !important;
    font-style: var( --gf-ctrl-label-font-style-primary ) !important;
    font-weight: 700 !important;
    line-height: var( --gf-ctrl-label-line-height-primary ) !important;
    letter-spacing: var( --gf-ctrl-label-letter-spacing-primary ) !important;
    text-transform: inherit;
    opacity: 1;
}

/* Sub-label resting position. The name/complex fields put the input directly in
   the grid cell (no .ginput_container wrapper like simple fields have), so the
   shared top:18px lands the label higher above the line than the main labels.
   Nudge it down so the gap above the underline matches. */
.ee-gf-labels-floating .gform_wrapper .ginput_complex > span > .gform-field-label--type-sub,
.ee-gf-labels-floating .gform_wrapper .ginput_container_name > span > .gform-field-label--type-sub {
    top: 26px;
}

/* Complex fields (name/address): hide the redundant main label — the sub-labels
   carry the field now. (GF usually hides it already via `hidden_label`.) */
.ee-gf-labels-floating .gform_wrapper .gfield:has(.ginput_container_name) > .gfield_label,
.ee-gf-labels-floating .gform_wrapper .gfield:has(.ginput_complex) > .gfield_label {
    position: absolute !important;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect( 0, 0, 0, 0 );
    white-space: nowrap;
    border: 0;
}

/* Placeholder source: hide the real label (kept for screen readers) on fields
   that received a generated placeholder span */
.ee-gf-labels-floating .gform_wrapper .gfield.ee-gf-has-float-ph > .gfield_label {
    position: absolute !important;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect( 0, 0, 0, 0 );
    white-space: nowrap;
    border: 0;
}

/* ------------------------------------------------------------------ *
 * Hidden labels — accessible (kept for screen readers)
 * ------------------------------------------------------------------ */
.ee-gf-labels-hidden .gform_wrapper .gfield_label {
    position: absolute !important;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect( 0, 0, 0, 0 );
    white-space: nowrap;
    border: 0;
}

/* ------------------------------------------------------------------ *
 * Custom select caret (enabled via the "Custom Dropdown Arrow" control,
 * which adds .ee-gf-custom-select and the arrow colour var)
 * ------------------------------------------------------------------ */
.ee-gf-custom-select .gform_wrapper .ginput_container_select {
    position: relative;
}

.ee-gf-custom-select .gform_wrapper .ginput_container_select select {
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    padding-right: 34px;
}

.ee-gf-custom-select .gform_wrapper .ginput_container_select::after {
    content: "";
    position: absolute;
    top: 50%;
    right: 14px;
    width: 0;
    height: 0;
    margin-top: -3px;
    border-left: 5px solid transparent;
    border-right: 5px solid transparent;
    border-top: 6px solid var( --ee-gf-select-arrow, #666 );
    pointer-events: none;
}

/* ------------------------------------------------------------------ *
 * Auto-grow textareas (JS sets the height; keep it from scrolling/resizing)
 * ------------------------------------------------------------------ */
.ee-gf-textarea-autogrow .gform_wrapper textarea {
    overflow-y: hidden;
    resize: none;
    min-height: 0;
}

/* ------------------------------------------------------------------ *
 * Full-width submit button
 * ------------------------------------------------------------------ */
.ee-gf-submit-full .gform_wrapper .gform_footer input[type="submit"],
.ee-gf-submit-full .gform_wrapper .gform_footer button,
.ee-gf-submit-full .gform_wrapper .gform-footer input[type="submit"],
.ee-gf-submit-full .gform_wrapper .gform-footer button {
    width: 100%;
}