/*
 * Gravity Forms on the migrated LiteGear pages.
 *
 * The forms themselves were ported into Kino Flo's Gravity Forms, so they inherit Kino Flo's form
 * styling — pill-shaped inputs, a yellow rounded submit, muted grey labels. On these pages that is
 * wrong: the surrounding design is LiteGear's, the section behind the form is black, and Kino Flo's
 * grey-on-black labels are close to unreadable.
 *
 * Every value below is MEASURED from litegear.ddev.site rather than guessed:
 *   .gform_title      #fff, 500 25.6px
 *   .gfield_label     #f1f1f1, 700 16px, uppercase, 1px bottom rule
 *   .gfield_required  #c02b0a, 700 13px, uppercase
 *   sub-labels        #fff, 700 15px
 *   inputs            #fff bg, #333 text, 1px #ddd, square, 8px padding
 *   submit            #afafaf bg, #fff text, 700 15.5px, uppercase, square
 *
 * Scoped to the migrated wrappers so Kino Flo's own forms keep Kino Flo's styling. The doubled
 * class raises specificity over the theme's own form rules, which load later.
 *
 * SPECIFICITY: every selector is prefixed #tm-main. YOOtheme emits its own form styling as an
 * INLINE <style> block using `#tm-main .gform_button` and `.gform_wrapper form .gform_body input`,
 * which loads after every stylesheet and carries an ID. A class-only rule here loses to it — the
 * inputs stayed 30px pills and the submit stayed Kino Flo yellow. Matching the ID beats it without
 * resorting to !important, which would then have to be undone by anything layering on top later.
 */

#tm-main .lg-flatsome .gform_wrapper .gform_title,
#tm-main .lg-litetile .gform_wrapper .gform_title {
	color: #fff;
	font-weight: 500;
	font-size: 25.6px;
	text-transform: none;
	margin-bottom: 0.6em;
}

#tm-main .lg-flatsome .gform_wrapper .gfield_label,
#tm-main .lg-litetile .gform_wrapper .gfield_label {
	color: #f1f1f1;
	font-weight: 700;
	font-size: 16px;
	text-transform: uppercase;
	border-bottom: 1px solid #f1f1f1;
	display: block;
	width: 100%;
	padding-bottom: 4px;
	margin-bottom: 8px;
}

#tm-main .lg-flatsome .gform_wrapper .gfield_required,
#tm-main .lg-litetile .gform_wrapper .gfield_required {
	color: #c02b0a;
	font-weight: 700;
	font-size: 13px;
	text-transform: uppercase;
	font-style: italic;
	padding-left: 2px;
	border: 0;
}

/* Sub-labels: First / Last / Enter Email / Confirm Email. */
#tm-main .lg-flatsome .gform_wrapper .ginput_complex label,
#tm-main .lg-litetile .gform_wrapper .ginput_complex label,
#tm-main .lg-flatsome .gform_wrapper .gform_fileupload_rules,
#tm-main .lg-litetile .gform_wrapper .gform_fileupload_rules {
	color: #fff;
	font-weight: 700;
	font-size: 15px;
	text-transform: none;
	border: 0;
	padding: 5px 0 0;
}

#tm-main .lg-flatsome .gform_wrapper :is(input[type="text"],
#tm-main input[type="email"],
#tm-main input[type="tel"],
#tm-main input[type="url"],
#tm-main input[type="number"],
#tm-main input[type="date"],
#tm-main select,
#tm-main textarea),
#tm-main .lg-litetile .gform_wrapper :is(input[type="text"],
#tm-main input[type="email"],
#tm-main input[type="tel"],
#tm-main input[type="url"],
#tm-main input[type="number"],
#tm-main input[type="date"],
#tm-main select,
#tm-main textarea) {
	background: #fff;
	color: #333;
	font-weight: 500;
	font-size: 15px;
	border: 1px solid #ddd;
	border-radius: 0;
	padding: 8px;
	box-shadow: none;
	height: auto;
}

#tm-main .lg-flatsome .gform_wrapper :is(input[type="submit"],
#tm-main button[type="submit"]),
#tm-main .lg-litetile .gform_wrapper :is(input[type="submit"],
#tm-main button[type="submit"]) {
	background: #afafaf;
	color: #fff;
	font-weight: 700;
	font-size: 15.5px;
	text-transform: uppercase;
	border: 1px solid rgba(0, 0, 0, 0.05);
	border-radius: 0;
	padding: 10px 18px;
	letter-spacing: 0;
}

