/* ==========================================================
 OSORIO PLUMBING SERVICES
 SECTION 06 — INTERACTIVE SERVICE AREA
 CSS COMPLETO
========================================================== */


/* ==========================================================
 01. SECTION
========================================================== */

.os6-area {

    --os6-navy: #071d36;
    --os6-blue: #0788df;
    --os6-wine: #84233d;
    --os6-border: #dce5ee;
    --os6-text: #52657a;

    position: relative;

    width: 100%;

    padding: 90px 0;

    background: #f5f8fc;

    color: var(--os6-navy);

    font-family: "DM Sans", Arial, sans-serif;

}

.os6-area *,
.os6-area *::before,
.os6-area *::after {

    box-sizing: border-box;

}

.os6-area button,
.os6-area input,
.os6-area textarea {

    font-family: inherit;

}

.os6-area button:focus-visible,
.os6-area input:focus-visible {

    outline: 3px solid var(--os6-blue);
    outline-offset: 3px;

}


/* ==========================================================
 02. CONTAINER
========================================================== */

.os6-container {

    width: calc(100% - 80px);

    max-width: 1440px;

    margin: 0 auto;

}


/* ==========================================================
 03. HEADER
========================================================== */

.os6-header {

    display: flex;

    align-items: flex-end;
    justify-content: space-between;

    gap: 35px;

    margin-bottom: 40px;

}

.os6-heading {

    max-width: 760px;

}

.os6-eyebrow {

    display: block;

    margin-bottom: 16px;

    color: var(--os6-blue);

    font-size: 14px;
    font-weight: 900;

    letter-spacing: 2px;

}

.os6-heading h2 {

    margin: 0 0 19px;

    color: var(--os6-navy);

    font-family: "Outfit", Arial, sans-serif;

    font-size: clamp(36px, 4vw, 54px);
    font-weight: 900;

    line-height: 1.08;
    letter-spacing: -1.5px;

}

.os6-heading h2 span {

    display: block;

    color: var(--os6-blue);

}

.os6-heading p {

    max-width: 700px;

    margin: 0;

    color: var(--os6-text);

    font-size: 16px;
    line-height: 1.8;

    text-align: justify;

}


/* ==========================================================
 04. RADIUS BADGE
========================================================== */

.os6-radius-badge {

    display: flex;

    align-items: center;

    gap: 15px;

    flex-shrink: 0;

    padding: 19px 23px;

    border-radius: 5px;

    background: var(--os6-navy);

    color: #ffffff;

}

.os6-radius-badge > i {

    color: #46baff;

    font-size: 29px;

}

.os6-radius-badge > div {

    display: flex;

    flex-direction: column;

    gap: 5px;

}

.os6-radius-badge strong {

    font-size: 22px;
    font-weight: 900;

    line-height: 1;

}

.os6-radius-badge span {

    color: #c5d7e7;

    font-size: 14px;

}


/* ==========================================================
 05. MAIN LAYOUT
========================================================== */

.os6-layout {

    display: grid;

    grid-template-columns:
        minmax(0, 1.3fr)
        minmax(0, .85fr);

    gap: 24px;

    align-items: start;

}

.os6-map-column,
.os6-form-column {

    min-width: 0;

    overflow: hidden;

    border: 1px solid var(--os6-border);
    border-radius: 7px;

    background: #ffffff;

    box-shadow: 0 15px 40px rgba(7, 29, 54, .06);

}


/* ==========================================================
 06. MAP TOOLBAR
========================================================== */

.os6-map-toolbar {

    display: flex;

    align-items: center;
    justify-content: space-between;

    gap: 20px;

    padding: 22px 25px;

    border-bottom: 1px solid var(--os6-border);

}

.os6-map-toolbar > div {

    display: flex;

    flex-direction: column;

    gap: 5px;

}

.os6-map-toolbar strong {

    color: var(--os6-navy);

    font-size: 18px;
    font-weight: 900;

}

.os6-map-toolbar span {

    color: #63758a;

    font-size: 14px;
    line-height: 1.5;

}

