/* ================================
   CONTACT HERO
================================ */

.contact-hero{
    position:relative;

    width:100%;
    height:500px;

    overflow:hidden;

    border-bottom:1px solid #E2E8F0;

    display:flex;
    align-items:center;
}


/* ================================
   BACKGROUND IMAGE
================================ */

.contact-hero-bg{
    position:absolute;
    inset:0;

    background-image:url("../images/contact/contact-hero.png");
    background-size:cover;
    background-position:center;
    background-repeat:no-repeat;

    z-index:0;
}


/* ================================
   DARK OVERLAY
================================ */

.contact-hero-overlay{
    position:absolute;
    inset:0;

    background:
        linear-gradient(
            90deg,
            rgba(11,29,43,.86) 0%,
            rgba(11,29,43,.72) 30%,
            rgba(11,29,43,.35) 55%,
            rgba(11,29,43,.05) 100%
        );

    z-index:1;
}


/* ================================
   CONTENT
================================ */

.contact-hero-content{
    position:relative;
    z-index:2;

    padding-top:8px;
}

.contact-hero-content h1{
    margin:0 0 20px;

    max-width:600px;

    font-family:"Manrope", sans-serif;
    font-size:40px;
    font-weight:700;
    line-height:50px;
    letter-spacing:-1px;

    color:#FFFFFF;
}


.contact-hero-content > p{
    max-width:490px;

    margin:0 0 28px;

    font-family:"Plus Jakarta Sans", sans-serif;
    font-size:15px;
    font-weight:400;
    line-height:24px;

    color:rgba(255,255,255,.88);
}


/* ================================
   INFO ROW
================================ */

.contact-hero-info{
    display:flex;
    align-items:flex-start;
    gap:46px;
}


.contact-info-item{
    display:flex;
    align-items:flex-start;
    gap:10px;
}


.contact-info-item > img{
    width:15px;
    height:15px;

    margin-top:2px;

    object-fit:contain;
}


.contact-info-item div{
    display:flex;
    flex-direction:column;
}


.contact-info-item strong{
    margin:0;

    font-family:"Manrope", sans-serif;
    font-size:11px;
    font-weight:600;
    line-height:16px;

    color:#FFFFFF;
}


.contact-info-item span{
    font-family:"Plus Jakarta Sans", sans-serif;
    font-size:9px;
    font-weight:400;
    line-height:14px;

    color:rgba(255,255,255,.82);
}


/* ================================
   WHATSAPP FLOATING BUTTON
================================ */

.contact-whatsapp{
    position:absolute;

    right:72px;
    bottom:48px;

    z-index:3;

    height:46px;

    padding:0 16px;

    display:flex;
    align-items:center;
    gap:10px;

    background:#FFFFFF;

    border-radius:999px;

    box-shadow:0 8px 24px rgba(0,0,0,.18);

    font-family:"Plus Jakarta Sans", sans-serif;
    font-size:11px;
    font-weight:400;

    color:#4C535B;

    text-decoration:none;
}


.whatsapp-icon{
    width:22px;
    height:22px;

    display:flex;
    align-items:center;
    justify-content:center;
}


.whatsapp-icon img{
    width:18px;
    height:18px;

    object-fit:contain;
}


.contact-whatsapp strong{
    font-family:"Manrope", sans-serif;
    font-size:11px;
    font-weight:700;

    color:#176B60;
}


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

@media(max-width:900px){

    .contact-hero{
        height:560px;
    }

    .contact-hero-info{
        gap:25px;
        flex-wrap:wrap;
    }

    .contact-whatsapp{
        right:30px;
        bottom:30px;
    }
}


@media(max-width:650px){

    .contact-hero{
        height:600px;
        align-items:flex-start;
    }

    .contact-hero-content{
        padding-top:80px;
    }

    .contact-hero-content h1{
        font-size:34px;
        line-height:44px;
    }

    .contact-hero-content > p{
        font-size:14px;
        line-height:22px;
    }

    .contact-hero-info{
        flex-direction:column;
        gap:18px;
    }

    .contact-whatsapp{
        left:20px;
        right:20px;
        bottom:24px;

        justify-content:center;

        font-size:10px;
    }
}

/* ================================
   CONTACT MAIN SECTION
================================ */

.contact-main{
    width:100%;
    padding:64px 0;
    background:#FFFFFF;
}

.contact-main-container{
    display:grid;
    grid-template-columns:1fr 1.45fr;
    gap:58px;
    align-items:start;
}


/* ================================
   LEFT SIDE
================================ */

.contact-left{
    width:100%;
}