#tm-main .lg-flatsome .gform_wrapper :is(input[type="submit"],
#tm-main button[type="submit"]):hover,
#tm-main .lg-litetile .gform_wrapper :is(input[type="submit"],
#tm-main button[type="submit"]):hover {
	background: #9a9a9a;
	color: #fff;
}

/* Validation text has to stay legible on the black section it sits on. */
#tm-main .lg-flatsome .gform_wrapper :is(.gfield_description,
#tm-main .validation_message,
#tm-main .gform_validation_errors),
#tm-main .lg-litetile .gform_wrapper :is(.gfield_description,
#tm-main .validation_message,
#tm-main .gform_validation_errors) {
	color: #f1f1f1;
}


/* ============================================================================================
 * PRODUCT REGISTRATION — /registration/
 *
 * The form sits on a black section. It arrived carrying inline CSS written against LiteGear's form
 * ids (#gform_submit_button_1, #gform_1, #field_4_2) which has matched nothing since the migration,
 * so it rendered as unstyled Gravity Forms default: fourteen full-width rows of harsh white boxes,
 * uppercase micro-labels, 2,600px tall.
 *
 * Rebuilt from what ARRI, Creamsource and NanLux actually do, measured rather than eyeballed:
 *   - fields ~55px tall, 16px text, generous padding (all three)
 *   - labels sentence case at weight 400-600, NOT the theme's uppercase micro-type
 *   - transparent/low-contrast inputs with a visible border, not filled white slabs
 *   - product checkboxes in a GRID, not a stack — ARRI runs four across
 *
 * Scoped to body.lg-page-registration (see lg_microsite_body_class) so it cannot leak into the
 * contact or repair forms, and id-agnostic so it survives a re-import on any install.
 * ============================================================================================ */

body.lg-page-registration .gform_wrapper {
    max-width: 1080px;
    margin-left: auto;
    margin-right: auto;
    padding: 0 15px;
    box-sizing: border-box;
    /* GF 2.10 paints from these, not from plain declarations. */
    --gf-ctrl-btn-bg-color-primary: #ffdd00;
    --gf-ctrl-btn-bg-color-hover-primary: #ffe633;
    --gf-ctrl-btn-color-primary: #111;
    --gf-ctrl-btn-radius: 100px;
    --gf-ctrl-textarea-height: 150px;
}

/* ---- labels ---------------------------------------------------------------------------- */
/* The theme uppercases every form label at 11px, which on a fourteen-field form reads as noise.
   None of the three competitors uppercase theirs. */
body.lg-page-registration .gform_wrapper .gfield_label,
body.lg-page-registration .gform_wrapper legend.gfield_label {
    display: block;
    margin: 0 0 10px;
    font-size: 15px !important;
    font-weight: 600 !important;
    line-height: 1.4;
    letter-spacing: 0;
    text-transform: none !important;
    color: #fff !important;
    border-bottom: none !important;
}
body.lg-page-registration .gform_wrapper .gfield_required {
    color: #ffdd00;
    font-weight: 600;
    margin-left: 4px;
}
body.lg-page-registration .gform_wrapper .gfield_description {
    margin-top: 8px;
    font-size: 13px;
    line-height: 1.5;
    color: #9a9a9a;
}

/* ---- fields ---------------------------------------------------------------------------- */
/* Dark surface, not a white slab. A filled white input on a black section is the single thing that
   made this form look unfinished; NanLux and ARRI both run transparent fields with a border. */
/* Scoped through .gform_fields .gfield deliberately: the theme carries an ID-scoped input rule
   (`#tm-main …`) whose border colour outranks a plain class selector even with !important, and the
   fields kept a #ccc outline no matter what this block declared. The extra two classes win it. */
