/*
 * CSS Styling for the Inquiry Popup
 * Insert this inside your <style> tags in the <head> section of your index.html
 */
body {
    padding-bottom: 80px; /* Make space for the sticky popup to avoid content overlap */
}

/* Base styles for the sticky container */
.inquiry-container {
    position: fixed;
    bottom: 20px; /* Distance from the bottom edge of the viewport */
    z-index: 1000; /* Ensures the popup is above most other page content */
    font-family: Arial, sans-serif;
    transition: opacity 0.3s ease, visibility 0.3s ease;
}

/* Default position for desktop (larger screens) - LEFT */
.inquiry-container {
    left: 20px; /* Position on the left for desktop */
    right: auto; /* Ensure right is not set if left is used */
}

/* Media Query for Mobile (smaller screens) - RIGHT */
/* You can adjust '768px' to your website's mobile breakpoint */
@media (max-width: 768px) {
    .inquiry-container {
        right: 20px; /* Position on the right for mobile */
        left: auto; /* Ensure left is not set if right is used */
    }
}

/* Style for when the entire inquiry button container should be hidden */
.inquiry-container.hidden {
    opacity: 0;
    visibility: hidden;
    pointer-events: none; /* Makes the hidden element unclickable */
}

/* Styles for the main button that opens the form */
.inquiry-toggle-button {
    background-color: #D29654; /* Green background */
    color: white;
    width: 255px; /* Initial full width as per buttontest.html */
    height: 60px; /* Initial height as per buttontest.html */
    padding: 0 20px; /* Match padding for text and icon alignment */
    border: none;
    border-radius: 30px; /* Pill shape initially */
    cursor: pointer;
    font-size: 1em;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2); /* Subtle shadow for depth */
    display: flex;
    align-items: center;
    justify-content: flex-start; /* Align content to the left */
    gap: 10px; /* Space between icon and text */
    /* MODIFIED: Transition properties for smooth collapse/expand - Removed gap from here to prevent icon jump */
    transition: width 0.75s ease, background-color 0.5s ease, transform 0.5s ease,
                padding 0.5s ease, border-radius 0.5s ease,
                justify-content 0.5s ease; /* Keep justify-content transition */
    outline: none; /* Removes the focus outline when clicked */
    position: relative; /* Essential for positioning the permanent close button */
    overflow: hidden; /* IMPORTANT for text hiding during collapse */
    white-space: nowrap; /* Prevent text wrapping */
}

.inquiry-toggle-button:hover {
    background-color: #AA7A44; /* Darker green on hover */
    transform: translateY(-2px); /* Slight upward lift on hover */
}

/* Styles for the SVG icon inside the button */
.inquiry-toggle-button svg {
    /* ADDED: Transition for transform to smoothly move the icon */
    transition: transform 0.75s ease; /* Match button width transition */
    flex-shrink: 0; /* Prevent icon from shrinking */
}


/* Styles for the text inside the button */
.inquiry-toggle-button .button-text {
    /* MODIFIED: Text transition for opacity and width */
    transition: opacity 0.3s ease 0.4s, width 0.3s ease 0.4s, margin-left 0.4s ease 0.3s; /* Delay opacity and width, and add margin-left transition */
    opacity: 1; /* Initially visible */
    width: auto; /* Allow text to take natural width */
    flex-shrink: 0; /* Prevent text from shrinking prematurely */
    margin-left: 0; /* Default spacing */
    font-weight: 550;
}

/* --- ADDED: Collapsed state for the button --- */
.inquiry-toggle-button.collapsed {
    width: 60px; /* Target width for a perfect circle */
    padding: 0; /* Remove padding when collapsed for true circle */
    border-radius: 30px; /* Ensure it's perfectly round */
    justify-content: center; /* Center the icon when text is gone */
}

.inquiry-toggle-button.collapsed .button-text {
    opacity: 0; /* Hide text */
    width: 0; /* Collapse text width */
    overflow: hidden; /* Ensure text is hidden */
    margin-left: 0; /* Ensure no margin when collapsed */
    transition: opacity 0.3s ease, width 0.3s ease, margin-left 0.3s ease; /* No delay when collapsing */
}

/* ADDED: When collapsed, move the SVG to the center.
   This specific transformation ensures the icon is perfectly centered in the 60px circle.
   The `calc` ensures it moves relative to its original starting point within the button.
*/
.inquiry-toggle-button.collapsed svg {
    transform: translateX(calc(50% - 7.5px)); /* Adjust 12px if your SVG is not 24px wide, it's half of SVG width */
}


/* Shaking Animation for the shrunk circle */
@keyframes shake {
    0%, 100% { transform: translateX(0); }
    15% { transform: translateX(-10px); } /* Increased displacement */
    30% { transform: translateX(10px); }  /* Increased displacement */
    45% { transform: translateX(-10px); } /* Increased displacement */
    60% { transform: translateX(10px); }  /* Increased displacement */
    75% { transform: translateX(-10px); } /* Increased displacement */
    90% { transform: translateX(10px); }  /* Increased displacement */
}