.os6-reset {

    display: inline-flex;

    align-items: center;
    justify-content: center;

    gap: 9px;

    min-height: 42px;

    padding: 10px 14px;

    flex-shrink: 0;

    border: 1px solid var(--os6-border);
    border-radius: 4px;

    background: #f6f9fc;

    color: var(--os6-navy);

    font-size: 14px;
    font-weight: 800;

    cursor: pointer;

    transition:
        background .25s ease,
        color .25s ease;

}

.os6-reset:hover {

    background: var(--os6-blue);

    color: #ffffff;

}


/* ==========================================================
 07. ADDRESS SEARCH
========================================================== */

.os6-search {

    padding: 21px 25px;

    border-bottom: 1px solid var(--os6-border);

}

.os6-search label,
.os6-field label {

    display: block;

    margin-bottom: 9px;

    color: var(--os6-navy);

    font-size: 14px;
    font-weight: 900;

    letter-spacing: .4px;

}

.os6-search-row {

    display: flex;

    gap: 9px;

}

.os6-search input {

    flex: 1;

    min-width: 0;
    min-height: 49px;

    padding: 12px 14px;

    border: 1px solid #cbd8e5;
    border-radius: 4px;

    background: #ffffff;

    color: var(--os6-navy);

    font-size: 15px;

}

.os6-search-row button {

    display: inline-flex;

    align-items: center;
    justify-content: center;

    gap: 9px;

    min-height: 49px;

    padding: 12px 18px;

    border: 0;
    border-radius: 4px;

    background: var(--os6-blue);

    color: #ffffff;

    font-size: 14px;
    font-weight: 900;

    cursor: pointer;

    transition: background .25s ease;

}

.os6-search-row button:hover {

    background: var(--os6-wine);

}

.os6-search-row button:disabled {

    opacity: .65;

    cursor: wait;

}

#os6-search-status {

    margin: 9px 0 0;

    color: #53687e;

    font-size: 14px;
    line-height: 1.5;

}

#os6-search-status:empty {

    display: none;

}


/* ==========================================================
 08. MAP
========================================================== */

#os6-map {

    position: relative;

    width: 100%;
    height: 550px;

    z-index: 1;

    background: #e4edf5;

}

#os6-map .leaflet-control-attribution {

    font-size: 14px;

}

#os6-map .leaflet-popup-content {

    font-size: 14px;
    line-height: 1.5;

}


/* ==========================================================
 09. MAP FOOTER
========================================================== */

.os6-map-footer {

    display: flex;

    align-items: center;
    justify-content: space-between;

    flex-wrap: wrap;

    gap: 16px;

    padding: 19px 25px;

    border-top: 1px solid var(--os6-border);

    background: #ffffff;

}

.os6-map-location {

    display: flex;

    align-items: center;

    gap: 9px;

}

.os6-map-dot {

    width: 11px;
    height: 11px;

    border-radius: 50%;

    background: var(--os6-blue);

}

.os6-map-location strong {

    color: var(--os6-navy);

    font-size: 14px;
    font-weight: 900;

}

.os6-map-location small {

    color: #63758a;

    font-size: 14px;

}

.os6-map-disclaimer {

    display: flex;

    align-items: center;

    gap: 8px;

    color: #63758a;

    font-size: 14px;
    line-height: 1.5;

}

.os6-map-disclaimer i {

    color: var(--os6-blue);

}


/* ==========================================================
 10. RIGHT PANEL
========================================================== */

.os6-form-column {

    padding: 31px;

}

.os6-form-label {

    display: block;

    margin-bottom: 14px;

    color: var(--os6-blue);

    font-size: 14px;
    font-weight: 900;

    letter-spacing: 1.5px;

}

.os6-form-column h3 {

    margin: 0 0 15px;

    color: var(--os6-navy);

    font-family: "Outfit", Arial, sans-serif;

    font-size: 35px;
    font-weight: 900;

    line-height: 1.13;

}

.os6-form-column h3 span {

    display: block;

    color: var(--os6-blue);

}

