/*!
 * vriddle-form.css — polish layer for Gravity-Forms-replacement fragments.
 * Deploy target: https://maker.vriddle.com/css/vriddle-form.css
 *
 * The generated HTML reuses Gravity Forms' class names (.gform_wrapper, .gfield,
 * .ginput_container, .gfield_label, .gfield_required, .gform_button) so the site's
 * existing GF stylesheet does most of the work. These rules fill the gaps:
 *   - widget spacing/rhythm to match GF default
 *   - upload-widget (.slim) empty state that matches Slim's "Drop your image here" UX
 *   - preview image inside the upload widget
 *   - character counter under each [maxlength] input
 *   - submit button sizing
 *   - focus states so the form feels responsive
 */

.gform_wrapper.vriddle-form { margin: 0 0 1.5em 0; }

.gform_wrapper.vriddle-form .gform_fields {
    list-style: none;
    padding: 0;
    margin: 0;
}

.gform_wrapper.vriddle-form .gfield {
    margin: 0 0 12px 0;
    padding: 0;
}

.gform_wrapper.vriddle-form .gfield_visibility_administrative { display: none; }

.gform_wrapper.vriddle-form .gfield_label {
    display: block;
    font-size: 13px;
    color: #333;
    margin: 0 0 4px 0;
    font-weight: 600;
}
.gform_wrapper.vriddle-form .gfield_required {
    color: #c00;
    margin-left: 3px;
}

.gform_wrapper.vriddle-form .ginput_container input[type="text"],
.gform_wrapper.vriddle-form .ginput_container input[type="email"],
.gform_wrapper.vriddle-form .ginput_container input[type="tel"],
.gform_wrapper.vriddle-form .ginput_container input[type="date"],
.gform_wrapper.vriddle-form .ginput_container textarea {
    width: 100%;
    box-sizing: border-box;
    padding: 8px 10px;
    font-size: 14px;
    font-family: inherit;
    color: #222;
    background: #fff;
    border: 1px solid #ccc;
    border-radius: 3px;
    line-height: 1.4;
    transition: border-color 0.15s;
}
.gform_wrapper.vriddle-form .ginput_container input:focus,
.gform_wrapper.vriddle-form .ginput_container textarea:focus {
    border-color: #0073aa;
    outline: none;
    box-shadow: 0 0 0 1px rgba(0, 115, 170, 0.25);
}
.gform_wrapper.vriddle-form .ginput_container textarea {
    min-height: 70px;
    resize: vertical;
}

/* Character counter */
.gform_wrapper.vriddle-form .vf-counter,
.gform_wrapper.vriddle-form .ginput_counter {
    font-size: 11px;
    color: #888;
    margin-top: 2px;
    text-align: left;
}

/* Radio group */
.gform_wrapper.vriddle-form .gfield_radio {
    list-style: none;
    padding: 0;
    margin: 0;
}
.gform_wrapper.vriddle-form .gfield_radio > li {
    margin: 0 0 4px 0;
}
.gform_wrapper.vriddle-form .gfield_radio label {
    font-weight: normal;
    margin-left: 6px;
    cursor: pointer;
    font-size: 14px;
}

/* Slim/upload widget empty state — matches Slim's "Drop your image here" box.
   `aspect-ratio` is set inline from JS based on data-ratio so the empty state and
   the cropped preview share the same footprint. A conservative min-height and
   aspect-ratio fallback here cover browsers that don't support the inline value. */
.gform_wrapper.vriddle-form .ginput_container_slim .slim {
    display: block;
    width: 100%;
    aspect-ratio: 1 / 1;           /* JS overrides via inline style per field */
    min-height: 120px;
    max-height: 420px;             /* keeps very tall ratios sane */
    background: #f4f6f7;
    border: 1px dashed #ccc;
    border-radius: 4px;
    position: relative;
    overflow: hidden;
    transition: border-color 0.15s, background 0.15s;
}
.gform_wrapper.vriddle-form .ginput_container_slim .slim:hover {
    border-color: #0073aa;
    background: #eef5fb;
}
.gform_wrapper.vriddle-form .ginput_container_slim .slim .vf-label {
    position: absolute;
    top: 50%;
    left: 0;
    right: 0;
    transform: translateY(-50%);
    text-align: center;
    color: #666;
    font-size: 14px;
    pointer-events: none;
}
.gform_wrapper.vriddle-form .ginput_container_slim .slim input[type="file"] {
    position: absolute;
    width: 1px;
    height: 1px;
    opacity: 0;
    pointer-events: none;
}
/* Preview after crop: fills the already-shaped box perfectly since the crop ratio
   == the box's aspect-ratio. `display: block` is set via JS in onSave. */
.gform_wrapper.vriddle-form .ginput_container_slim .slim .vf-preview {
    display: none;
    width: 100%;
    height: 100%;
    object-fit: contain;
    background: #fff;
}
.gform_wrapper.vriddle-form .ginput_container_slim .slim.vf-has-image {
    border-style: solid;
    border-color: #ddd;
    background: #fff;
}

/* Submit button */
.gform_wrapper.vriddle-form .gform_footer {
    margin-top: 16px;
}
.gform_wrapper.vriddle-form .gform_button {
    background: #eb5c1d;
    color: #fff;
    border: 0;
    padding: 10px 26px;
    font-size: 14px;
    font-weight: 600;
    letter-spacing: 0.5px;
    text-transform: uppercase;
    cursor: pointer;
    border-radius: 3px;
    transition: background 0.15s;
}
.gform_wrapper.vriddle-form .gform_button:hover {
    background: #d14b10;
}

/* Conditionally-hidden fields — safety net in case inline style is stripped */
.gform_wrapper.vriddle-form .gfield[data-vf-rule][style*="display: none"] { display: none !important; }