/* ════════════════════════════════════════════════════════════
   Dunya Travel — Smart Floating Popup (global component)
   Small contextual assistant card anchored above the WhatsApp
   button. Never modal, never centered, never blocks content.
   ════════════════════════════════════════════════════════════ */

/* The smart popup replaces the legacy auto-bubble inside .wa-widget.
   (.whatsapp-widget .wa-bubble on visa/vip/accommodation is the round
   WhatsApp BUTTON itself — must stay visible, hence the scoped selector.) */
body.sp-on .wa-widget .wa-bubble { display: none !important; }

/* visa / vip / accommodation pages: .whatsapp-widget never had CSS, so its
   round WhatsApp button was hidden by the generic ".wa-bubble" rule in
   style.css. Restore it here so the popup has a visible anchor button. */
.whatsapp-widget { position: fixed; bottom: 30px; right: 30px; z-index: 9999; }
body[dir="rtl"] .whatsapp-widget { right: auto; left: 30px; }
.whatsapp-widget .wa-bubble {
    display: flex !important;
    align-items: center; justify-content: center;
    width: 60px; height: 60px;
    border-radius: 50%;
    background: #25D366;
    color: #FFFFFF;
    border: none;
    cursor: pointer;
    box-shadow: 0 10px 20px rgba(37, 211, 102, 0.3);
    transition: transform 0.25s ease;
}
.whatsapp-widget .wa-bubble:hover { transform: scale(1.07); }
@media (max-width: 768px) {
    .whatsapp-widget { bottom: 18px; right: 18px; }
    body[dir="rtl"] .whatsapp-widget { left: 18px; right: auto; }
}

.sp-card {
    position: fixed;
    bottom: 106px;
    right: 28px;
    z-index: 9998;
    width: 300px;
    max-width: calc(100vw - 32px);
    background: #FFFFFF;
    border: 1px solid #ECE9E1;
    border-radius: 18px;
    box-shadow: 0 18px 50px rgba(14, 59, 44, 0.14), 0 4px 14px rgba(0, 0, 0, 0.06);
    padding: 18px 18px 16px;
    font-family: 'Cairo', 'Segoe UI', Tahoma, sans-serif;
    opacity: 0;
    transform: translateY(14px);
    pointer-events: none;
    transition: opacity 0.35s ease, transform 0.35s ease;
}
.sp-card.sp-show { opacity: 1; transform: translateY(0); pointer-events: auto; }

body[dir="rtl"] .sp-card { right: auto; left: 28px; }

.sp-head { display: flex; align-items: center; gap: 11px; margin-bottom: 8px; }

.sp-ico {
    width: 38px; height: 38px; flex-shrink: 0;
    border-radius: 50%;
    background: rgba(14, 59, 44, 0.08);
    color: #0E3B2C;
    display: flex; align-items: center; justify-content: center;
}
.sp-ico svg { width: 20px; height: 20px; }

.sp-title {
    color: #0E3B2C;
    font-size: 0.95rem;
    font-weight: 800;
    line-height: 1.35;
    margin: 0;
    padding-inline-end: 18px;
}

.sp-text {
    color: #5F6B63;
    font-size: 0.84rem;
    line-height: 1.6;
    margin: 0 0 13px;
}

.sp-btn {
    display: flex; align-items: center; justify-content: center; gap: 8px;
    width: 100%;
    background: #C2913B;
    color: #FFFFFF;
    border: none;
    border-radius: 11px;
    padding: 11px 14px;
    font-family: inherit;
    font-size: 0.86rem;
    font-weight: 700;
    cursor: pointer;
    text-decoration: none;
    transition: background 0.25s ease, transform 0.25s ease;
}
.sp-btn:hover { background: #A6792B; transform: translateY(-1px); }
.sp-btn svg { width: 16px; height: 16px; flex-shrink: 0; }

.sp-alt {
    display: block;
    text-align: center;
    margin-top: 9px;
    color: #0E3B2C;
    font-size: 0.78rem;
    font-weight: 700;
    text-decoration: none;
}
.sp-alt:hover { text-decoration: underline; color: #A6792B; }

.sp-close {
    position: absolute;
    top: 10px;
    inset-inline-end: 12px;
    background: none;
    border: none;
    padding: 2px;
    cursor: pointer;
    color: #8D968F;
    font-size: 15px;
    line-height: 1;
    transition: color 0.2s;
}
.sp-close:hover { color: #0E3B2C; }

/* Mobile — smaller, sits above the WhatsApp button, clears the thumb zone */
@media (max-width: 768px) {
    .sp-card {
        width: 240px;
        bottom: 92px;
        right: 16px;
        padding: 14px 14px 12px;
        border-radius: 15px;
    }
    body[dir="rtl"] .sp-card { left: 16px; right: auto; }
    .sp-ico { width: 32px; height: 32px; }
    .sp-ico svg { width: 17px; height: 17px; }
    .sp-title { font-size: 0.86rem; }
    .sp-text { font-size: 0.78rem; margin-bottom: 10px; }
    .sp-btn { padding: 9px 12px; font-size: 0.8rem; }
}

@media (prefers-reduced-motion: reduce) {
    .sp-card { transition: opacity 0.2s ease; transform: none; }
}