/* ============================================================
   FIX v3
   1. Floating icons — remove phantom right-side blank space
   2. Doctor name — responsive font scaling
   ============================================================ */


/* ── 1. FLOATING ICONS — kill the blank right column ──────── */

/*
   Root cause: the body/html or a container has
   padding-right / margin-right equal to the scrollbar width
   added by Bootstrap modal JS, or the fixed element itself
   is somehow influencing layout. We force body to never
   gain extra right padding and ensure the fixed container
   is completely outside document flow.
*/

html, body {
    overflow-x: hidden !important;  /* stop horizontal scroll from fixed el */
    max-width: 100% !important;
}

/* Completely isolate the floating container */
#floatingContact {
    position: fixed !important;
    right: 12px !important;
    bottom: 25px !important;
    left: auto !important;          /* never stretch left */
    top: auto !important;           /* never stretch top */
    width: 50px !important;         /* tight fixed width — no auto-expanding */
    height: auto !important;
    display: flex !important;
    flex-direction: column !important;
    gap: 10px !important;
    z-index: 99999 !important;
    margin: 0 !important;
    padding: 0 !important;
    pointer-events: none;           /* let clicks pass through the gap between buttons */

    /* show/hide transitions */
    opacity: 0;
    visibility: hidden;
    transform: translateY(20px);
    transition: .4s ease;
}

#floatingContact.show {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
}

/* Each button re-enables pointer events */
.floating-btn {
    pointer-events: all !important;
    width: 50px !important;
    height: 50px !important;
    border-radius: 50% !important;
    display: flex !important;
    justify-content: center !important;
    align-items: center !important;
    text-decoration: none !important;
    font-size: 20px !important;
    color: #fff !important;
    box-shadow: 0 4px 12px rgba(0,0,0,0.15) !important;
    transition: transform 0.3s, opacity 0.3s !important;
    opacity: 0.82 !important;       /* semi-transparent */
    flex-shrink: 0 !important;
}

.floating-btn:hover,
.floating-btn:active {
    transform: scale(1.1) !important;
    opacity: 1 !important;
    color: #fff !important;
}

.call-btn  { background: rgba(37, 211, 102, 0.85) !important; }
.email-btn { background: rgba(177, 98, 69, 0.85)  !important; }

@media (max-width: 576px) {
    #floatingContact {
        right: 8px !important;
        bottom: 18px !important;
        width: 44px !important;
        gap: 8px !important;
    }

    .floating-btn {
        width: 44px !important;
        height: 44px !important;
        font-size: 17px !important;
    }
}


/* ── 2. DOCTOR NAME — responsive font scaling ──────────────── */

/*
   .doctor-name > h1.head-style
   Currently fixed at ~42px on desktop.
   We scale it down smoothly as viewport shrinks.
*/



/* Fluid clamp: min 18px → max 42px based on viewport width */
.head-style {
    font-size: clamp(18px, 5.5vw, 42px) !important;
    line-height: 1.2 !important;
    word-break: break-word !important;

    /* Keep the gradient text effect */
    font-weight: 700;
    font-style: italic;
    font-family: 'DM Sans', sans-serif;
    background: linear-gradient(90deg, #ebaa4c 0%, #b16245 40%, #000000 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

/* Explicit breakpoint overrides as fallback for older browsers */
@media (max-width: 480px) {
    .head-style {
        font-size: 22px !important;
        padding: 0 8px;
    }
}

@media (min-width: 481px) and (max-width: 768px) {
    .head-style {
        font-size: 28px !important;
    }
}

@media (min-width: 769px) and (max-width: 991px) {
    .head-style {
        font-size: 34px !important;
    }
}