/* NOTE: The inquiry-container.shrunk class is not being used in your JS.
   The shake-animation class is applied directly to inquiry-toggle-button.
   So, the selector should be adjusted for the shake animation to work.
*/
.inquiry-toggle-button.shake-animation {
    animation: shake 0.3s ease-in-out; /* Reduced duration for more abruptness */
    animation-iteration-count: 1; /* Only shake once per trigger */
}


/* Desktop Hover (When shrunk, expand on hover) */
@media (min-width: 769px) { /* Apply only for desktop */
    .inquiry-toggle-button.collapsed:hover { /* Only apply when button is collapsed */
        width: 250px; /* Expand back to original width */
        padding: 0 20px; /* Restore original padding */
        border-radius: 30px; /* Restore semi-circle shape */
        justify-content: flex-start; /* Align content to start when expanded */
    }

    .inquiry-toggle-button.collapsed:hover .button-text { /* Only apply when button is collapsed */
        opacity: 1; /* Show text */
        width: auto; /* Restore text width */
        margin-left: 10px; /* Restore gap as margin-left */
    }

    /* Reset SVG transform on hover when collapsed to expand */
    .inquiry-toggle-button.collapsed:hover svg {
        transform: translateX(0); /* Move SVG back to its original position */
    }
}

/* Mobile Touch Hold (Expand on touch hold) */
/* This class will be added by JS on touch hold */
@media (max-width: 768px) {
    .inquiry-toggle-button.expanded-mobile { /* Target the expanded-mobile class */
        width: 250px; /* Expand to original width */
        padding: 0 20px; /* Restore original padding */
        border-radius: 30px; /* Restore semi-circle shape */
        justify-content: flex-start; /* Align content to start when expanded */
    }

    .inquiry-toggle-button.expanded-mobile .button-text {
        opacity: 1; /* Show text */
        width: auto; /* Restore text width */
        margin-left: 10px; /* Restore gap as margin-left */
    }

    /* Reset SVG transform on touch hold to expand */
    .inquiry-toggle-button.expanded-mobile svg {
        transform: translateX(0); /* Move SVG back to its original position */
    }
}


/* Styles for the permanent close button - now positioned relative to inquiry-toggle-button again */
.permanent-close-button {
    position: absolute;
    top: -5px; /* Adjust vertical position relative to the button's top edge */
    right: -5px; /* Adjust horizontal position relative to the button's right edge */
    background-color: #a0a0a0; /* Gray background */
    color: white;
    font-size: 14px;
    width: 20px;
    height: 20px;
    border-radius: 30px; /* Makes it perfectly circular */
    display: flex;
    justify-content: center;
    align-items: center;
    cursor: pointer;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
    z-index: 1001; /* Ensures it's on top of the toggle button and its contents */
    opacity: 0.8;
    transition: opacity 0.2s ease, background-color 0.2s ease;
}

.permanent-close-button:hover {
    opacity: 1;
    background-color: #c82333; /* Darker red on hover */
}


/* NEW: Styles for the new mobile buttons container */
.mobile-button-options {
    position: absolute; /* Positions it relative to its parent (.inquiry-container) */
    bottom: calc(100% + 15px); /* Positions it above the toggle button with a 15px gap */
    left: 50%; /* Center it horizontally */
    transform: translateX(-50%); /* Adjust for horizontal centering */
    display: flex; /* Always use flexbox */
    flex-direction: column;
    gap: 10px; /* Space between the two buttons */
    /* NEW: Use opacity and pointer-events for smooth hide/show */
    opacity: 0;
    pointer-events: none; /* Make it non-interactive when hidden */
    transition: opacity 0.3s ease;
    z-index: 999; /* Below the permanent close button but above other content */
}

/* Show the mobile buttons when the main container has the 'active' class */
.inquiry-container.active .mobile-button-options {
    opacity: 1;
    pointer-events: auto; /* Make it interactive when active */
}

/* Styling for the individual buttons */
.option-button {
    width: 200px;
    height: 50px;
    background-color: #D29654;
    color: white;
    border: none;
    border-radius: 25px;
    font-size: 1em;
    font-weight: bold;
    text-decoration: none; /* Remove underline for links */
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 10px; /* Added for spacing between icon and text */
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
    transition: background-color 0.3s ease;
    white-space: nowrap; /* Prevent text wrapping */
}

/* New CSS to style the Font Awesome icons */
.option-button i.fa {
    font-size: 22px;
    color: white; /* Match text color */
}

.option-button:hover {
    background-color: #AA7A44;
}

.option-button.whatsapp-button {
    background-color: #25D366; /* WhatsApp green */
}

.option-button.whatsapp-button:hover {
    background-color: #21BE5C; /* Darker WhatsApp green on hover */
}

/* New classes for specific button colors */
.option-button.call-us-button {
    background-color: #007bff; /* Blue color for Call Us */
}

/* Hover effects for the new button classes */
.option-button.call-us-button:hover {
    background-color: #006fe5; /* Darker blue on hover */
}
