/* ==========================================
   Live Doctor Variables
========================================== */

:root{

    /* Floating Card */

    --doctor-float-width:220px;
    --doctor-float-right:20px;
    --doctor-float-bottom:20px;
    --doctor-float-padding:14px 22px;
    --doctor-float-radius:60px;
    --doctor-float-gap:4px;

    /* Text */

    --doctor-float-font-size:15px;

    /* Doctor Image */

    --doctor-float-img-size:25px;

    /* Live Dot */

    --doctor-live-dot-size:10px;
    --doctor-live-dot-left:-16px;

    /* Animation */

    --doctor-float-distance:8px;

    /* Loader */

    --loader-min-width:220px;
    --loader-padding:10px 30px;
    --loader-gap:15px;
    --loader-radius:12px;

    /* Spinner */

    --loader-spinner-size:30px;
    --loader-spinner-border:4px;

    /* Text */

    --loader-text-size:1.3rem;

}


/* ==========================================
   Available Doctor Card
========================================== */

.doctor-float-card{

    position:fixed !important;

    right:var(--doctor-float-right);
    bottom:var(--doctor-float-bottom);

    width:var(--doctor-float-width);

    z-index:99999 !important;

    display:flex;

    align-items:center;

    justify-content:center;

    gap:var(--doctor-float-gap);

    padding:var(--doctor-float-padding);

    background:linear-gradient(
        90deg,
        #f2f2f2,
        #0b6b9c
    );

    border-radius:var(--doctor-float-radius);

    text-decoration:none;

    box-shadow:0 10px 30px rgba(0,0,0,.18);

    transition:all .35s ease;

    animation:floatUpDown 3s ease-in-out infinite;

}

.doctor-float-card:hover{

    transform:scale(1.05);

    box-shadow:0 15px 40px rgba(0,0,0,.25);

}

.doctor-float-content strong{

    color:#083a53;

    font-size:var(--doctor-float-font-size);

    font-weight:700;

}


/* ==========================================
   Floating Animation
========================================== */

@keyframes floatUpDown{

    0%{
        transform:translateY(0);
    }

    50%{
        transform:translateY(calc(var(--doctor-float-distance) * -1));
    }

    100%{
        transform:translateY(0);
    }

}


/* ==========================================
   Doctor Image
========================================== */

.doctor-img-wrapper{

    position:relative;

    display:inline-block;

}

.doctor-float-img{

    width:var(--doctor-float-img-size);

    height:var(--doctor-float-img-size);

    object-fit:contain;

}


/* ==========================================
   Live Dot
========================================== */

.live-dot{

    position:absolute;

    left:var(--doctor-live-dot-left);

    top:50%;

    transform:translateY(-50%);

    width:var(--doctor-live-dot-size);

    height:var(--doctor-live-dot-size);

    background:#ff3b30;

    border-radius:50%;

    z-index:2;

}

.live-dot::after{

    content:"";

    position:absolute;

    top:50%;

    left:50%;

    width:100%;

    height:100%;

    background:rgba(255,59,48,.4);

    border-radius:50%;

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

    animation:pulse-ring 1.5s infinite;

}

@keyframes pulse-ring{

    0%{

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

        opacity:.7;

    }

    70%{

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

        opacity:0;

    }

    100%{

        opacity:0;

    }

}


/* ==========================================
   Page Loader
========================================== */

#page-loader{

    position:fixed;

    inset:0;

    display:flex;

    justify-content:center;

    align-items:center;

    z-index:99999;

    background:rgba(255,255,255,.15);

    transition:opacity .3s ease;

}


/* ==========================================
   Loader Box
========================================== */

.loader-box{

    display:flex;

    align-items:center;

    gap:var(--loader-gap);

    min-width:var(--loader-min-width);

    padding:var(--loader-padding);

    background:#fff;

    border-radius:var(--loader-radius);

    box-shadow:
        0 10px 30px rgba(0,0,0,.18),
        0 2px 8px rgba(0,0,0,.08);

}


/* ==========================================
   Spinner
========================================== */

.spinner{

    width:var(--loader-spinner-size);

    height:var(--loader-spinner-size);

    border:var(--loader-spinner-border) solid #ddd;

    border-top-color:#008080;

    border-radius:50%;

    animation:spin .8s linear infinite;

}


/* ==========================================
   Loading Text
========================================== */

.loading-text{

    margin:0;

    font-size:var(--loader-text-size);

    font-weight:600;

    color:#083a53;

    letter-spacing:.5px;

    white-space:nowrap;

}

@keyframes spin{

    to{

        transform:rotate(360deg);

    }

}


/* ==========================================
   Responsive (1199.98px and Below)
========================================== */

@media (max-width:1199.98px){

    :root{

        /* Floating Card */

        --doctor-float-width:185px;

        --doctor-float-right:15px;

        --doctor-float-bottom:15px;

        --doctor-float-padding:12px 18px;

        --doctor-float-radius:50px;

        --doctor-float-gap:6px;

        /* Text */

        --doctor-float-font-size:13px;

        /* Image */

        --doctor-float-img-size:22px;

        /* Live Dot */

        --doctor-live-dot-size:8px;

        --doctor-live-dot-left:-12px;

        /* Animation */

        --doctor-float-distance:6px;

        /* Loader */

        --loader-min-width:190px;

        --loader-padding:10px 22px;

        --loader-gap:12px;

        /* Spinner */

        --loader-spinner-size:26px;

        --loader-spinner-border:3px;

        /* Text */

        --loader-text-size:1.05rem;

    }

}