/* --- Vertical Call Us Button --- */

.call-us-button {
    position: fixed; /* Keep it in place relative to the viewport */
    top: 50%;       /* Position the top edge at the middle */
    right: 0;       /* Stick it to the right edge */
    z-index: 1030;  /* Ensure it's above most other content (Bootstrap modals are ~1050) */

    /* Vertical Orientation & Centering */
    writing-mode: vertical-rl; /* Make text vertical (right-to-left flow) */
    transform: translateY(-50%); /* Shift upwards by half its own height for true vertical centering */

    /* Appearance & Spacing */
    padding: 15px 8px; /* Adjust padding (more top/bottom, less left/right in original orientation) */
    border-top-left-radius: 8px;  /* Round corners appropriately for vertical */
    border-bottom-left-radius: 8px;
    border-top-right-radius: 0; /* Flat against the edge */
    border-bottom-right-radius: 0;
    white-space: nowrap; /* Prevent text wrapping */
    text-align: center; /* Center text within the button */

    /* --- Add Shadow --- */
    /* Parameters: horizontal-offset vertical-offset blur-radius spread-radius color */
    /* Negative horizontal offset pushes shadow to the left (visible when button is on right edge) */
    box-shadow: -3px 3px 10px rgba(0, 0, 0, 0.2); /* Adjust values as needed */

    /* --- Desktop Hover Effect --- */
    /* Hide by default on larger screens */
    opacity: 0;
    visibility: hidden;
    /* Smooth transition for fade-in/out AND shadow */
    transition: opacity 0.3s ease-in-out, visibility 0s linear 0.3s, box-shadow 0.3s ease-in-out;
    /* Shift slightly off-screen initially for a subtle slide-in (optional) */
    /* transform: translateY(-50%) translateX(20px); */ /* Uncomment if you want a slide */
}

/* Show on hover (for devices that support hover - primarily desktop) */
body:hover .call-us-button { /* Target hover on body to trigger visibility */
    opacity: 1;
    visibility: visible;
    /* Ensure smooth transition on reveal too */
    transition: opacity 0.3s ease-in-out, box-shadow 0.3s ease-in-out;
     /* Bring it back on screen if using the translateX transform */
    /* transform: translateY(-50%) translateX(0); */
}

/* --- Mobile Responsiveness --- */
/* On smaller screens (Bootstrap's 'md' breakpoint is 768px) */
@media (max-width: 767.98px) {
    .call-us-button {
        /* Always visible on mobile - override desktop hiding */
        opacity: 1;
        visibility: visible;
        transform: translateY(-50%); /* Ensure transform is reset if translateX was used */

        /* Optional: Adjust size/padding for smaller screens */
        padding: 12px 6px;
        font-size: 0.9rem;

        /* The box-shadow defined above will apply here automatically. */
        /* If you wanted NO shadow specifically on mobile, you'd add: */
        /* box-shadow: none; */

        /* Optional: Move slightly away from the edge if needed */
        /* right: 5px; */
        /* border-radius: 8px; Add back right radius if moved from edge */
    }

     /* Disable the body hover effect on mobile */
     body:hover .call-us-button {
       /* No changes needed here as the base style is now visible */
    }
}

/* Optional: Style the text span directly if needed */
.call-us-button span {
   display: inline-block; /* Needed for potential transforms */
   /* Example: If writing-mode isn't enough, you could rotate the span */
   /* transform: rotate(90deg); */
}