/* FTW Sticky WhatsApp Button Styles */

.ftw-sticky-button {
    position: fixed;
    z-index: 9999;
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", sans-serif;
}

/* Position Classes */
.ftw-sticky-button.ftw-position-bottom-right {
    bottom: 20px;
    right: 20px;
}

.ftw-sticky-button.ftw-position-bottom-left {
    bottom: 20px;
    left: 20px;
}

.ftw-sticky-button.ftw-position-top-right {
    top: 20px;
    right: 20px;
}

.ftw-sticky-button.ftw-position-top-left {
    top: 20px;
    left: 20px;
}

/* Size Classes */
.ftw-sticky-button.ftw-size-small .ftw-sticky-icon {
    width: 50px;
    height: 50px;
    font-size: 20px;
}

.ftw-sticky-button.ftw-size-medium .ftw-sticky-icon {
    width: 60px;
    height: 60px;
    font-size: 24px;
}

.ftw-sticky-button.ftw-size-large .ftw-sticky-icon {
    width: 70px;
    height: 70px;
    font-size: 28px;
}

/* Sticky Icon */
.ftw-sticky-icon {
    background: var(--ftw-sticky-color, #25D366);
    color: white;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
    transition: all 0.3s ease;
    position: relative;
    overflow: hidden;
}

.ftw-sticky-icon:hover {
    transform: scale(1.1);
    box-shadow: 0 6px 20px rgba(0, 0, 0, 0.25);
}

.ftw-sticky-icon:active {
    transform: scale(0.95);
}

/* Sticky Text */
.ftw-sticky-text {
    position: absolute;
    right: 100%;
    margin-right: 10px;
    background: rgba(0, 0, 0, 0.8);
    color: white;
    padding: 8px 12px;
    border-radius: 6px;
    font-size: 14px;
    white-space: nowrap;
    opacity: 0;
    visibility: hidden;
    transition: all 0.3s ease;
    pointer-events: none;
}

.ftw-sticky-icon:hover .ftw-sticky-text {
    opacity: 1;
    visibility: visible;
}

/* Popup Styles */
.ftw-sticky-popup {
    position: fixed;
    inset: 0; /* overlay backdrop for accessibility; will not block clicks inside panel */
    background: rgba(0, 0, 0, 0.0); /* transparent backdrop (tawk.to-like) */
    display: none;
    z-index: 10000;
}

.ftw-sticky-popup.active {
    display: block;
}

.ftw-sticky-popup-content {
    position: fixed;
    right: 20px;
    bottom: 100px; /* leave room for launcher */
    background: white;
    border-radius: 14px;
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.25);
    width: 360px;
    max-height: 100vh;
    overflow: hidden;
    transform: translateY(20px) scale(0.98);
    opacity: 0;
    transition: transform 0.25s ease, opacity 0.25s ease;
}

/* When chooser exists, hide form until selection */
.ftw-sticky-popup-content .ftw-sticky-chooser + #ftw-sticky-form { display: none; }

