/* Contact Form Styles - Conectado con formulario HTML existente */

:root {
    --bg: #101010;
    /* Darker background for better contrast */
    --panel: #111;
    --border: #3a3a3a;
    --border-focus: #1866d8;
    /* Blue focus */
    --text: #ffffff;
    --muted: #1866d8;
    /* Blue muted text */
    --accent: #f5b16a;
    /* Orange accent */
    --error: #f5b16a;
    /* Orange error */
    --secondary-accent: #db9e5f;
    /* Darker orange secondary */

    /* Independent Color Defaults */
    --btn-bg: var(--accent);
    --btn-text: #fff;
    --btn-border: var(--accent);
    --btn-hover-bg: var(--secondary-accent);
    --btn-hover-border: var(--secondary-accent);
    --btn-hover-shadow: rgba(219, 158, 95, 0.4);

    --smile-face: #0c0c0c;
    --smile-circle: var(--accent);

    --title-color: var(--text);
    --title-shadow: rgba(0, 0, 0, 0.5);

    --label-color: var(--text);

    --input-bg: #141414;
    --input-border: var(--border);
    --input-text: var(--text);
    --input-focus-border: var(--border-focus);
    --input-focus-shadow: var(--border-focus);

    --checkbox-label: var(--muted);
    --checkbox-border: var(--border);
    --checkbox-checked-border: var(--accent);
    --checkbox-checked-bg: rgba(245, 177, 106, 0.1);
    --checkbox-mark: white;

    --submit-bg: var(--accent);
    --submit-text: #fff;
    --submit-shadow: rgba(245, 177, 106, 0.3);
    --submit-hover-bg: var(--secondary-accent);
    --submit-hover-shadow: rgba(219, 158, 95, 0.4);

    --terms-text: #aaa;
    --terms-link: var(--accent);
    --terms-link-hover: var(--secondary-accent);
}

/* ============================================================
   CONTÁCTANOS BADGE STYLING
   Orange border, Anton font (like SERVICIOS), white text
============================================================ */
.formHero_inner-subheading {
    font-family: 'Anton', sans-serif !important;
    color: #ffffff !important;
    border-color: #f5b16a !important;
    background-color: transparent !important;
}

/* ============================================================
   SUBMIT BUTTON STYLING
   Orange background #f5b16a, larger font, fixed button size
============================================================ */
.formHero_form .freeform-button-submit,
.freeform-button-submit {
    background-color: #f5b16a !important;
    border-color: #f5b16a !important;
    color: #000000 !important;
    font-size: 3rem !important;
    font-family: 'Anton', sans-serif !important;
    /* Fixed dimensions to maintain button size */
    width: 100px !important;
    height: 30px !important;
    padding: 0 !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    border-radius: 999px !important;
    cursor: pointer;
    transition: all 0.3s ease !important;
}

.formHero_form .freeform-button-submit:hover,
.freeform-button-submit:hover {
    background-color: #dca36b !important;
    border-color: #dca36b !important;
    transform: translateY(-2px);
}

/* ============================================================
   MAP BLOCK SECTION - COLOR OVERRIDES
   Change green colors to orange #f5b16a
============================================================ */
.mapBlock_inner-text h2,
.mapBlock_inner-text h3 {
    color: #f5b16a !important;
}

.mapBlock_inner-text a {
    color: #f5b16a !important;
    text-decoration: underline;
}

.mapBlock_inner-text a:hover {
    color: #dca36b !important;
}



/* Overrides for External Classes from eyekiller app.css */
.button--green,
.accessibility__btn--green,
.button--header-cta--green,
.button--talk_cta {
    background-color: var(--btn-bg) !important;
    color: var(--btn-text) !important;
    border-color: var(--btn-border) !important;
    transition: all 0.3s ease !important;
}

.button--green:hover,
.accessibility__btn--green:hover,
.button--header-cta--green:hover,
.button--talk_cta:hover {
    background-color: var(--btn-hover-bg) !important;
    border-color: var(--btn-hover-border) !important;
    box-shadow: 0 0 15px var(--btn-hover-shadow);
    /* Blue glow on hover */
    transform: translateY(-2px);
}

/* Green smile override just in case it's used elsewhere as a class */
/* Green smile override just in case it's used elsewhere as a class */
.green-smile path,
.mobile-smile path {
    fill: var(--smile-face) !important;
    /* Keep face dark */
}

/* Note: The circle fill is handled inline in HTML, but we can force it here if needed */
.green-smile circle,
.mobile-smile circle {
    fill: var(--smile-circle) !important;
}

/* Título del formulario */
.formHero_form .freeform-column-12 h2 {
    margin: 0 0 40px;
    font-size: 42px;
    font-weight: 800;
    letter-spacing: 0.02em;
    text-transform: uppercase;
    color: var(--title-color);
    text-shadow: 0 2px 10px var(--title-shadow);
}

/* ============================================================
   NAVBAR ESCÚCHANOS BUTTON - TEXT COLOR OVERRIDE
   Change text from white to black
============================================================ */
.button--header-cta--green {
    color: #000000 !important;
}

/* Spinner styles moved to social-spinner.css */
/* Override focus color for form inputs */
input:focus,
textarea:focus,
select:focus,
.freeform-input:focus {
    border-color: #1866d8 !important;
    box-shadow: 0 0 0 1px #1866d8 !important;
    outline: none !important;
    background-color: #141414 !important;
}

/* Ensure terms text color override */
.terms,
.terms p {
    color: #ffffff !important;
}


/* ============================================================
   ACCORDION ICONS COLOR OVERRIDE
   Change green crosses to blue #1866d8
============================================================ */
.accordionBlock-item--icon {
    color: #1866d8 !important;
}