/* =========================================================
   RAY CANALES INSURANCE
   EmailMeForm Custom Stylesheet
   ========================================================= */

/* ---------- GLOBAL FORM ---------- */

body,
#emf-container,
.emf-container {
    font-family: Arial, Helvetica, sans-serif !important;
    color: #1f2937 !important;
}

#emf-container,
.emf-container {
    max-width: 850px !important;
    margin: 0 auto !important;
    padding: 30px !important;
    background: #ffffff !important;
    border-radius: 14px !important;
    box-shadow: 0 8px 28px rgba(0, 0, 0, 0.08) !important;
    box-sizing: border-box !important;
}


/* ---------- FORM TITLE ---------- */

.emf-form-title,
#emf-container h1,
#emf-container h2,
.emf-container h1,
.emf-container h2 {
    color: #17365d !important;
    font-size: clamp(26px, 4vw, 38px) !important;
    font-weight: 700 !important;
    line-height: 1.15 !important;
    margin-bottom: 10px !important;
}


/* ---------- DESCRIPTION / INTRO ---------- */

.emf-form-description,
.emf-description,
#emf-container p {
    color: #5d6672 !important;
    font-size: 16px !important;
    line-height: 1.6 !important;
}


/* ---------- FIELD WRAPPERS ---------- */

.emf-div-field,
.emf-field {
    margin-bottom: 20px !important;
}


/* ---------- LABELS ---------- */

.emf-label-desc,
.emf-label,
label {
    display: block !important;
    color: #17365d !important;
    font-size: 15px !important;
    font-weight: 700 !important;
    margin-bottom: 7px !important;
    line-height: 1.35 !important;
}


/* ---------- REQUIRED ASTERISK ---------- */

.emf-required {
    color: #c92a2a !important;
}


/* ---------- TEXT FIELDS ---------- */

input[type="text"],
input[type="email"],
input[type="tel"],
input[type="number"],
input[type="date"],
input[type="url"],
input[type="password"],
select,
textarea {
    width: 100% !important;
    min-height: 48px !important;
    padding: 12px 14px !important;
    box-sizing: border-box !important;

    background: #ffffff !important;
    color: #202833 !important;

    border: 1px solid #cfd6df !important;
    border-radius: 8px !important;

    font-family: Arial, Helvetica, sans-serif !important;
    font-size: 16px !important;

    outline: none !important;

    transition:
        border-color 0.2s ease,
        box-shadow 0.2s ease,
        background-color 0.2s ease !important;
}


/* ---------- TEXTAREA ---------- */

textarea {
    min-height: 130px !important;
    resize: vertical !important;
}


/* ---------- FIELD FOCUS ---------- */

input[type="text"]:focus,
input[type="email"]:focus,
input[type="tel"]:focus,
input[type="number"]:focus,
input[type="date"]:focus,
input[type="url"]:focus,
input[type="password"]:focus,
select:focus,
textarea:focus {
    border-color: #17365d !important;
    box-shadow: 0 0 0 3px rgba(23, 54, 93, 0.12) !important;
    background: #ffffff !important;
}


/* ---------- PLACEHOLDER TEXT ---------- */

::placeholder {
    color: #929aa5 !important;
    opacity: 1 !important;
}


/* ---------- DROPDOWNS ---------- */

select {
    cursor: pointer !important;
    appearance: auto !important;
}


/* ---------- CHECKBOXES + RADIO BUTTONS ---------- */

input[type="checkbox"],
input[type="radio"] {
    width: 18px !important;
    height: 18px !important;
    margin-right: 8px !important;
    accent-color: #17365d !important;
    vertical-align: middle !important;
}

.emf-checkbox-label,
.emf-radio-label {
    font-weight: 400 !important;
    color: #333b45 !important;
    line-height: 1.5 !important;
}


/* ---------- HELP / INSTRUCTION TEXT ---------- */

.emf-helptext,
.emf-field-help,
.emf-description {
    color: #707984 !important;
    font-size: 13px !important;
    line-height: 1.5 !important;
    margin-top: 5px !important;
}


/* ---------- SECTION HEADERS ---------- */

.emf-section-header,
.emf-div-field-section,
fieldset legend {
    color: #17365d !important;
    font-size: 21px !important;
    font-weight: 700 !important;

    padding-bottom: 8px !important;
    margin-top: 18px !important;
    margin-bottom: 18px !important;

    border-bottom: 2px solid #d8b56b !important;
}


/* ---------- HORIZONTAL RULE ---------- */

hr {
    border: 0 !important;
    border-top: 1px solid #e2e6eb !important;
    margin: 25px 0 !important;
}


/* =========================================================
   SUBMIT BUTTON
   ========================================================= */

input[type="submit"],
button[type="submit"],
.emf-submit-button,
.emf-button {
    display: inline-block !important;

    min-height: 50px !important;
    padding: 14px 30px !important;

    background: #17365d !important;
    color: #ffffff !important;

    border: none !important;
    border-radius: 7px !important;

    font-family: Arial, Helvetica, sans-serif !important;
    font-size: 16px !important;
    font-weight: 700 !important;

    text-transform: none !important;
    letter-spacing: 0.2px !important;

    cursor: pointer !important;

    box-shadow: 0 5px 15px rgba(23, 54, 93, 0.20) !important;

    transition:
        background-color 0.2s ease,
        transform 0.2s ease,
        box-shadow 0.2s ease !important;
}


/* ---------- SUBMIT BUTTON HOVER ---------- */

input[type="submit"]:hover,
button[type="submit"]:hover,
.emf-submit-button:hover,
.emf-button:hover {
    background: #d8b56b !important;
    color: #17365d !important;

    transform: translateY(-1px) !important;

    box-shadow: 0 7px 18px rgba(0, 0, 0, 0.18) !important;
}


/* ---------- SUBMIT BUTTON ACTIVE ---------- */

input[type="submit"]:active,
button[type="submit"]:active,
.emf-submit-button:active,
.emf-button:active {
    transform: translateY(0) !important;
}


/* =========================================================
   ERRORS / VALIDATION
   ========================================================= */

.emf-error,
.emf-error-message,
.error {
    color: #b42318 !important;
    font-size: 13px !important;
    font-weight: 600 !important;
}

input.error,
select.error,
textarea.error {
    border-color: #b42318 !important;
    background: #fff8f7 !important;
}


/* =========================================================
   TWO-COLUMN FIELD SUPPORT
   ========================================================= */

.emf-row {
    display: flex !important;
    gap: 18px !important;
}

.emf-row > * {
    flex: 1 !important;
}


/* =========================================================
   MOBILE RESPONSIVE
   ========================================================= */

@media screen and (max-width: 768px) {

    #emf-container,
    .emf-container {
        padding: 22px 18px !important;
        border-radius: 10px !important;
        box-shadow: none !important;
    }

    .emf-row {
        display: block !important;
    }

    input[type="text"],
    input[type="email"],
    input[type="tel"],
    input[type="number"],
    input[type="date"],
    input[type="url"],
    input[type="password"],
    select,
    textarea {
        font-size: 16px !important;
    }

    input[type="submit"],
    button[type="submit"],
    .emf-submit-button,
    .emf-button {
        width: 100% !important;
        display: block !important;
    }
}


/* =========================================================
   VERY SMALL SCREENS
   ========================================================= */

@media screen and (max-width: 480px) {

    #emf-container,
    .emf-container {
        padding: 18px 14px !important;
    }

    .emf-form-title,
    #emf-container h1,
    #emf-container h2 {
        font-size: 27px !important;
    }

}