/* ===========================================
 LIVE CHAT FLOATING BUTTON SYSTEM
 Modern Accordion-Style Design
 Click 1 button = opens that, closes others
 =========================================== */

.live-chat {
 position: fixed !important;
 bottom: 24px !important;
 right: 24px !important;
 top: auto !important;
 left: auto !important;
 z-index: 2147483647 !important; /* Maximum z-index */
 display: flex !important;
 flex-direction: column !important; /* Normal top-to-bottom (toggle at bottom) */
 align-items: flex-end !important;
 gap: 12px;
 font-family: var(--font-family);
 pointer-events: none; /* Container doesn't block clicks */
}

.live-chat > * {
 pointer-events: auto; /* But children are clickable */
}

/* Main Toggle Button */
.live-chat__toggle {
 position: relative;
 display: flex;
 align-items: center;
 justify-content: center;
 width: 68px;
 height: 68px;
 border-radius: 50%;
 background: linear-gradient(135deg, #1264f4 0%, #061947 100%);
 box-shadow: 0 8px 24px rgba(18, 100, 244, 0.4), 0 4px 8px rgba(0, 0, 0, 0.1);
 cursor: pointer;
 transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
 color: #fff;
 border: none;
}

.live-chat__toggle:hover {
 transform: scale(1.08);
 box-shadow: 0 12px 32px rgba(18, 100, 244, 0.5), 0 6px 12px rgba(0, 0, 0, 0.15);
}

.live-chat__toggle:active {
 transform: scale(0.96);
}

/* Chat Bubble Icon */
.live-chat__icon {
 width: 32px;
 height: 32px;
 stroke: #fff;
 stroke-width: 2.2;
 fill: none;
 transition: transform 0.3s ease;
}

.live-chat__toggle.is-open .live-chat__icon {
 transform: rotate(90deg);
}

/* Pulse Rings (only when closed) */
.live-chat__pulse {
 position: absolute;
 inset: 0;
 border-radius: 50%;
 background: #1264f4;
 opacity: 0.6;
 animation: live-chat-pulse 2s infinite;
 pointer-events: none;
}

.live-chat__pulse--2 {
 animation-delay: 1s;
}

.live-chat.is-open .live-chat__pulse {
 display: none;
}

@keyframes live-chat-pulse {
 0% { transform: scale(1); opacity: 0.6; }
 100% { transform: scale(1.8); opacity: 0; }
}

/* Notification Badge on Main Button */
.live-chat__badge {
 position: absolute;
 top: -4px;
 right: -4px;
 min-width: 22px;
 height: 22px;
 padding: 0 6px;
 display: flex;
 align-items: center;
 justify-content: center;
 border-radius: 999px;
 background: #ff3b30;
 color: #fff;
 font-size: 12px;
 font-weight: 700;
 box-shadow: 0 2px 6px rgba(0, 0, 0, 0.2);
 border: 2px solid #fff;
 animation: live-chat-bounce 2s ease-in-out infinite;
}

.live-chat.is-open .live-chat__badge {
 display: none;
}

@keyframes live-chat-bounce {
 0%, 100% { transform: translateY(0); }
 50% { transform: translateY(-4px); }
}

/* ===========================================
 CHAT OPTIONS (Tawk.to & WhatsApp)
 =========================================== */
.live-chat__options {
 display: flex;
 flex-direction: column;
 gap: 12px;
 align-items: flex-end;
 margin-bottom: 8px;
}

/* Individual Chat Option Button */
.live-chat__option {
 position: relative;
 display: flex;
 align-items: center;
 gap: 12px;
 padding: 12px 20px 12px 16px;
 background: #fff;
 border-radius: 999px;
 box-shadow: 0 8px 24px rgba(7, 19, 61, 0.18), 0 2px 6px rgba(0, 0, 0, 0.08);
 text-decoration: none;
 color: #07133d;
 font-size: 14px;
 font-weight: 700;
 white-space: nowrap;
 cursor: pointer;
 border: none;
 transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
 opacity: 0;
 transform: translateY(20px) scale(0.8); /* Start BELOW the toggle */
 pointer-events: none;
}

/* Open state - slide UP into view (from below toggle) */
.live-chat.is-open .live-chat__option {
 opacity: 1;
 transform: translateY(0) scale(1);
 pointer-events: auto;
}

/* Stagger animation */
.live-chat__option:nth-child(1) { transition-delay: 0.05s; }
.live-chat__option:nth-child(2) { transition-delay: 0.10s; }
.live-chat__option:nth-child(3) { transition-delay: 0.15s; }

.live-chat__option:hover {
 transform: translateY(-2px) scale(1.02);
 box-shadow: 0 12px 32px rgba(7, 19, 61, 0.25), 0 4px 8px rgba(0, 0, 0, 0.12);
}

/* Icon inside chat option */
.live-chat__option-icon {
 display: flex;
 align-items: center;
 justify-content: center;
 width: 36px;
 height: 36px;
 border-radius: 50%;
 flex-shrink: 0;
}

.live-chat__option-icon svg {
 width: 22px;
 height: 22px;
}

/* Tawk.to specific - Blue/Purple */
.live-chat__option--tawkto .live-chat__option-icon {
 background: linear-gradient(135deg, #1264f4 0%, #0a3fb8 100%);
}

.live-chat__option--tawkto .live-chat__option-icon svg {
 fill: #fff;
}

.live-chat__option--tawkto:hover {
 background: linear-gradient(135deg, #1264f4 0%, #0a3fb8 100%);
 color: #fff;
}

/* WhatsApp specific - Green */
.live-chat__option--whatsapp .live-chat__option-icon {
 background: linear-gradient(135deg, #25d366 0%, #128c7e 100%);
}

.live-chat__option--whatsapp .live-chat__option-icon svg {
 fill: #fff;
}

.live-chat__option--whatsapp:hover {
 background: linear-gradient(135deg, #25d366 0%, #128c7e 100%);
 color: #fff;
}

/* Phone specific - Orange (optional) */
.live-chat__option--phone .live-chat__option-icon {
 background: linear-gradient(135deg, #ff5b16 0%, #e63d00 100%);
}

.live-chat__option--phone .live-chat__option-icon svg {
 fill: #fff;
 stroke: #fff;
}

.live-chat__option--phone:hover {
 background: linear-gradient(135deg, #ff5b16 0%, #e63d00 100%);
 color: #fff;
}

/* Option text */
.live-chat__option-text {
 display: flex;
 flex-direction: column;
 align-items: flex-start;
}

.live-chat__option-title {
 font-size: 14px;
 font-weight: 700;
 line-height: 1.2;
}

.live-chat__option-sub {
 font-size: 11px;
 font-weight: 500;
 opacity: 0.7;
 margin-top: 2px;
}

/* Online dot indicator */
.live-chat__option-status {
 display: inline-block;
 width: 8px;
 height: 8px;
 border-radius: 50%;
 background: #25d366;
 margin-right: 6px;
 box-shadow: 0 0 0 3px rgba(37, 211, 102, 0.2);
 animation: live-chat-dot-pulse 1.5s ease-in-out infinite;
}

@keyframes live-chat-dot-pulse {
 0%, 100% { opacity: 1; }
 50% { opacity: 0.4; }
}

/* Arrow indicator on the right */
.live-chat__option-arrow {
 width: 16px;
 height: 16px;
 stroke: currentColor;
 stroke-width: 2;
 fill: none;
 opacity: 0.5;
 margin-left: 4px;
}

/* ===========================================
 RESPONSIVE
 =========================================== */
@media (max-width: 768px) {
 .live-chat {
 bottom: 16px;
 right: 16px;
 gap: 10px;
 }

 .live-chat__toggle {
 width: 56px;
 height: 56px;
 }

 .live-chat__icon {
 width: 28px;
 height: 28px;
 }

 .live-chat__option {
 padding: 10px 16px 10px 12px;
 font-size: 13px;
 }

 .live-chat__option-icon {
 width: 32px;
 height: 32px;
 }

 .live-chat__option-icon svg {
 width: 20px;
 height: 20px;
 }
}

@media (max-width: 480px) {
 .live-chat {
 bottom: 12px;
 right: 12px;
 }

 .live-chat__toggle {
 width: 52px;
 height: 52px;
 }

 .live-chat__icon {
 width: 26px;
 height: 26px;
 }

 .live-chat__option {
 padding: 9px 14px 9px 10px;
 font-size: 12px;
 }

 .live-chat__option-icon {
 width: 30px;
 height: 30px;
 }

 .live-chat__option-icon svg {
 width: 18px;
 height: 18px;
 }

 .live-chat__option-sub {
 display: none; /* Hide subtitle on small screens */
 }
}

/* Reduce motion for accessibility */
@media (prefers-reduced-motion: reduce) {
 .live-chat__pulse,
 .live-chat__badge,
 .live-chat__option-status {
 animation: none;
 }

 .live-chat__option,
 .live-chat__toggle,
 .live-chat__icon {
 transition: none;
 }
}