.contact-left > h2{
    margin:0 0 12px;

    font-family:"Manrope", sans-serif;
    font-size:30px;
    font-weight:700;
    line-height:40px;
    letter-spacing:-0.7px;

    color:#151515;
}

.contact-intro{
    max-width:450px;
    margin:0 0 32px;

    font-family:"Plus Jakarta Sans", sans-serif;
    font-size:14px;
    font-weight:400;
    line-height:23px;

    color:#4E555D;
}


/* ================================
   CONTACT INFO CARDS
================================ */

.contact-info-card{
    width:100%;
    min-height:86px;

    margin-bottom:20px;
    padding:18px 22px;

    display:flex;
    align-items:center;
    gap:14px;

    background:#FFFFFF;
    border-radius:26px;

    box-shadow:
        0 12px 30px rgba(26,61,77,.07);
}


.contact-info-card:last-child{
    margin-bottom:0;
}


/* Icon */

.contact-card-icon{
    width:44px;
    height:44px;
    min-width:44px;

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

    border-radius:50%;
    background:#DDF4ED;
}


.contact-card-icon img{
    width:20px;
    height:20px;

    object-fit:contain;
}


/* Content */

.contact-card-content{
    display:flex;
    flex-direction:column;
    min-width:0;
}

.contact-card-content > span{
    margin-bottom:3px;

    font-family:"Manrope", sans-serif;
    font-size:10px;
    font-weight:600;
    line-height:15px;
    letter-spacing:1px;

    color:#687477;
}

.contact-card-content strong,
.contact-card-content a{
    font-family:"Manrope", sans-serif;
    font-size:16px;
    font-weight:600;
    line-height:23px;

    color:#151515;

    text-decoration:none;
}

.contact-card-content p{
    margin:0;

    font-family:"Plus Jakarta Sans", sans-serif;
    font-size:12px;
    font-weight:400;
    line-height:18px;

    color:#4E555D;
}

.contact-card-content a:hover{
    color:#1998BA;
}


/* ================================
   APPOINTMENT CARD
================================ */

.appointment-card{
    width:100%;

    padding:38px 36px 40px;

    background:#FFFFFF;
    border-radius:34px;

    box-shadow:
        0 18px 45px rgba(28,60,76,.07);
}


.appointment-card > h2{
    margin:0 0 3px;

    font-family:"Manrope", sans-serif;
    font-size:30px;
    font-weight:700;
    line-height:40px;
    letter-spacing:-0.7px;

    color:#151515;
}

.appointment-subtitle{
    margin:0;

    font-family:"Plus Jakarta Sans", sans-serif;
    font-size:12px;
    font-weight:400;
    line-height:19px;

    color:#535A61;
}


.appointment-divider{
    width:100%;
    height:1px;

    margin:22px 0 28px;

    background:#E6E9EC;
}


/* ================================
   FORM
================================ */

.appointment-form{
    width:100%;
}

.form-row{
    display:grid;
    grid-template-columns:1fr 1fr;
    gap:20px;
}

.form-group{
    display:flex;
    flex-direction:column;

    margin-bottom:20px;
}

.form-group label{
    margin-bottom:7px;

    font-family:"Manrope", sans-serif;
    font-size:10px;
    font-weight:600;
    line-height:15px;
    letter-spacing:.3px;

    color:#454D52;
}


/* Inputs */

.form-group input,
.form-group select,
.form-group textarea{
    width:100%;

    border:1px solid #D9DDE1;
    border-radius:15px;

    background:#F7F8F8;

    font-family:"Plus Jakarta Sans", sans-serif;
    font-size:13px;
    font-weight:400;

    color:#202428;

    outline:none;

    transition:border-color .2s ease, box-shadow .2s ease;
}


.form-group input,
.form-group select{
    height:50px;
    padding:0 14px;
}


.form-group textarea{
    min-height:84px;
    padding:13px 14px;
    resize:vertical;
}


.form-group input::placeholder,
.form-group textarea::placeholder{
    color:#A8ADB1;
}


.form-group input:focus,
.form-group select:focus,
.form-group textarea:focus{
    border-color:#1998BA;
    box-shadow:0 0 0 3px rgba(25,152,186,.08);
}


/* Select */

.select-wrapper{
    position:relative;
}

.select-wrapper::after{
    content:"⌄";

    position:absolute;
    right:15px;
    top:50%;

    transform:translateY(-55%);

    pointer-events:none;

    font-family:"Manrope", sans-serif;
    font-size:16px;

    color:#65717A;
}

.select-wrapper select{
    appearance:none;
    -webkit-appearance:none;

    padding-right:40px;
}


/* Message */

.form-message{
    margin-bottom:32px;
}


/* Submit */

