:root{

    --popup-bg:#ffffff;
    --popup-text:#111827;
    --popup-input:#f3f4f6;
    --popup-border:#e5e7eb;
    --popup-primary:#5b5cf0;
    --popup-overlay:rgba(0,0,0,.65);
    --popup-shadow:0 20px 60px rgba(0,0,0,.25);
}

[data-bs-theme="dark"]{

    --popup-bg:#111827;
    --popup-text:#ffffff;
    --popup-input:#1f2937;
    --popup-border:#374151;
    --popup-overlay:rgba(0,0,0,.8);
    --popup-shadow:0 20px 60px rgba(0,0,0,.5);
}

.popup-btn{

    position:fixed;
    right:22px;
    bottom:22px;
    width:58px;
    height:58px;
    border:none;
    border-radius:50%;
    background:linear-gradient(135deg,#5b5cf0,#7c3aed);
    color:#fff;
    font-size:24px;
    cursor:pointer;
    z-index:9999;

    display:flex;
    align-items:center;
    justify-content:center;

    box-shadow:0 12px 30px rgba(91,92,240,.35);

    transition:.3s ease;
}

.popup-btn:hover{

    transform:translateY(-4px) scale(1.05);
}

.popup-overlay{

    position:fixed;
    inset:0;
    background:var(--popup-overlay);

    display:flex;
    align-items:center;
    justify-content:center;

    padding:20px;

    opacity:0;
    visibility:hidden;

    transition:.35s ease;

    z-index:99999;

    backdrop-filter:blur(6px);
}

.popup-overlay.active{

    opacity:1;
    visibility:visible;
}

.popup-box{

    width:100%;
    max-width:420px;

    background:var(--popup-bg);
    color:var(--popup-text);

    border-radius:24px;

    padding:28px;

    position:relative;

    border:1px solid var(--popup-border);

    box-shadow:var(--popup-shadow);

    transform:translateY(40px) scale(.95);

    opacity:0;

    transition:.35s ease;
}

.popup-overlay.active .popup-box{

    transform:translateY(0) scale(1);
    opacity:1;
}

.popup-close{

    position:absolute;
    top:14px;
    right:14px;

    width:38px;
    height:38px;

    border:none;
    border-radius:50%;

    background:var(--popup-input);

    color:var(--popup-text);

    font-size:24px;

    cursor:pointer;

    transition:.3s;
}

.popup-close:hover{

    transform:rotate(90deg);
}

.popup-header{

    margin-bottom:20px;
}

.popup-badge{

    display:inline-block;

    padding:7px 12px;

    border-radius:50px;

    background:rgba(91,92,240,.12);

    color:var(--popup-primary);

    font-size:12px;
    font-weight:600;

    margin-bottom:14px;
}

.popup-header h3{

    font-size:30px;
    margin-bottom:8px;
}

.popup-header p{

    color:#6b7280;
    font-size:14px;
    line-height:1.6;
}

.input-group{

    margin-bottom:14px;
}

.input-group input,
.input-group textarea{

    width:100%;

    border:none;

    background:var(--popup-input);

    border:1px solid var(--popup-border);

    border-radius:14px;

    padding:14px 16px;

    color:var(--popup-text);

    font-size:15px;

    outline:none;

    transition:.3s ease;
}

.input-group textarea{

    height:110px;
    resize:none;
}

.input-group input:focus,
.input-group textarea:focus{

    border-color:var(--popup-primary);

    box-shadow:0 0 0 4px rgba(91,92,240,.12);
}


.floating-stack {
	position: fixed;
	right: 22px;
	bottom: 22px;
	display: flex;
	flex-direction: column;
	gap: 12px;
	z-index: 99999;
}

/* Shared button style */
.popup-btn,
.float-btn {
	width: 58px;
	height: 58px;
	border-radius: 50%;
	display: flex;
	align-items: center;
	justify-content: center;
	font-size: 24px;
	color: #fff;
	border: none;
	cursor: pointer;
	text-decoration: none;

	background: linear-gradient(135deg,#5b5cf0,#7c3aed);
	box-shadow: 0 12px 30px rgba(91,92,240,.35);

	transition: .3s ease;
}

/* Hover only for desktop */
@media (hover: hover) {
	.popup-btn:hover,
	.float-btn:hover {
		transform: translateY(-4px) scale(1.05);
	}
}

/* WhatsApp */
.float-btn.whatsapp {
	background: linear-gradient(135deg,#25D366,#1ebe5d);
}

/* Call */
.float-btn.call {
	background: linear-gradient(135deg,#198754,#146c43);
}

/* Popup override */
.popup-btn {
	position: static;
}

/* =======================
   📱 MOBILE RESPONSIVE
======================= */
@media (max-width: 768px) {

	.floating-stack {
		right: 14px;
		bottom: 14px;
		gap: 10px;
	}

	.popup-btn,
	.float-btn {
		width: 52px;
		height: 52px;
		font-size: 22px;
	}
}

@media (max-width: 480px) {

	.floating-stack {
		right: 12px;
		bottom: 12px;
		gap: 8px;
	}

	.popup-btn,
	.float-btn {
		width: 48px;
		height: 48px;
		font-size: 20px;
	}
}
#submitBtn{

    width:100%;

    height:52px;

    border:none;
    border-radius:14px;

    background:linear-gradient(135deg,#5b5cf0,#7c3aed);

    color:#fff;

    font-size:15px;
    font-weight:600;

    cursor:pointer;

    position:relative;

    overflow:hidden;

    transition:.3s ease;
}

#submitBtn:hover{

    transform:translateY(-2px);
}

.btn-loader{

    display:none;
}

#submitBtn.loading .btn-text{

    display:none;
}

#submitBtn.loading .btn-loader{

    display:inline-block;
}

#formResponse{

    margin-top:14px;
    font-size:14px;
}

.success-msg{

    color:#16a34a;
}

.error-msg{

    color:#dc2626;
}

@media(max-width:480px){

    .popup-box{

        padding:24px 18px;
    }

    .popup-header h3{

        font-size:24px;
    }
}