/* Chat widget container */
.chat-widget {
    position: fixed !important;
    right: 1rem !important;
    bottom: 1rem !important;
    z-index: 9999 !important;
    pointer-events: none !important; /* Prevent interaction when hidden */
}

/* Chat bubble */
.chat-widget--bubble {
    visibility: hidden !important;  /* Hide the widget */
    opacity: 0 !important;
    transform: translateY(3rem) scale(0.8) !important;
    display: block !important;
    width: 92vw !important;
    max-width: 360px !important;
    position: absolute !important;
    right: 15px !important;
    bottom: 5.5rem !important;
    background: linear-gradient(to bottom right, #ffffff, #f9f9f9) !important;
    border-radius: 12px !important;
    box-shadow: 0 12px 28px rgba(0, 0, 0, 0.25) !important;
    transform-origin: bottom right !important;
    transition: opacity 400ms ease, transform 400ms ease !important;
    padding: 0.6rem !important;
    font-family: "Segoe UI", sans-serif !important;
    animation: fadeInUp 0.5s ease-out !important;
    z-index: -1 !important;
    pointer-events: none !important; /* Prevent interactions when hidden */
}

/* Active bubble */
.chat-widget--bubble.-active {
    visibility: visible !important;  /* Show the widget */
    opacity: 1 !important;
    transform: translateY(0) scale(1) !important;
    pointer-events: auto !important;  /* Enable interactions when visible */
}

/* Close button, links, and buttons inside the bubble */
.chat-widget--bubble a,
.chat-widget--bubble .btn,
.chat-widget--bubble .close-button {
    pointer-events: auto !important;  /* Enable clickable elements inside the bubble */
}

/* Chat widget button */
.chat-widget--button {
    background-color: #03685c !important;
    position: fixed !important;
    right: 0.5rem !important;
    bottom: 3rem !important;
    width: 55px !important;
    height: 55px !important;
    border-radius: 50% !important;
    border: none !important;
    text-align: center !important;
    line-height: 55px !important;
    z-index: 10000 !important;
    cursor: pointer !important;
    box-shadow: 0 6px 20px rgba(0, 0, 0, 0.25) !important;
    transition: background-color 0.3s ease !important;
}

.chat-widget--button:hover {
    background-color: #fd7e14 !important;
}

/* Icon inside the button */
.chat-widget--icon {
    width: 26px !important;
    height: 26px !important;
}

.chat-widget--icon path {
    fill: white !important;
}

/* Close button styling */
.close-button {
    position: absolute !important;
    top: 10px !important;
    right: 10px !important;
    background-color: #ff3d3d !important;
    border: none !important;
    color: #fff !important;
    border-radius: 50% !important;
    width: 28px !important;
    height: 28px !important;
    font-size: 14px !important;
    line-height: 28px !important;
    cursor: pointer !important;
    box-shadow: 0 2px 6px rgba(0,0,0,0.2) !important;
}

/* Chat content */
.chat-widget--bubble p {
    font-size: 0.92rem !important;
    color: #333 !important;
    text-align: center !important;
    margin-bottom: 1rem !important;
}

.chat-widget--bubble .row {
    display: flex !important;
    flex-wrap: wrap !important;
    justify-content: center !important;
    gap: 0.5rem !important;
    margin-bottom: 0.5rem !important;
}

.chat-widget--bubble .col-6 {
    flex: 1 1 48% !important;
    display: flex !important;
    justify-content: center !important;
}

.chat-widget--bubble .btn {
    font-size: 0.85rem !important;
    padding: 0.45rem 0.8rem !important;
    white-space: nowrap !important;
    border-radius: 6px !important;
    width: auto !important;
    max-width: 100% !important;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.15) !important;
    transition: transform 0.2s ease !important;
    background-color: #03685c !important;
    border: none !important;
    color: #fff !important;
}

.chat-widget--bubble .btn:hover {
    transform: translateY(-2px) !important;
}

.chat-widget--bubble .d-flex.justify-content-center {
    margin-top: 0.5rem !important;
}

.chat-widget--bubble h6 {
    font-size: 0.9rem !important;
    margin: 0.4rem 0 !important;
    text-align: center !important;
}

.chat-widget--bubble hr {
    margin: 0.5rem 0 !important;
}

.chat-widget--bubble a.chat-link {
    text-decoration: none !important;
}

/* Allow links and buttons inside the widget to be clickable */
.chat-widget--bubble a,
.chat-widget--bubble .btn {
    pointer-events: auto !important;  /* Enable clickable elements inside the bubble */
}

/* Intro section */
.chat-intro {
    display: flex !important;
    flex-wrap: wrap !important;
    margin-bottom: 1rem !important;
}

.chat-intro .intro-img {
    width: 50% !important;
}

.chat-intro .intro-img img {
    width: 80% !important;
    height: auto !important;
    border-radius: 8px !important;
    object-fit: cover !important;
}

.chat-intro .intro-text {
    width: 50% !important;
    display: flex !important;
    flex-direction: column !important;
    justify-content: center !important;
    padding-left: 10px !important;
}

@keyframes fadeInUp {
    0% {
        opacity: 0;
        transform: translateY(20px) scale(0.95);
    }
    100% {
        opacity: 1;
        transform: translateY(0) scale(1);
    }
}

.action-btn {
    font-size: 0.9rem !important;
    padding: 0.45rem 1rem !important;
    min-width: 120px !important;
    max-width: 100% !important;
    white-space: nowrap !important;
    border-radius: 6px !important;
    box-shadow: 0 2px 10px rgba(0,0,0,0.15) !important;
    transition: transform 0.2s ease, box-shadow 0.2s ease !important;
    background-color: #03685c !important;
    color: white !important;
    border: none !important;
}

.action-btn:hover {
    transform: translateY(-2px) !important;
    box-shadow: 0 4px 12px rgba(0,0,0,0.2) !important;
    background-color: #fd7e14 !important;
}

.chat-link {
    display: flex !important;
    align-items: center;
    justify-content: center;
}