.contact-submit{
    min-width:194px;
    height:44px;

    padding:0 24px;

    display:inline-flex;
    align-items:center;
    justify-content:center;
    gap:14px;

    border-radius:999px;
    background:#3D9FC3;

    font-family:"Manrope", sans-serif;
    font-size:11px;
    font-weight:700;
    letter-spacing:.2px;

    color:#FFFFFF;

    transition:.25s ease;
}


.contact-submit:hover{
    background:#298DAF;
    transform:translateY(-1px);
}

.contact-submit:disabled{
    opacity:.7;
    cursor:not-allowed;
    transform:none;
}

.form-status{
    margin-top:16px;
    font-family:"Manrope", sans-serif;
    font-size:14px;
    line-height:22px;
}

.form-status:empty{
    display:none;
}

.form-status-success{
    color:#1B8A5A;
}

.form-status-error{
    color:#D14343;
}


.submit-arrow{
    font-size:18px;
    font-weight:400;
    line-height:1;
}


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

@media(max-width:950px){

    .contact-main-container{
        grid-template-columns:1fr;
        gap:45px;
    }

    .contact-left{
        max-width:650px;
    }
}


@media(max-width:650px){

    .contact-main{
        padding:52px 0;
    }

    .contact-main-container{
        gap:35px;
    }

    .contact-left > h2,
    .appointment-card > h2{
        font-size:27px;
        line-height:36px;
    }

    .form-row{
        grid-template-columns:1fr;
        gap:0;
    }

    .appointment-card{
        padding:28px 20px 30px;
        border-radius:26px;
    }

    .contact-info-card{
        padding:16px 18px;
        border-radius:22px;
    }
}
/* ================================
   CLINIC LOCATION
================================ */

.clinic-location{
    width:100%;
    padding:64px 0;
    background:#FFFFFF;
}

.clinic-location-container{
    display:grid;
    grid-template-columns:1fr 1.42fr;
    gap:44px;
    align-items:stretch;
}


/* ================================
   LEFT CARD
================================ */

.clinic-location-card{
    min-height:345px;

    padding:34px 34px 34px;

    background:#FFFFFF;
    border-radius:38px;

    box-shadow:
        0 14px 40px rgba(31,60,70,.08);

    display:flex;
    flex-direction:column;
    justify-content:center;
}


/* Branch pill */

.clinic-branch-pill{
    width:max-content;

    display:flex;
    align-items:center;
    gap:7px;

    padding:5px 11px;

    margin-bottom:20px;

    background:#B9F0DD;
    border-radius:999px;

    font-family:"Manrope", sans-serif;
    font-size:12px;
    font-weight:500;
    line-height:18px;

    color:#15483F;
}

.clinic-branch-pill img{
    width:14px;
    height:14px;
    object-fit:contain;
}


/* Heading */

.clinic-location-card h2{
    margin:0 0 10px;

    font-family:"Manrope", sans-serif;
    font-size:27px;
    font-weight:600;
    line-height:36px;
    letter-spacing:-.6px;

    color:#151719;
}


/* Address */

.clinic-address{
    margin:0;

    font-family:"Plus Jakarta Sans", sans-serif;
    font-size:14px;
    font-weight:400;
    line-height:24px;

    color:#535A60;
}


/* Divider */

.clinic-card-divider{
    width:100%;
    height:1px;

    margin:26px 0 30px;

    background:#E5E9EC;
}


/* Buttons */

.clinic-buttons{
    display:flex;
    align-items:center;
    gap:14px;
}

.clinic-direction-btn,
.clinic-call-btn{
    height:50px;

    display:inline-flex;
    align-items:center;
    justify-content:center;

    border-radius:999px;

    font-family:"Manrope", sans-serif;
    font-size:13px;
    font-weight:700;

    text-decoration:none;

    transition:.25s ease;
}


/* Directions */

.clinic-direction-btn{
    min-width:204px;

    gap:10px;

    padding:0 22px;

    background:#3C9FC2;
    color:#FFFFFF;
}

.clinic-direction-btn:hover{
    background:#298DAF;
    transform:translateY(-1px);
}

.direction-arrow{
    font-size:18px;
    line-height:1;
}


/* Call */

.clinic-call-btn{
    min-width:164px;

    padding:0 20px;

    border:1px solid #C5D0CE;

    background:#FFFFFF;

    font-weight:500;

    color:#3B9BBC;
}

.clinic-call-btn:hover{
    background:#F4FBFA;
}


/* ================================
   MAP
================================ */

.clinic-map{
    position:relative;

    min-height:345px;

    overflow:hidden;

    border-radius:36px;

    background:#E6EDE8;
}


.clinic-map > img{
    width:100%;
    height:100%;
    min-height:345px;

    display:block;

    object-fit:cover;
}


