/* ============================================================
   Open Roads Inquiry Form — modern rounded styling
   Paste into:  WordPress Admin → Appearance → Customize →
                Additional CSS   (or your theme's custom CSS)
   Scoped to the form via the "or-modern-form" CSS class,
   so it won't affect other Gravity Forms on your site.
   ------------------------------------------------------------
   Tweak the variables below to fine-tune the look.
   ============================================================ */

.or-modern-form {
    --or-radius: 8px;           /* corner rounding — small, squared-off (not pill) */
    --or-accent: #2c7a7b;       /* primary / focus / button colour  */
    --or-accent-dark: #236566;  /* button hover                     */
    --or-border: #d8dee6;       /* default input border             */
    --or-text: #2a3340;         /* label + input text               */
    --or-bg: #ffffff;           /* input background                 */
    --or-focus-ring: rgba(44, 122, 123, 0.15);
}

/* ---- Inputs, selects, textareas ---------------------------- */
.or-modern-form .gfield input[type="text"],
.or-modern-form .gfield input[type="email"],
.or-modern-form .gfield input[type="tel"],
.or-modern-form .gfield input[type="number"],
.or-modern-form .gfield input[type="date"],
.or-modern-form .gfield select,
.or-modern-form .gfield textarea {
    border: 1px solid var(--or-border) !important;
    border-radius: var(--or-radius) !important;
    padding: 12px 16px !important;
    color: var(--or-text);
    background: var(--or-bg);
    font-size: 16px;
    line-height: 1.4;
    box-shadow: none !important;
    transition: border-color .18s ease, box-shadow .18s ease;
    width: 100%;
}

.or-modern-form .gfield textarea {
    min-height: 120px;
    border-radius: var(--or-radius) !important;
}

/* ---- Compact half-size "Add Note" + "please specify" boxes -- */
/* These fields are set to half width in the form layout; this    */
/* keeps them visually lighter and shorter than a full answer.    */
.or-modern-form .gfield.or-note textarea {
    min-height: 60px !important;
}
.or-modern-form .gfield.or-note .gfield_label,
.or-modern-form .gfield.or-specify .gfield_label {
    font-weight: 500;
    font-size: 14px;
    opacity: .85;
}

/* ---- Focus state ------------------------------------------- */
.or-modern-form .gfield input:focus,
.or-modern-form .gfield select:focus,
.or-modern-form .gfield textarea:focus {
    border-color: var(--or-accent) !important;
    box-shadow: 0 0 0 4px var(--or-focus-ring) !important;
    outline: none !important;
}

/* ---- Labels ------------------------------------------------ */
.or-modern-form .gfield_label,
.or-modern-form legend.gfield_label {
    color: var(--or-text);
    font-weight: 600;
    margin-bottom: 6px;
    letter-spacing: .1px;
}

.or-modern-form .gfield_required {
    color: var(--or-accent);
}

/* ---- Comfortable spacing between fields -------------------- */
.or-modern-form .gform_fields {
    row-gap: 22px;
}

/* ---- Checkboxes & radios ----------------------------------- */
.or-modern-form .gfield_checkbox label,
.or-modern-form .gfield_radio label {
    color: var(--or-text);
}
.or-modern-form .gfield_checkbox input,
.or-modern-form .gfield_radio input {
    accent-color: var(--or-accent);
    width: 18px;
    height: 18px;
}

/* ---- Submit button ----------------------------------------- */
.or-modern-form .gform_button,
.or-modern-form input[type="submit"] {
    background: var(--or-accent) !important;
    color: #fff !important;
    border: none !important;
    border-radius: var(--or-radius) !important;
    padding: 13px 34px !important;
    font-size: 16px;
    font-weight: 600;
    cursor: pointer;
    transition: background .18s ease, transform .05s ease;
}
.or-modern-form .gform_button:hover,
.or-modern-form input[type="submit"]:hover {
    background: var(--or-accent-dark) !important;
}
.or-modern-form .gform_button:active,
.or-modern-form input[type="submit"]:active {
    transform: translateY(1px);
}

/* ---- The DOB / Phone / Email row spacing ------------------- */
/* Gravity Forms' grid already places these three side by side; */
/* this just keeps a clean gutter and stacks them on mobile.    */
.or-modern-form .gform_fields {
    column-gap: 18px;
}
@media (max-width: 640px) {
    .or-modern-form .gfield {
        grid-column: 1 / -1 !important; /* full width on small screens */
    }
}