.os6-form-intro {

    margin: 0 0 25px;

    color: var(--os6-text);

    font-size: 15px;
    line-height: 1.75;

    text-align: justify;

}


/* ==========================================================
 11. COVERAGE RESULT
========================================================== */

.os6-result {

    display: flex;

    align-items: flex-start;

    gap: 13px;

    margin-bottom: 27px;

    padding: 17px;

    border: 1px solid #dce5ee;
    border-radius: 5px;

    background: #f4f7fa;

}

.os6-result-icon {

    display: flex;

    align-items: center;
    justify-content: center;

    width: 42px;
    height: 42px;

    flex: 0 0 42px;

    border-radius: 4px;

    background: #e1eaf2;

    color: #476178;

    font-size: 18px;

}

.os6-result strong {

    display: block;

    margin-bottom: 5px;

    color: var(--os6-navy);

    font-size: 16px;
    font-weight: 900;

}

.os6-result p {

    margin: 0;

    color: #53687e;

    font-size: 14px;
    line-height: 1.6;

}


/* VALID */

.os6-result-valid {

    border-color: #a7dec2;

    background: #edf9f2;

}

.os6-result-valid .os6-result-icon {

    background: #d3f0df;

    color: #11663b;

}

.os6-result-valid strong {

    color: #11663b;

}


/* INVALID */

.os6-result-invalid {

    border-color: #efb8bd;

    background: #fff1f2;

}

.os6-result-invalid .os6-result-icon {

    background: #ffe0e3;

    color: #9e2331;

}

.os6-result-invalid strong {

    color: #9e2331;

}


/* ==========================================================
 12. LOCATION FIELDS
========================================================== */

.os6-field {

    min-width: 0;

    margin-bottom: 18px;

}

.os6-field-row {

    display: grid;

    grid-template-columns:
        repeat(2, minmax(0, 1fr));

    gap: 13px;

}

.os6-field input,
.os6-field textarea {

    display: block;

    width: 100%;
    min-width: 0;
    min-height: 49px;

    padding: 12px 13px;

    border: 1px solid #ccd8e4;
    border-radius: 4px;

    background: #f8fafc;

    color: var(--os6-navy);

    font-size: 15px;
    line-height: 1.5;

    outline: none;

}

.os6-field textarea {

    resize: none;

}

.os6-field input[readonly],
.os6-field textarea[readonly] {

    cursor: default;

}


/* ==========================================================
 13. DISTANCE
========================================================== */

.os6-distance {

    display: flex;

    align-items: center;
    justify-content: space-between;

    gap: 15px;

    margin: 5px 0 18px;

    padding: 16px;

    border-radius: 4px;

    background: #edf6fd;

}

.os6-distance span {

    color: var(--os6-navy);

    font-size: 14px;
    font-weight: 900;

}

.os6-distance strong {

    color: var(--os6-blue);

    font-size: 17px;
    font-weight: 900;

    white-space: nowrap;

}


/* ==========================================================
 14. COORDINATES
========================================================== */

.os6-coordinates {

    display: grid;

    grid-template-columns:
        repeat(2, minmax(0, 1fr));

    gap: 12px;

    margin-bottom: 22px;

}

.os6-coordinates > div {

    display: flex;

    flex-direction: column;

    gap: 7px;

    min-width: 0;

    padding: 13px 14px;

    border: 1px solid var(--os6-border);
    border-radius: 4px;

    background: #ffffff;

}

.os6-coordinates span {

    color: #65788c;

    font-size: 14px;
    font-weight: 900;

}

.os6-coordinates strong {

    overflow-wrap: anywhere;

    color: var(--os6-navy);

    font-size: 14px;
    font-weight: 800;

}


/* ==========================================================
 15. INFO BOX
========================================================== */

.os6-info-box {

    display: flex;

    align-items: flex-start;

    gap: 12px;

    margin-bottom: 24px;

    padding: 17px;

    border-left: 3px solid var(--os6-blue);
    border-radius: 0 4px 4px 0;

    background: #f1f7fc;

}