/* Slight map wash */

.clinic-map::after{
    content:"";

    position:absolute;
    inset:0;

    background:rgba(246,250,248,.18);

    pointer-events:none;
}


/* ================================
   MAP MARKER
================================ */

.map-marker{
    position:absolute;

    left:53%;
    top:43%;

    transform:translate(-50%,-50%);

    width:48px;
    height:48px;

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

    border-radius:50%;

    background:#005743;
    border:2px solid #FFFFFF;

    box-shadow:0 4px 12px rgba(0,0,0,.15);

    z-index:3;
}

.map-marker span{
    width:20px;
    height:20px;

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

    border-radius:3px;

    background:#FFFFFF;

    font-family:"Manrope", sans-serif;
    font-size:17px;
    font-weight:800;

    color:#005743;
}


/* ================================
   MAP LABEL
================================ */

.map-label{
    position:absolute;

    left:53%;
    top:58%;

    transform:translateX(-50%);

    height:38px;

    padding:0 15px;

    display:flex;
    align-items:center;
    gap:7px;

    border-radius:999px;

    background:#FFFFFF;

    box-shadow:0 4px 15px rgba(0,0,0,.12);

    z-index:3;

    white-space:nowrap;
}

.map-label strong{
    font-family:"Manrope", sans-serif;
    font-size:12px;
    font-weight:600;

    color:#14594E;
}

.map-label > span:not(.map-dot){
    font-family:"Plus Jakarta Sans", sans-serif;
    font-size:11px;

    color:#777F82;
}

.map-dot{
    width:6px;
    height:6px;

    border-radius:50%;

    background:#E9851A;
}


/* ================================
   MAP CONTROLS
================================ */

.map-controls{
    position:absolute;

    right:18px;
    bottom:17px;

    width:49px;

    overflow:hidden;

    border-radius:25px;

    background:#FFFFFF;

    box-shadow:0 5px 15px rgba(0,0,0,.12);

    z-index:3;
}

.map-controls button{
    width:49px;
    height:46px;

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

    background:#FFFFFF;

    border:none;

    font-family:"Manrope", sans-serif;
    font-size:20px;
    font-weight:500;

    color:#176B60;
}

.map-controls button:hover{
    background:#F6F9F8;
}

.map-control-line{
    width:100%;
    height:1px;

    background:#E5E8E8;
}


/* ================================
   NORTH
================================ */

.map-north{
    position:absolute;

    right:64px;
    bottom:15px;

    display:flex;
    flex-direction:column;
    align-items:center;

    z-index:3;

    font-family:"Manrope", sans-serif;

    color:#242B2D;
}

.map-north span{
    font-size:14px;
    line-height:14px;
}

.map-north small{
    font-size:9px;
    font-weight:600;
    line-height:12px;
}


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

@media(max-width:950px){

    .clinic-location-container{
        grid-template-columns:1fr;
        gap:30px;
    }

    .clinic-location-card{
        min-height:auto;
    }

    .clinic-map{
        min-height:400px;
    }

    .clinic-map > img{
        min-height:400px;
    }
}


@media(max-width:650px){

    .clinic-location{
        padding:52px 0;
    }

    .clinic-location-card{
        padding:28px 22px;
        border-radius:28px;
    }

    .clinic-location-card h2{
        font-size:24px;
        line-height:32px;
    }

    .clinic-address{
        font-size:13px;
        line-height:22px;
    }

    .clinic-buttons{
        flex-direction:column;
        align-items:stretch;
    }

    .clinic-direction-btn,
    .clinic-call-btn{
        width:100%;
    }

    .clinic-map{
        min-height:340px;
        border-radius:26px;
    }

    .clinic-map > img{
        min-height:340px;
    }

    .map-label{
        left:50%;
    }

    .map-marker{
        left:50%;
    }
}
/* ================================
   REAL GOOGLE MAP
================================ */

.clinic-map{
    position:relative;
    min-height:345px;

    overflow:hidden;
    border-radius:36px;

    background:#E6EDE8;
}

.clinic-map iframe{
    width:100%;
    height:100%;
    min-height:345px;

    display:block;

    border:0;
}

/* ==========================================
   APPOINTMENT FORM STATUS
========================================== */

.form-status {
    margin-top: 14px;
    min-height: 22px;

    font-family: var(--font-body);
    font-size: 13px;
    line-height: 21px;

    transition: all 0.3s ease;
}

.form-status.sending {
    color: #555;
}

.form-status.success {
    color: #08795B;
}

.form-status.error {
    color: #C62828;
}


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

.contact-submit:disabled {
    opacity: 0.7;
    cursor: not-allowed;
}