/*==================================================
  Orange Multispeciality Hospital — Appointment Page
  Brand: deep navy + orange accent (matches live site)
==================================================*/

:root{
    --navy-deep:#061c36;
    --navy-mid:#0d2c54;
    --orange:#ff6f00;
    --orange-light:#ff8c3c;
    --off-white:#f4f6f9;
    --white:#ffffff;
    --text-dark:#1b2b4b;
    --text-gray:#5a6472;
    --border:#e2e6ec;
}

*{
    margin:0;
    padding:0;
    box-sizing:border-box;
}

html,body{
    height:100%;
}

body{
    font-family:'Poppins',sans-serif;
    background:var(--off-white);
    color:var(--text-dark);
}

/*==================================================
  Page Shell
==================================================*/

.login-page{
    display:flex;
    width:100%;
    min-height:100vh;
}

/*==================================================
  Left Panel — Hero / Brand
==================================================*/

.left-panel{
    position:relative;
    width:50%;
    min-height:100vh;
    display:flex;
    align-items:center;
    justify-content:center;
    padding:50px;
    overflow:hidden;
    background-image:url("../images/Multispecialty-Banners-2.png");
    background-size:cover;
    background-position:center;
    background-repeat:no-repeat;
}

/* navy/orange brand wash over the banner photo */
.left-panel::before{
    content:'';
    position:absolute;
    inset:0;
    background:linear-gradient(135deg,rgba(6,28,54,.88) 0%,rgba(13,44,84,.78) 55%,rgba(255,111,0,.22) 100%);
    pointer-events:none;
}

.left-content{
    position:relative;
    z-index:2;
    width:100%;
    max-width:460px;
    text-align:center;
    color:var(--white);
}

.hospital-logo{
    width:140px;
    height:auto;
    margin-bottom:28px;
    transition:transform .35s ease;
}

.hospital-logo:hover{
    transform:scale(1.04);
}

.left-content h1{
    font-size:clamp(28px,3vw,40px);
    font-weight:600;
    line-height:1.25;
    margin-bottom:20px;
}

.title-line{
    width:70px;
    height:3px;
    background:var(--orange);
    border-radius:2px;
    margin:0 auto 25px;
}

/*==================================================
  Doctor Trust Card — signature element
  (floating glass card with an orange accent edge)
==================================================*/

.doctor-box{
    position:relative;
    display:flex;
    align-items:center;
    gap:20px;
    text-align:left;
    background:rgba(255,255,255,.06);
    border:1px solid rgba(255,255,255,.12);
    border-radius:14px;
    padding:22px 24px;
    backdrop-filter:blur(6px);
}

.doctor-box::before{
    content:'';
    position:absolute;
    left:0;
    top:14px;
    bottom:14px;
    width:4px;
    border-radius:4px;
    background:var(--orange);
}

.doctor-image img{
    width:72px;
    height:72px;
    border-radius:50%;
    object-fit:cover;
    border:3px solid rgba(255,255,255,.3);
    flex-shrink:0;
}

.doctor-details h3{
    font-size:20px;
    font-weight:600;
    margin-bottom:4px;
    color:var(--white);
}

.doctor-details h5{
    font-size:14px;
    font-weight:500;
    color:var(--orange-light);
    margin-bottom:8px;
}

.doctor-details p{
    font-size:13.5px;
    line-height:1.55;
    color:rgba(255,255,255,.78);
}

/*==================================================
  Contact Links (website / email)
==================================================*/

.contact-info{
    display:flex;
    flex-direction:column;
    gap:12px;
    margin-top:24px;
}

.contact-info a{
    display:flex;
    align-items:center;
    gap:10px;
    font-size:14px;
    color:rgba(255,255,255,.85);
    text-decoration:none;
    transition:color .25s ease;
}

.contact-info a:hover{
    color:var(--orange-light);
}

.contact-info a i{
    width:30px;
    height:30px;
    flex-shrink:0;
    display:flex;
    align-items:center;
    justify-content:center;
    border-radius:50%;
    background:rgba(255,255,255,.08);
    color:var(--orange-light);
    font-size:13px;
}

/*==================================================
  Right Panel — Form
==================================================*/

.right-panel{
    position:relative;
    width:50%;
    min-height:100vh;
    background-color:var(--off-white);
    background-image:
        linear-gradient(rgba(244,246,249,.94),rgba(244,246,249,.94)),
        repeating-linear-gradient(45deg,rgba(13,44,84,.035) 0 2px,transparent 2px 38px),
        repeating-linear-gradient(-45deg,rgba(255,111,0,.03) 0 2px,transparent 2px 38px);
    display:flex;
    align-items:center;
    justify-content:center;
    padding:50px 40px;
    overflow:hidden;
}

/* faint medical-cross watermarks, on-brand instead of a stock photo */
.right-panel::before,
.right-panel::after{
    content:'\f0f8';
    font-family:'Font Awesome 6 Free';
    font-weight:900;
    position:absolute;
    color:rgba(13,44,84,.045);
    pointer-events:none;
}

.right-panel::before{
    font-size:220px;
    top:-50px;
    right:-40px;
    transform:rotate(-12deg);
}

.right-panel::after{
    font-size:140px;
    bottom:-30px;
    left:-30px;
    color:rgba(255,111,0,.05);
    transform:rotate(8deg);
}

.appointment-form{
    position:relative;
    z-index:2;
    width:100%;
    max-width:520px;
    background:var(--white);
    border-radius:16px;
    padding:44px 40px;
    box-shadow:0 20px 50px rgba(10,35,65,.08);
}

.appointment-form h3{
    display:flex;
    align-items:center;
    justify-content:center;
    gap:12px;
    font-size:26px;
    font-weight:700;
    color:var(--navy-mid);
    text-align:center;
    margin-bottom:6px;
}