/* Inline chooser inside sticky popup */
.ftw-sticky-chooser { 
  border: 1px solid #e5e7eb; 
  border-radius: 10px; 
  padding: 12px; 
  margin: 10px; 
  background: #ffffff; 
}
.ftw-sticky-chooser .ftw-chooser-header { display:none; }
.ftw-sticky-chooser .ftw-chooser-list { display:flex; flex-direction:column; gap:12px; }
.ftw-sticky-chooser .ftw-chooser-card,
.ftw-sticky-chooser .ftw-chooser-item { display:flex; align-items:center; gap:12px; background:#f9fafb; border:1px solid #e5e7eb; border-radius:10px; padding:12px 14px; cursor:pointer; transition:all .2s ease; width:100%; text-align:left; }
.ftw-sticky-chooser .ftw-chooser-card:hover,
.ftw-sticky-chooser .ftw-chooser-item:hover { background:#f0fdf4; border-color:#25D366; box-shadow:0 4px 12px rgba(37,211,102,.15); }
.ftw-sticky-chooser .ftw-chooser-card:hover { background:#f0fdf4; border-color:#25D366; box-shadow:0 4px 12px rgba(37,211,102,.15); }
.ftw-sticky-chooser .ftw-chooser-avatar { width:56px; height:56px; border-radius:50%; position:relative; overflow:visible; border:2px solid #e5e7eb; display:flex; align-items:center; justify-content:center; flex-shrink:0; }
.ftw-sticky-chooser .ftw-chooser-avatar img { width:100%; height:100%; object-fit:cover; border-radius:50%; }
.ftw-sticky-chooser .ftw-wa-badge { position:absolute; right:-2px; bottom:-2px; width:16px; height:16px; background:#25D366; border:2px solid #ffffff; border-radius:50%; z-index:2; box-shadow:0 0 0 1px rgba(0,0,0,.05); }
.ftw-sticky-chooser .ftw-chooser-initial { background:#25D366; color:#fff; width:100%; height:100%; display:flex; align-items:center; justify-content:center; font-weight:700; }
.ftw-sticky-chooser .ftw-chooser-info { display:flex; align-items:center; gap:8px; flex:1; }
.ftw-sticky-chooser .ftw-chooser-name { font-weight:700; color:#111827; font-size:16px; display:block; }
.ftw-sticky-chooser .ftw-chooser-status { font-size:12px; color:#6b7280; display:block; }
.ftw-sticky-chooser .ftw-chooser-status.ftw-status-online { color:#10b981; }
.ftw-sticky-chooser .ftw-chooser-status.ftw-status-busy { color:#f59e0b; }
.ftw-sticky-chooser .ftw-chooser-status.ftw-status-offline { color:#ef4444; }

.ftw-sticky-popup.active .ftw-sticky-popup-content {
    transform: translateY(0) scale(1);
    opacity: 1;
}

/* Popup Header */
.ftw-sticky-popup-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 16px 16px;
    background: #f9fafb;
}

.ftw-sticky-header-text h3 {
    margin: 0;
    font-size: 16px;
    font-weight: 700;
    color: #111827;
}

.ftw-sticky-subtitle {
    margin-top: 2px;
    font-size: 12px;
    color: #6b7280;
}

/* Form wrapper inside content */
.ftw-sticky-form {
    padding: 10px;
    overflow-y: auto;
}

/* Launcher position tweaks so it resembles chat launcher spacing */
.ftw-sticky-button.ftw-position-bottom-right { bottom: 20px; right: 20px; }
.ftw-sticky-button.ftw-position-bottom-left { bottom: 20px; left: 20px; }

/* Form Styles */
.ftw-sticky-form .ftw-form-group {
    margin-bottom: 15px;
}

.ftw-sticky-form label {
    display: block;
    margin-bottom: 8px;
    font-weight: 500;
    color: #374151;
    font-size: 14px;
}

.ftw-sticky-form .ftw-required {
    color: #dc2626;
    margin-left: 2px;
}

.ftw-sticky-form input,
.ftw-sticky-form textarea,
.ftw-sticky-form select {
    width: 100%;
    padding: 12px 16px;
    border: 2px solid #d1d5db;
    border-radius: 8px;
    font-size: 14px;
    transition: all 0.2s ease;
    box-sizing: border-box;
}

.ftw-sticky-form input:focus,
.ftw-sticky-form textarea:focus,
.ftw-sticky-form select:focus {
    outline: none;
    border-color: var(--ftw-sticky-color, #25D366);
    box-shadow: 0 0 0 3px rgba(37, 211, 102, 0.1);
}

.ftw-sticky-form textarea {
    resize: vertical;
    min-height: 80px;
}

.ftw-sticky-form select {
    background: white;
    cursor: pointer;
}

/* Submit Button */
.ftw-submit-btn {
    background: var(--ftw-sticky-color, #25D366);
    color: white;
    border: none;
    padding: 14px 24px;
    border-radius: 8px;
    font-size: 16px;
    font-weight: 600;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    width: 100%;
    transition: all 0.2s ease;
}

.ftw-submit-btn:hover {
    background: #128C7E;
    transform: translateY(-1px);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
}

.ftw-submit-btn:active {
    transform: translateY(0);
}

.ftw-submit-btn svg {
    flex-shrink: 0;
}


/* Animations */
@keyframes ftwFadeIn {
    from {
        opacity: 0;
    }
    to {
        opacity: 1;
    }
}

@keyframes ftwSlideUp {
    from {
        opacity: 0;
        transform: translateY(20px) scale(0.95);
    }
    to {
        opacity: 1;
        transform: translateY(0) scale(1);
    }
}

/* Responsive Design */
@media (max-width: 768px) {
    .ftw-sticky-button.ftw-position-bottom-right,
    .ftw-sticky-button.ftw-position-bottom-left {
        bottom: 15px;
    }
    
    .ftw-sticky-button.ftw-position-top-right,
    .ftw-sticky-button.ftw-position-top-left {
        top: 15px;
    }
    
    .ftw-sticky-button.ftw-position-bottom-right,
    .ftw-sticky-button.ftw-position-top-right {
        right: 15px;
    }
    
    .ftw-sticky-button.ftw-position-bottom-left,
    .ftw-sticky-button.ftw-position-top-left {
        left: 15px;
    }
    
    .ftw-sticky-popup-content {
        width: 95%;
        margin: 20px;
    }
    
    .ftw-sticky-popup-header {
        padding: 16px 20px;
    }
    
    .ftw-sticky-popup-header h3 {
        font-size: 16px;
    }
    
    .ftw-sticky-form {
        padding: 20px;
    }
    
    .ftw-sticky-form .ftw-form-group {
        margin-bottom: 16px;
    }
    
    .ftw-sticky-form input,
    .ftw-sticky-form textarea,
    .ftw-sticky-form select {
        padding: 10px 14px;
        font-size: 16px; /* Prevent zoom on iOS */
    }
    
    .ftw-submit-btn {
        padding: 12px 20px;
        font-size: 15px;
    }
}

@media (max-width: 480px) {
    .ftw-sticky-button.ftw-size-large .ftw-sticky-icon {
        width: 60px;
        height: 60px;
        font-size: 24px;
    }
    
    .ftw-sticky-popup-content {
        right: 10px;
        left: 10px;
        width: auto;
        bottom: 90px;
        border-radius: 10px;
    }
    
    .ftw-sticky-popup-header {
        border-radius: 8px 8px 0 0;
    }
}

/* Center container on mobile/tablet and set width to 90% */
@media (max-width: 768px) {
	.ftw-sticky-popup-content {
		left: 50% !important;
		right: auto !important;
		top: 50% !important;
		bottom: auto !important;
		width: 90% !important;
		max-height: 85vh !important;
		transform: translate(-50%, -48%) scale(0.98) !important;
		border-radius: 12px !important;
	}
	.ftw-sticky-popup.active .ftw-sticky-popup-content {
		transform: translate(-50%, -50%) scale(1) !important;
	}
}

/* Dark Mode Support */
@media (prefers-color-scheme: dark) {
    /* removed per user request */
}

/* --- Professional refinements & responsive tweaks --- */

/* Elevation and borders */
.ftw-sticky-popup-content {
	border: 1px solid #e5e7eb;
	background-clip: padding-box;
}

/* Header controls accessibility */
.ftw-sticky-close:focus-visible {
	outline: 2px solid var(--ftw-sticky-color, #25D366);
	outline-offset: 2px;
}

/* Form spacing polish */
.ftw-sticky-form .ftw-form-group:last-child {
	margin-bottom: 0;
}

.ftw-sticky-form input:hover,
.ftw-sticky-form textarea:hover,
.ftw-sticky-form select:hover {
	border-color: #cbd5e1;
}

/* Subtle scrollbar styling (webkit) */
.ftw-sticky-popup-content::-webkit-scrollbar,
.ftw-sticky-form::-webkit-scrollbar {
	width: 10px;
}
.ftw-sticky-popup-content::-webkit-scrollbar-track,
.ftw-sticky-form::-webkit-scrollbar-track {
	background: transparent;
}
.ftw-sticky-popup-content::-webkit-scrollbar-thumb,
.ftw-sticky-form::-webkit-scrollbar-thumb {
	background-color: #cbd5e1;
	border-radius: 8px;
	border: 2px solid transparent;
	background-clip: padding-box;
}

/* Better mobile bottom sheet behavior */
@media (max-width: 768px) {
	.ftw-sticky-popup-content {
		right: 12px;
		left: 12px;
		bottom: calc(70px + env(safe-area-inset-bottom, 0));
		max-height: 78vh;
	}
	.ftw-sticky-form {
		padding: 14px;
	}
}

@media (max-width: 480px) {
	/* Bottom anchored, centered horizontally at 90% width */
	.ftw-sticky-popup-content {
		left: 50% !important;
		right: auto !important;
		top: auto !important;
		bottom: calc(60px + env(safe-area-inset-bottom, 0)) !important;
		width: 90% !important;
		max-height: 80vh !important;
		border-radius: 12px !important;
		transform: translate(-50%, 10px) scale(0.98) !important;
	}
	.ftw-sticky-popup.active .ftw-sticky-popup-content {
		transform: translate(-55%, 0) scale(1) !important;
	}
}

/* Dark mode refinements */
@media (prefers-color-scheme: dark) {
	.ftw-sticky-popup-content { border-color: #374151; }
	.ftw-sticky-form input:hover,
	.ftw-sticky-form textarea:hover,
	.ftw-sticky-form select:hover { border-color: #64748b; }
	.ftw-sticky-popup-content::-webkit-scrollbar-thumb,
	.ftw-sticky-form::-webkit-scrollbar-thumb { background-color: #4b5563; }
}

/* --- Final consolidated responsive overrides (clean and professional) --- */

/* Desktop defaults remain anchored bottom-right (already defined above) */

/* Tablet and down: center horizontally, bottom-anchored, clean animation */
@media (max-width: 1024px) {
	.ftw-sticky-popup-content {
		left: 50% !important;
		right: auto !important;
		top: auto !important;
		bottom: calc(80px + env(safe-area-inset-bottom, 0)) !important;
		width: 92% !important;
		max-height: 78vh !important;
		border-radius: 12px !important;
		transform: translate(-50%, 12px) scale(0.98) !important;
	}
	.ftw-sticky-popup.active .ftw-sticky-popup-content {
		transform: translate(-56%, 0) scale(1) !important;
	}
}

/* Mobile: slightly tighter, still centered and bottom-anchored */
@media (max-width: 480px) {
	.ftw-sticky-popup-content {
		bottom: calc(70px + env(safe-area-inset-bottom, 0)) !important;
		width: 90% !important;
		max-height: 80vh !important;
	}
	/* Ensure comfortable form spacing */
	.ftw-sticky-form { padding: 16px 16px 24px !important; }
	.ftw-submit-btn { margin-bottom: 18px !important; }
}

/* Ensure last form group has no bottom margin */
.ftw-sticky-form .ftw-form-group:last-child {
	margin-bottom: 0 !important;
}

.ftw-sticky-button.ftw-open .ftw-sticky-icon {
	opacity: 0;
	visibility: hidden;
	transform: scale(0.9);
	pointer-events: none;
}

/* Hide launcher completely when popup is open */
.ftw-sticky-button.ftw-open .ftw-sticky-icon {
	display: none !important;
}

/* Reduce popup offset when open to use more space */
.ftw-sticky-button.ftw-open .ftw-sticky-popup-content {
	bottom: 20px !important;
}

/* ensure layout reserve space to avoid jump */
.ftw-sticky-button.ftw-open { height: 0; }