body.lg-page-registration .gform_wrapper .gform_fields .gfield input[type="text"],
body.lg-page-registration .gform_wrapper .gform_fields .gfield input[type="email"],
body.lg-page-registration .gform_wrapper .gform_fields .gfield input[type="tel"],
body.lg-page-registration .gform_wrapper .gform_fields .gfield input[type="number"],
body.lg-page-registration .gform_wrapper .gform_fields .gfield select,
body.lg-page-registration .gform_wrapper .gform_fields .gfield textarea {
    width: 100% !important;
    max-width: none !important;
    box-sizing: border-box;
    background: #141414 !important;
    border: 1px solid #3a3a3a !important;
    border-radius: 6px !important;
    color: #fff !important;
    font-size: 16px !important;
    line-height: 1.4 !important;
    padding: 15px 16px !important;
    height: auto !important;
    min-height: 54px;
    transition: border-color .15s ease, background-color .15s ease;
}
body.lg-page-registration .gform_wrapper textarea {
    min-height: 150px !important;
    height: 150px !important;
    resize: vertical;
}
body.lg-page-registration .gform_wrapper input::placeholder,
body.lg-page-registration .gform_wrapper textarea::placeholder { color: #6b6b6b; }
body.lg-page-registration .gform_wrapper select { appearance: none; padding-right: 42px !important; }

body.lg-page-registration .gform_wrapper .gform_fields .gfield input:focus,
body.lg-page-registration .gform_wrapper .gform_fields .gfield select:focus,
body.lg-page-registration .gform_wrapper .gform_fields .gfield textarea:focus {
    border-color: #ffdd00 !important;
    background: #1c1c1c !important;
    outline: none !important;
}
/* Validation has to be visible against black — GF's default red on a dark field is unreadable. */
body.lg-page-registration .gform_wrapper .gfield_error input,
body.lg-page-registration .gform_wrapper .gfield_error select,
body.lg-page-registration .gform_wrapper .gfield_error textarea { border-color: #ff6b6b !important; }
body.lg-page-registration .gform_wrapper .gfield_validation_message,
body.lg-page-registration .gform_wrapper .validation_message {
    background: transparent !important;
    border: 0 !important;
    padding: 6px 0 0 !important;
    color: #ff8f8f !important;
    font-size: 13px;
}

/* ---- rhythm and the 12-column grid ------------------------------------------------------ */
/*
 * Gravity Forms writes gfield--width-half onto the field and relies on .gform_fields being a
 * 12-column CSS grid to act on it. Something in the theme's form CSS resets that container to
 * `display: block`, so every field carried the right class and still rendered as its own full-width
 * row — the paired first/last name and city/state did nothing. Re-declare the grid.
 */
body.lg-page-registration .gform_wrapper .gform_fields {
    display: grid !important;
    grid-template-columns: repeat(12, minmax(0, 1fr)) !important;
    row-gap: 26px !important;
    column-gap: 24px !important;
}
body.lg-page-registration .gform_wrapper .gfield { grid-column: span 12; min-width: 0; }
body.lg-page-registration .gform_wrapper .gfield.gfield--width-half { grid-column: span 6; }
body.lg-page-registration .gform_wrapper .gfield.gfield--width-third { grid-column: span 4; }
body.lg-page-registration .gform_wrapper .gfield.gfield--width-quarter { grid-column: span 3; }

/* The datepicker toggle is a 20px <button> that Gravity Forms renders AFTER the input, expecting an
   inline-width field. Ours is width:100%, so the button wrapped onto its own line and read as a
   stray glyph floating under the field. Tuck it back inside, right-aligned. */
body.lg-page-registration .gform_wrapper .ginput_container_date { position: relative; }
body.lg-page-registration .gform_wrapper .ginput_container_date .gform-datepicker-toggle {
    position: absolute;
    top: 17px;
    right: 14px;
    width: 20px;
    height: 20px;
    padding: 0;
    border: 0;
    background: transparent;
    cursor: pointer;
    opacity: .75;
}
body.lg-page-registration .gform_wrapper .ginput_container_date .gform-datepicker-toggle:hover { opacity: 1; }
body.lg-page-registration .gform_wrapper .ginput_container_date input { padding-right: 44px !important; }
body.lg-page-registration .gform_wrapper .ginput_container_date img.ui-datepicker-trigger { display: none; }

/* ---- checkbox groups ------------------------------------------------------------------- */
/* Seven products stacked is seven wasted rows. ARRI runs four across; two columns suits our
   longer names and still collapses cleanly on mobile. */
body.lg-page-registration .gform_wrapper .gfield--type-checkbox .gfield_checkbox {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 10px 24px;
    margin-top: 4px;
}
/* The consent field is a single choice — never grid it. */
body.lg-page-registration .gform_wrapper .gfield--input-type-checkbox:last-of-type .gfield_checkbox,
body.lg-page-registration .gform_wrapper .gfield_checkbox:has(.gchoice:only-child) {
    grid-template-columns: 1fr;
}
body.lg-page-registration .gform_wrapper .gchoice {
    display: flex;
    align-items: center;
    gap: 10px;
    min-height: 24px;
}
body.lg-page-registration .gform_wrapper .gchoice input[type="checkbox"] {
    width: 20px; height: 20px;
    flex: 0 0 20px;
    margin: 0;
    accent-color: #ffdd00;
    cursor: pointer;
}
body.lg-page-registration .gform_wrapper .gchoice label {
    margin: 0;
    font-size: 15px !important;
    font-weight: 400 !important;
    text-transform: none !important;
    color: #fff !important;
    cursor: pointer;
}

/* ---- file upload ----------------------------------------------------------------------- */
/* A dashed dropzone that belongs to the dark form, rather than the light slab the ported CSS drew. */
body.lg-page-registration .ginput_container_fileupload {
    display: block;
    width: 100%;
    padding: 22px;
    border: 2px dashed #3a3a3a;
    border-radius: 6px;
    background: #141414;
}
body.lg-page-registration .ginput_container_fileupload input[type="file"] { color: #cfcfcf; font-size: 14px; }
body.lg-page-registration .ginput_container_fileupload .gform_fileupload_rules,
body.lg-page-registration .gform_wrapper .ginput_container_fileupload .gfield_description {
    display: block;
    margin-top: 10px;
    color: #9a9a9a !important;
    font-size: 13px;
}

/* ---- submit ---------------------------------------------------------------------------- */
/* MATCH ON THE CLASS, NOT THE ELEMENT. Gravity Forms renders the submit as <input type="submit">
   on local and as <button type="submit"> on dev — same plugin version, different markup — so an
   element-based selector styled one install and left the other grey.
   !important is unavoidable: the theme's own `#tm-main .gform_button` is ID-scoped and outranks
   anything this stylesheet can write. */
body.lg-page-registration .gform_wrapper .gform_footer { margin-top: 8px; padding: 0; }
body.lg-page-registration .gform_wrapper .gform_footer .gform_button {
    background-color: #ffdd00 !important;
    background-image: none !important;
    color: #111 !important;
    border: 0 !important;
    border-radius: 100px !important;
    padding: 16px 48px !important;
    font-size: 15px !important;
    font-weight: 700 !important;
    line-height: normal !important;
    height: auto !important;
    letter-spacing: .02em;
    cursor: pointer;
    transition: background-color .15s ease;
}
body.lg-page-registration .gform_wrapper .gform_footer .gform_button:hover {
    background-color: #ffe633 !important;
}

body.lg-page-registration .gform_confirmation_message {
    max-width: 1080px;
    margin: 0 auto;
    padding: 40px 15px 0;
    font-size: 20px;
    line-height: 1.5;
    text-align: center;
    color: #fff;
}

/* ---- mobile ---------------------------------------------------------------------------- */
/* The ported rules put margin-left/right on .gform_body and the submit — a gutter for a form that
   had no container of its own. Ours has one, and the extra margin only pushed the button out of
   line with every input above it. */
@media only screen and (max-width: 768px) {
    /* Everything goes single column; a 6-span field on a phone is a 150px input. */
    body.lg-page-registration .gform_wrapper .gfield.gfield--width-half,
    body.lg-page-registration .gform_wrapper .gfield.gfield--width-third,
    body.lg-page-registration .gform_wrapper .gfield.gfield--width-quarter { grid-column: span 12; }
    body.lg-page-registration .gform_wrapper .gfield--type-checkbox .gfield_checkbox {
        grid-template-columns: 1fr;
    }
    body.lg-page-registration .gform_wrapper .gform_fields { row-gap: 20px !important; }
    body.lg-page-registration .gform_wrapper .gfield_label { font-size: 14px !important; }
    body.lg-page-registration .gform_wrapper .gform_footer .gform_button { width: 100%; }
}