.os6-info-box > i {

    margin-top: 3px;

    color: var(--os6-blue);

    font-size: 18px;

}

.os6-info-box p {

    margin: 0;

    color: #52657a;

    font-size: 14px;
    line-height: 1.7;

}


/* ==========================================================
 16. ERROR
========================================================== */

.os6-form-error {

    margin: 0 0 13px;

    color: #a51f35;

    font-size: 14px;
    line-height: 1.5;

}

.os6-form-error:empty {

    display: none;

}


/* ==========================================================
 17. CONTINUE BUTTON
========================================================== */

.os6-submit {

    display: flex;

    align-items: center;
    justify-content: space-between;

    gap: 15px;

    width: 100%;
    min-height: 57px;

    padding: 16px 20px;

    border: 0;
    border-radius: 4px;

    background: var(--os6-blue);

    color: #ffffff;

    font-size: 14px;
    font-weight: 900;

    line-height: 1.4;

    cursor: pointer;

    transition:
        background .25s ease,
        transform .25s ease;

}

.os6-submit:hover:not(:disabled) {

    transform: translateY(-2px);

    background: var(--os6-wine);

}

.os6-submit:disabled {

    background: #aab9c7;

    cursor: not-allowed;

}

.os6-form-note {

    margin: 14px 0 0;

    color: #687a8c;

    font-size: 14px;
    line-height: 1.7;

    text-align: center;

}


/* ==========================================================
 18. LAPTOP
========================================================== */

@media (max-width: 1350px) {

    .os6-container {

        width: calc(100% - 64px);

    }

    .os6-layout {

        grid-template-columns:
            minmax(0, 1.15fr)
            minmax(0, .85fr);

    }

    .os6-form-column {

        padding: 25px;

    }

}


/* ==========================================================
 19. TABLET
========================================================== */

@media (max-width: 950px) {

    .os6-area {

        padding: 70px 0;

    }

    .os6-container {

        width: calc(100% - 44px);

    }

    .os6-header {

        align-items: flex-start;

        flex-direction: column;

    }

    .os6-layout {

        grid-template-columns: 1fr;

    }

    #os6-map {

        height: 480px;

    }

    .os6-form-column {

        padding: 30px;

    }

}


/* ==========================================================
 20. MOBILE
========================================================== */

@media (max-width: 600px) {

    .os6-area {

        padding: 55px 0;

    }

    .os6-container {

        width: calc(100% - 36px);

    }

    .os6-heading h2 {

        font-size: 35px;

    }

    .os6-heading p {

        font-size: 15px;

    }

    .os6-radius-badge {

        width: 100%;

    }

    .os6-map-toolbar {

        padding: 17px;

    }

    .os6-map-toolbar strong {

        font-size: 16px;

    }

    .os6-search {

        padding: 17px;

    }

    .os6-search-row {

        flex-direction: column;

    }

    .os6-search-row button {

        width: 100%;

    }

    #os6-map {

        height: 390px;

    }

    .os6-map-footer {

        align-items: flex-start;

        flex-direction: column;

        padding: 17px;

    }

    .os6-form-column {

        padding: 23px 18px;

    }

    .os6-form-column h3 {

        font-size: 30px;

    }

    .os6-field-row {

        grid-template-columns: 1fr;

        gap: 0;

    }

    .os6-distance {

        align-items: flex-start;

        flex-direction: column;

    }

}


/* ==========================================================
 21. SMALL MOBILE
========================================================== */

@media (max-width: 380px) {

    .os6-container {

        width: calc(100% - 32px);

    }

    .os6-heading h2 {

        font-size: 32px;

    }

    #os6-map {

        height: 350px;

    }

    .os6-coordinates {

        grid-template-columns: 1fr;

    }

}


/* ==========================================================
 22. REDUCED MOTION
========================================================== */

@media (prefers-reduced-motion: reduce) {

    .os6-area *,
    .os6-area *::before,
    .os6-area *::after {

        transition-duration: .01ms !important;
        animation-duration: .01ms !important;

    }

}