/* =====================================================================
   Floating widgets — WhatsApp chat popup + language translator
   ===================================================================== */

/* ---------- Hide Google Translate's own UI (we use our own switcher) ---------- */
#google_translate_element, .goog-te-banner-frame, .skiptranslate iframe,
#goog-gt-tt, .goog-te-balloon-frame, .goog-tooltip, .goog-te-spinner-pos,
.VIpgJd-ZVi9od-ORHb-OEVmcd, .VIpgJd-ZVi9od-aZ2wEe-wOHMyf, .VIpgJd-yAWNEb-L7lbkb { display:none !important; }
html, body { top:0 !important; }
body > .skiptranslate { display:none !important; }
.goog-text-highlight { background:none !important; box-shadow:none !important; }

/* =====================================================================
   LANGUAGE SWITCHER — rectangular dropdown in the top bar (after the
   social icons) and inside the mobile menu drawer on phones
   ===================================================================== */
.sv-lang { position:relative; display:inline-flex; font-family:var(--font-body); }
.top-bar-social .sv-lang { margin-left:8px; padding-left:14px; border-left:1px solid rgba(255,255,255,0.2); }
.sv-lang-toggle {
    display:inline-flex; align-items:center; gap:7px; height:26px; padding:0 10px;
    background:rgba(255,255,255,0.08); color:#fff; border:1px solid rgba(255,255,255,0.3);
    border-radius:4px; cursor:pointer; font-family:var(--font-body); font-size:0.75rem; font-weight:700;
    letter-spacing:.3px; line-height:1; white-space:nowrap; transition:background .2s ease, border-color .2s ease;
}
.sv-lang-toggle:hover, .sv-lang.open .sv-lang-toggle { background:var(--accent-color); border-color:var(--accent-color); }
.sv-lang-toggle:focus-visible { outline:2px solid var(--accent-light); outline-offset:2px; }
.sv-lang-globe { font-size:0.8rem; color:var(--accent-light); }
.sv-lang-toggle:hover .sv-lang-globe, .sv-lang.open .sv-lang-globe { color:#fff; }
.sv-lang-flag { font-size:0.9rem; line-height:1; }
.sv-lang-caret { font-size:0.55rem; opacity:.8; transition:transform .25s ease; }
.sv-lang.open .sv-lang-caret { transform:rotate(180deg); }

.sv-lang-panel {
    position:absolute; top:calc(100% + 8px); right:0; z-index:10050;
    width:200px; max-height:min(65vh, 400px); overflow-y:auto; overscroll-behavior:contain;
    background:#fff; border-radius:6px; box-shadow:0 14px 40px rgba(0,0,0,0.25); border:1px solid rgba(0,0,0,0.06);
    opacity:0; visibility:hidden; transform:translateY(-6px);
    transition:opacity .2s ease, transform .2s ease, visibility .2s;
}
.sv-lang.open .sv-lang-panel { opacity:1; visibility:visible; transform:none; }
.sv-lang-panel ul { list-style:none; margin:0; padding:5px 0; }
.sv-lang-panel li button {
    display:flex; align-items:center; gap:10px; width:100%; padding:8px 14px;
    background:none; border:0; border-left:3px solid transparent; cursor:pointer;
    font-family:var(--font-body); font-size:0.84rem; color:var(--text-dark); text-align:left;
}
.sv-lang-panel li button:hover { background:rgba(45,106,46,0.07); border-left-color:var(--accent-color); }
.sv-lang-panel li button.active { color:var(--primary-color); font-weight:700; border-left-color:var(--accent-color); background:rgba(232,114,28,0.08); }
.sv-flag { font-size:1rem; line-height:1; width:20px; text-align:center; }

/* drawer copy: only on phones, where the top bar is hidden */
.sv-lang--drawer { display:none; }
@media (max-width:767px) {
    .mobile-close { justify-content:space-between !important; align-items:center; }
    .sv-lang--drawer { display:inline-flex; font-size:1rem; }
    .sv-lang--drawer .sv-lang-toggle { height:32px; padding:0 12px; font-size:0.78rem; }
    .sv-lang--drawer .sv-lang-panel { left:0; right:auto; width:min(220px, calc(100vw - 80px)); max-height:60vh; }
}

/* =====================================================================
   WHATSAPP CHAT
   ===================================================================== */
.sv-wa { position:fixed; right:22px; bottom:22px; z-index:9991; font-family:var(--font-body); }
.sv-wa-fab {
    position:relative; width:58px; height:58px; border-radius:50%; border:0; cursor:pointer;
    background:var(--whatsapp); color:#fff; font-size:1.9rem;
    display:flex; align-items:center; justify-content:center;
    box-shadow:0 8px 24px rgba(37,211,102,0.45); transition:transform .25s ease, background .25s ease;
}
.sv-wa-fab:hover { transform:scale(1.07); background:#1fb855; }
.sv-wa-fab::before { content:''; position:absolute; inset:0; border-radius:50%; background:var(--whatsapp); z-index:-1; animation:svPulse 2.2s ease-out infinite; }
.sv-wa.open .sv-wa-fab::before { animation:none; }
@keyframes svPulse { 0%{transform:scale(1);opacity:.6} 100%{transform:scale(1.7);opacity:0} }
.sv-wa-fab i { position:absolute; transition:transform .3s ease, opacity .3s ease; }
.sv-wa-ico-close { font-size:1.4rem; opacity:0; transform:rotate(-90deg); }
.sv-wa.open .sv-wa-ico-open { opacity:0; transform:rotate(90deg); }
.sv-wa.open .sv-wa-ico-close { opacity:1; transform:rotate(0); }

/* teaser bubble */
.sv-wa-teaser {
    position:absolute; right:70px; bottom:8px; width:max-content; max-width:230px;
    background:#fff; color:var(--text-dark); font-size:0.84rem; line-height:1.4;
    padding:11px 30px 11px 14px; border-radius:12px 12px 2px 12px; box-shadow:0 8px 26px rgba(0,0,0,0.18);
    opacity:0; visibility:hidden; transform:translateX(10px); transition:all .35s ease; cursor:pointer;
}
.sv-wa-teaser.show { opacity:1; visibility:visible; transform:none; }
.sv-wa.open .sv-wa-teaser { display:none; }
.sv-wa-teaser-x { position:absolute; top:4px; right:6px; border:0; background:none; font-size:1.1rem; line-height:1; color:#999; cursor:pointer; padding:2px 4px; }

/* panel */
.sv-wa-panel {
    position:absolute; right:0; bottom:74px; width:360px;
    max-height:min(600px, calc(100vh - 120px)); max-height:min(600px, calc(100dvh - 120px));
    display:flex; flex-direction:column; overflow:hidden;
    background:#fff; border-radius:16px; box-shadow:0 18px 50px rgba(0,0,0,0.28);
    opacity:0; visibility:hidden; transform:translateY(16px) scale(.97); transform-origin:bottom right;
    transition:opacity .28s ease, transform .28s ease, visibility .28s;
}
.sv-wa.open .sv-wa-panel { opacity:1; visibility:visible; transform:none; }

.sv-wa-head { display:flex; align-items:center; gap:12px; padding:14px 16px; background:linear-gradient(135deg, #075E54, #128C7E); color:#fff; flex-shrink:0; }
.sv-wa-avatar { position:relative; width:44px; height:44px; border-radius:50%; background:#fff; display:flex; align-items:center; justify-content:center; flex-shrink:0; }
.sv-wa-avatar img { width:100%; height:100%; object-fit:contain; border-radius:50%; padding:3px; }
.sv-wa-avatar i { color:var(--whatsapp); font-size:1.6rem; }
.sv-wa-online { position:absolute; right:0; bottom:1px; width:11px; height:11px; border-radius:50%; background:#4ade80; border:2px solid #0b7d6e; }
.sv-wa-title { flex:1; min-width:0; line-height:1.3; }
.sv-wa-title strong { display:block; font-size:0.98rem; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.sv-wa-title span { font-size:0.74rem; opacity:.85; }
.sv-wa-close { width:32px; height:32px; border-radius:50%; border:0; background:rgba(255,255,255,0.15); color:#fff; cursor:pointer; font-size:0.9rem; flex-shrink:0; }
.sv-wa-close:hover { background:rgba(255,255,255,0.3); }

.sv-wa-body {
    flex:1; overflow-y:auto; overscroll-behavior:contain; padding:16px 14px 10px;
    background-color:#ece5dd;
    background-image:radial-gradient(rgba(0,0,0,0.035) 1px, transparent 1px); background-size:14px 14px;
    display:flex; flex-direction:column; gap:8px;
}
.sv-wa-msg { max-width:86%; padding:9px 12px; font-size:0.86rem; line-height:1.5; border-radius:10px; box-shadow:0 1px 1px rgba(0,0,0,0.08); word-wrap:break-word; animation:svMsg .3s ease; }
.sv-wa-in  { align-self:flex-start; background:#fff; border-top-left-radius:2px; color:#222; }
.sv-wa-out { align-self:flex-end; background:#dcf8c6; border-top-right-radius:2px; color:#222; }
.sv-wa-msg .sv-wa-ask { display:inline-block; margin-top:6px; font-size:0.78rem; font-weight:700; color:#128C7E; }
.sv-wa-msg .sv-wa-ask:hover { text-decoration:underline; }
@keyframes svMsg { from{opacity:0;transform:translateY(6px)} to{opacity:1;transform:none} }

.sv-wa-faqs { display:flex; flex-direction:column; align-items:flex-end; gap:6px; margin-top:4px; }
.sv-wa-faq-label { align-self:center; font-size:0.68rem; text-transform:uppercase; letter-spacing:1px; color:#667; background:rgba(255,255,255,0.7); padding:3px 10px; border-radius:20px; margin-bottom:2px; }
.sv-wa-faq {
    max-width:90%; text-align:left; cursor:pointer; font-family:var(--font-body); font-size:0.82rem; line-height:1.35;
    padding:8px 12px; border-radius:18px; border:1px solid #128C7E; background:#fff; color:#0b6b5f;
    transition:background .2s ease, color .2s ease;
}
.sv-wa-faq:hover { background:#128C7E; color:#fff; }
.sv-wa-faq.used { opacity:.55; }

.sv-wa-compose { display:flex; gap:8px; padding:10px 12px; background:#f0f0f0; flex-shrink:0; margin:0; }
.sv-wa-compose input { flex:1; min-width:0; border:0; border-radius:22px; padding:10px 14px; font-family:var(--font-body); font-size:0.88rem; background:#fff; outline:none; }
.sv-wa-compose button { width:42px; height:42px; flex-shrink:0; border-radius:50%; border:0; background:var(--whatsapp); color:#fff; cursor:pointer; font-size:0.95rem; }
.sv-wa-compose button:hover { background:#1fb855; }
.sv-wa-number { display:block; text-align:center; font-size:0.76rem; color:#555; padding:8px 12px 10px; background:#f0f0f0; border-top:1px solid #e2e2e2; flex-shrink:0; }
.sv-wa-number i { color:var(--whatsapp); }
.sv-wa-number:hover { color:#128C7E; }

/* hide floating widgets while the mobile menu drawer is open */
body.nav-open .sv-wa { opacity:0; pointer-events:none; }

/* ---------- Tablets & phones ---------- */
@media (max-width:767px) {

    .sv-wa { right:14px; bottom:14px; }
    .sv-wa-fab { width:52px; height:52px; font-size:1.7rem; }
    .sv-wa-teaser { right:62px; bottom:6px; max-width:min(210px, calc(100vw - 100px)); font-size:0.8rem; }
    .sv-wa-panel { position:fixed; left:10px; right:10px; bottom:76px; width:auto; max-height:calc(100vh - 96px); max-height:calc(100dvh - 96px); }
    .sv-wa-compose input { font-size:16px; } /* stop iOS zoom */
}
@media (max-width:360px) {
    .sv-wa-panel { left:6px; right:6px; }
}
@media (max-height:500px) and (orientation:landscape) {
    .sv-wa-panel { max-height:calc(100vh - 86px); max-height:calc(100dvh - 86px); }
}
@media (prefers-reduced-motion:reduce) { .sv-wa-fab::before { animation:none; } }
@media print { .sv-wa, .sv-lang { display:none !important; } }