.appointment-form h3 i{
    display:flex;
    align-items:center;
    justify-content:center;
    width:42px;
    height:42px;
    flex-shrink:0;
    border-radius:50%;
    background:linear-gradient(135deg,var(--orange),var(--orange-light));
    color:var(--white);
    font-size:17px;
    box-shadow:0 8px 18px rgba(255,111,0,.3);
}

.appointment-form h3::after{
    content:'';
    display:block;
    width:48px;
    height:3px;
    background:var(--orange);
    border-radius:2px;
    margin:14px auto 30px;
}

/*==================================================
  Form Fields
==================================================*/

.form-container{
    display:flex;
    flex-direction:column;
}



textarea.input-field{
    height:110px;
    padding-top:14px;
    resize:none;
}

.input-field::placeholder{
    color:#9aa3af;
}

.input-field:focus{
    outline:none;
    border-color:var(--orange);
    box-shadow:0 0 0 .2rem rgba(255,111,0,.14);
}

.input-field.full-width,
.full-width{
    grid-column:1 / -1;
}

select.input-field{
    appearance:none;
    background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='none' stroke='%235a6472' stroke-width='2'><polyline points='6 9 12 15 18 9'/></svg>");
    background-repeat:no-repeat;
    background-position:right 16px center;
    padding-right:40px;
}

/*==================================================
  OTP Section
==================================================*/

.otp-section{
    grid-column:1 / -1;
}

.otp-input{
    letter-spacing:6px;
    text-align:center;
    font-weight:600;
}

.otp-message{
    grid-column:1 / -1;
    font-size:13.5px;
    min-height:18px;
}

.otp-message.success{
    color:#1e9e5a;
}

.otp-message.error{
    color:#e0453c;
}

/*==================================================
  Buttons
==================================================*/

.button-group{
    grid-column:1 / -1;
    display:flex;
    flex-wrap:wrap;
    gap:12px;
    margin-top:6px;
}

.submit-button{
    flex:1 1 auto;
    min-width:120px;
    height:52px;
    border:none;
    border-radius:10px;
    background:linear-gradient(90deg,var(--orange),var(--orange-light));
    color:var(--white);
    font-family:'Poppins',sans-serif;
    font-size:15px;
    font-weight:600;
    cursor:pointer;
    position:relative;
    overflow:hidden;
    transition:transform .25s ease,box-shadow .25s ease;
}

.submit-button:hover{
    transform:translateY(-2px);
    box-shadow:0 12px 25px rgba(255,111,0,.3);
}

.submit-button:disabled{
    opacity:.6;
    cursor:not-allowed;
    transform:none;
    box-shadow:none;
}

.submit-button.resend-button{
    background:var(--white);
    color:var(--navy-mid);
    border:1px solid var(--border);
}

.submit-button.resend-button:hover{
    box-shadow:none;
    border-color:var(--orange);
    color:var(--orange);
}

input[type="reset"].submit-button{
    background:var(--white);
    color:var(--text-gray);
    border:1px solid var(--border);
}

input[type="reset"].submit-button:hover{
    box-shadow:none;
    border-color:#c7ccd3;
    transform:none;
}

/* ripple click feedback */
.ripple{
    position:absolute;
    width:20px;
    height:20px;
    background:rgba(255,255,255,.6);
    border-radius:50%;
    transform:scale(0);
    animation:ripple .6s linear;
    pointer-events:none;
}

@keyframes ripple{
    to{
        transform:scale(20);
        opacity:0;
    }
}

/*==================================================
  Loading Indicator
==================================================*/

#loadingIndicator{
    margin-top:24px;
    display:flex;
    flex-direction:column;
    gap:8px;
}

#loadingIndicator hr{
    height:10px;
    border:none;
    border-radius:6px;
    background:linear-gradient(90deg,var(--border) 25%,#f0f2f5 37%,var(--border) 63%);
    background-size:400% 100%;
    animation:shimmer 1.4s ease infinite;
}

@keyframes shimmer{
    0%{background-position:100% 0;}
    100%{background-position:0 0;}
}

/*==================================================
  Toast
==================================================*/

.custom-toast{
    position:fixed;
    top:30px;
    right:30px;
    padding:15px 25px;
    color:var(--white);
    border-radius:8px;
    font-weight:500;
    opacity:0;
    transform:translateY(-20px);
    transition:.3s;
    z-index:9999;
}

.custom-toast.success{
    background:#1e9e5a;
}

.custom-toast.error{
    background:#e0453c;
}

.custom-toast.show{
    opacity:1;
    transform:translateY(0);
}

/*==================================================
  Shake (validation feedback)
==================================================*/

.shake{
    animation:shake .4s;
}

@keyframes shake{
    0%{transform:translateX(0);}
    20%{transform:translateX(-8px);}
    40%{transform:translateX(8px);}
    60%{transform:translateX(-8px);}
    80%{transform:translateX(8px);}
    100%{transform:translateX(0);}
}

/*==================================================
  Responsive
==================================================*/

@media(max-width:992px){

    .login-page{
        flex-direction:column;
    }

    .left-panel,
    .right-panel{
        width:100%;
        min-height:auto;
    }

    .left-panel{
        padding:50px 30px;
    }

    .right-panel{
        padding:40px 24px;
    }
}

@media(max-width:576px){

    .left-content h1{
        font-size:26px;
    }

    .doctor-box{
        flex-direction:column;
        text-align:center;
    }

    .doctor-box::before{
        display:none;
    }

    .contact-info{
        align-items:center;
    }

    .appointment-form{
        padding:32px 22px;
    }

    #enquiryForm{
        grid-template-columns:1fr;
    }
}