/* ---------- Theme ---------- */
.sou-hom-widget{
  --sou-hom-primary:#0f5c5a;
  --sou-hom-primary-dark:#0a4442;
  --sou-hom-accent:#e0a526;
  --sou-hom-bg:#f4f7f6;
  --sou-hom-text:#1f2d2c;
  --sou-hom-muted:#6b7b7a;
  --sou-hom-radius:16px;
  font-family:"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
  font-size:14px;
  line-height:1.45;
  color:var(--sou-hom-text);
}
.sou-hom-widget *,.sou-hom-widget *::before,.sou-hom-widget *::after{box-sizing:border-box}

/* ---------- Launcher: sticky to the right wall ---------- */
.sou-hom-toggle{
  position:fixed;
  right:0;
  top:50%;
  transform:translateY(-50%);
  z-index:99998;
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:6px;
  width:54px;
  padding:14px 0 12px;
  border:0;
  border-radius:14px 0 0 14px;
  background:linear-gradient(160deg,var(--sou-hom-primary),var(--sou-hom-primary-dark));
  color:#fff;
  cursor:pointer;
  box-shadow:-4px 6px 20px rgba(0,0,0,.25);
  transition:width .2s ease,opacity .2s ease,transform .2s ease;
}
.sou-hom-toggle:hover{width:60px}
.sou-hom-toggle:focus-visible{outline:3px solid var(--sou-hom-accent);outline-offset:2px}
.sou-hom-toggle svg{width:28px;height:28px;display:block}
.sou-hom-toggle-label{
  writing-mode:vertical-rl;
  transform:rotate(180deg);
  font-size:11px;
  font-weight:600;
  letter-spacing:1.2px;
  text-transform:uppercase;
}
.sou-hom-toggle-dot{
  position:absolute;top:8px;left:8px;
  width:10px;height:10px;border-radius:50%;
  background:var(--sou-hom-accent);
  box-shadow:0 0 0 0 rgba(224,165,38,.7);
  animation:sou-hom-pulse 2s infinite;
}
@keyframes sou-hom-pulse{
  0%{box-shadow:0 0 0 0 rgba(224,165,38,.7)}
  70%{box-shadow:0 0 0 10px rgba(224,165,38,0)}
  100%{box-shadow:0 0 0 0 rgba(224,165,38,0)}
}
.sou-hom-toggle-hidden{opacity:0;pointer-events:none;transform:translate(100%,-50%)}

/* ---------- Chat window: docked to the right wall ---------- */
.sou-hom-window{
  position:fixed;
  right:0;
  top:50%;
  z-index:99999;
  width:380px;
  max-width:100vw;
  height:min(640px,calc(100vh - 32px));
  display:flex;
  flex-direction:column;
  background:#fff;
  border-radius:var(--sou-hom-radius) 0 0 var(--sou-hom-radius);
  box-shadow:-8px 10px 40px rgba(0,0,0,.28);
  overflow:hidden;
  transform:translate(105%,-50%);
  visibility:hidden;
  transition:transform .3s ease,visibility 0s linear .3s;
  outline:none;
}
.sou-hom-window.sou-hom-open{
  transform:translate(0,-50%);
  visibility:visible;
  transition:transform .3s ease;
}

/* ---------- Header ---------- */
.sou-hom-header{
  display:flex;align-items:center;gap:12px;
  padding:14px 16px;
  background:linear-gradient(135deg,var(--sou-hom-primary),var(--sou-hom-primary-dark));
  color:#fff;
}
.sou-hom-avatar{
  height:46px;width:150px;border-radius:10px;
  background:#fff;display:flex;align-items:center;justify-content:center;
  overflow:hidden;padding:4px 8px;
}
.sou-hom-avatar img{width:125px;object-fit:contain;display:block}
.sou-hom-header .sou-hom-close{margin-left:auto}
.sou-hom-title{flex:1;min-width:0}
.sou-hom-title strong{display:block;font-size:15px;line-height:1.2}
.sou-hom-title span{font-size:12px;opacity:.85;display:flex;align-items:center;gap:6px}
.sou-hom-title span::before{content:"";width:8px;height:8px;border-radius:50%;background:#4cd964;display:inline-block}
.sou-hom-close{
  border:0;background:rgba(255,255,255,.15);color:#fff;
  width:32px;height:32px;border-radius:50%;
  font-size:20px;line-height:1;cursor:pointer;
}
.sou-hom-close:hover{background:rgba(255,255,255,.28)}

/* ---------- Body ---------- */
.sou-hom-body{
  flex:1;overflow-y:auto;overflow-x:hidden;
  padding:16px 14px 8px;
  background:var(--sou-hom-bg);
  scroll-behavior:smooth;
  -webkit-overflow-scrolling:touch;
}
.sou-hom-msg{display:flex;margin-bottom:10px}
.sou-hom-msg-bot{justify-content:flex-start}
.sou-hom-msg-user{justify-content:flex-end}
.sou-hom-bubble{
  max-width:86%;padding:10px 13px;
  border-radius:14px;word-wrap:break-word;overflow-wrap:anywhere;
  box-shadow:0 1px 2px rgba(0,0,0,.06);
}
.sou-hom-msg-bot .sou-hom-bubble{background:#fff;border-bottom-left-radius:4px}
.sou-hom-msg-user .sou-hom-bubble{background:var(--sou-hom-primary);color:#fff;border-bottom-right-radius:4px}
.sou-hom-bubble a{color:var(--sou-hom-primary);font-weight:600}
.sou-hom-msg-user .sou-hom-bubble a{color:#fff}
.sou-hom-bubble ul{margin:6px 0 0;padding-left:18px}
.sou-hom-bubble li{margin:2px 0}

.sou-hom-typing{display:inline-flex;gap:4px;align-items:center;padding:12px 14px}
.sou-hom-typing span{
  width:7px;height:7px;border-radius:50%;background:#9aa9a8;
  animation:sou-hom-bounce 1.2s infinite ease-in-out;
}
.sou-hom-typing span:nth-child(2){animation-delay:.15s}
.sou-hom-typing span:nth-child(3){animation-delay:.3s}
@keyframes sou-hom-bounce{0%,60%,100%{transform:translateY(0);opacity:.5}30%{transform:translateY(-5px);opacity:1}}

/* ---------- Quick replies ---------- */
.sou-hom-quick-row{display:flex;flex-wrap:wrap;gap:7px;margin:4px 0 12px}
.sou-hom-quick-btn{
  display:inline-block;text-decoration:none;
  padding:7px 12px;border-radius:999px;
  border:1px solid var(--sou-hom-primary);
  background:#fff;color:var(--sou-hom-primary);
  font:inherit;font-size:13px;font-weight:600;cursor:pointer;
  transition:background .15s,color .15s;
}
.sou-hom-quick-btn:hover,.sou-hom-quick-btn:focus-visible{background:var(--sou-hom-primary);color:#fff;outline:none}

/* ---------- Composer ---------- */
.sou-hom-composer{
  display:flex;gap:8px;padding:10px 12px;
  background:#fff;border-top:1px solid #e3eae9;
}
.sou-hom-input{
  flex:1;min-width:0;border:1px solid #d3dedd;border-radius:999px;
  padding:10px 14px;font:inherit;font-size:14px;background:#fff;color:var(--sou-hom-text);
}
.sou-hom-input:focus{outline:none;border-color:var(--sou-hom-primary);box-shadow:0 0 0 3px rgba(15,92,90,.15)}
.sou-hom-send{
  border:0;border-radius:50%;width:40px;height:40px;flex:0 0 40px;
  background:var(--sou-hom-primary);color:#fff;cursor:pointer;
  display:flex;align-items:center;justify-content:center;
}
.sou-hom-send:hover{background:var(--sou-hom-primary-dark)}
.sou-hom-send svg{width:18px;height:18px}
.sou-hom-foot{
  text-align:center;font-size:11px;color:var(--sou-hom-muted);
  padding:0 0 8px;background:#fff;
}

/* ---------- Enquiry form (end of flow) ---------- */
.sou-hom-form-card{
  background:#fff;border-radius:14px;padding:14px;margin:4px 0 12px;
  box-shadow:0 1px 4px rgba(0,0,0,.1);border-top:3px solid var(--sou-hom-accent);
}
.sou-hom-form-card h4{margin:0 0 4px;font-size:15px;color:var(--sou-hom-primary)}
.sou-hom-form-card p{margin:0 0 10px;font-size:12px;color:var(--sou-hom-muted)}
.sou-hom-field{margin-bottom:9px}
.sou-hom-field label{display:block;font-size:12px;font-weight:600;margin-bottom:3px}
.sou-hom-field input,.sou-hom-field select,.sou-hom-field textarea{
  width:100%;border:1px solid #d3dedd;border-radius:8px;
  padding:9px 10px;font:inherit;font-size:13px;background:#fff;color:var(--sou-hom-text);
}
.sou-hom-field textarea{resize:vertical;min-height:70px}
.sou-hom-field input:focus,.sou-hom-field select:focus,.sou-hom-field textarea:focus{
  outline:none;border-color:var(--sou-hom-primary);box-shadow:0 0 0 3px rgba(15,92,90,.15);
}
.sou-hom-field-row{display:flex;gap:8px}
.sou-hom-field-row .sou-hom-field{flex:1;min-width:0}
.sou-hom-field-error input,.sou-hom-field-error select,.sou-hom-field-error textarea{border-color:#d93025}
.sou-hom-error{display:none;color:#d93025;font-size:11.5px;margin-top:3px}
.sou-hom-field-error .sou-hom-error{display:block}
.sou-hom-hp{position:absolute!important;left:-9999px!important;width:1px;height:1px;opacity:0}
.sou-hom-submit{
  width:100%;border:0;border-radius:8px;padding:11px;
  background:var(--sou-hom-primary);color:#fff;font:inherit;font-weight:700;cursor:pointer;
}
.sou-hom-submit:hover{background:var(--sou-hom-primary-dark)}
.sou-hom-submit[disabled]{opacity:.6;cursor:not-allowed}
.sou-hom-form-status{font-size:12.5px;margin-top:8px;display:none}
.sou-hom-form-status.sou-hom-err{display:block;color:#d93025}

/* ---------- Turnstile ---------- */
.sou-hom-captcha-field{overflow:hidden}
.sou-hom-captcha-field #souHomCaptcha{transform-origin:0 0}
@media (max-width:360px){
  .sou-hom-captcha-field #souHomCaptcha{transform:scale(.85)}
}

/* ---------- Mobile ---------- */
@media (max-width:480px){
  .sou-hom-window{
    width:100vw;height:100%;height:100dvh;top:0;
    border-radius:0;
    transform:translate(105%,0);
  }
  .sou-hom-toggle {
  position: fixed;
  right: 0;
  top: 50%
  }
  .sou-hom-window.sou-hom-open{transform:translate(0,0)}
  .sou-hom-toggle{width:30px;padding:12px 0 10px}
  .sou-hom-toggle svg{width:25px;height:25px}
  .sou-hom-field-row{flex-direction:column;gap:0}
  .sou-hom-input,.sou-hom-field input,.sou-hom-field select,.sou-hom-field textarea{font-size:16px}
}
@media (prefers-reduced-motion:reduce){
  .sou-hom-window,.sou-hom-toggle,.sou-hom-toggle-dot,.sou-hom-typing span{animation:none;transition:none}
}





/* =========================================================
   SMALL MOBILE
   SAME WALL ATTACHMENT
   ========================================================= */

@media (max-width: 480px) {
    
    


    
    
    

    .floating-btn {
        right: 0;

        width: 52px;
        height: 52px;

        font-size: 21px;

        border-radius: 14px 0 0 14px;
    }

    .floating-btn.chat {
        bottom: 115px;
    }

    .floating-btn.whatsapp {
        bottom: 175px;
    }

    .floating-btn.call {
        bottom: 235px;
    }

    /*
       Keep chat responsive on small screens.
       Buttons themselves remain identical to desktop.
    */
    .chat-widget {
        left: 10px;
        right: 65px;

        width: auto;
        max-width: none;

        bottom: 30px;

        max-height: calc(100vh - 60px);
        overflow-y: auto;
    }
}


/* =========================================================
   VERY SMALL PHONES
   ========================================================= */

@media (max-width: 360px) {

    .floating-btn {
        right: 0;

        width: 52px;
        height: 52px;

        font-size: 21px;
    }

    .floating-btn.chat {
        bottom: 115px;
    }

    .floating-btn.whatsapp {
        bottom: 175px;
    }

    .floating-btn.call {
        bottom: 235px;
    }

    .chat-widget {
        left: 8px;
        right: 65px;

        bottom: 20px;
    }
}





/* =========================================================
   FINAL RIGHT-WALL OVERRIDE
   MUST BE AT THE VERY END OF CSS
   ========================================================= */

.floating-btn,
.floating-btn.chat,
.floating-btn.whatsapp,
.floating-btn.call {
    position: fixed !important;

    right: 0 !important;

    width: 52px !important;
    height: 52px !important;

    border-radius: 14px 0 0 14px !important;

    margin: 0 !important;

    z-index: 9999 !important;

    box-sizing: border-box !important;
}


/* =========================================================
   DESKTOP / TABLET / MOBILE POSITIONS
   ========================================================= */

.floating-btn.call {
    bottom: 220px !important;
}

.floating-btn.whatsapp {
    bottom: 162px !important;
}



/* =========================================================
   MOBILE - SAME AS DESKTOP
   ========================================================= */

@media (max-width: 767px) {

    .floating-btn,
    .floating-btn.chat,
    .floating-btn.whatsapp,
    .floating-btn.call {
        position: fixed !important;
    right: -5px !important;
    width: 35px !important;
    height: 35px !important;
    border-radius: 14px 0 0 14px !important;
    margin: 0 !important;
    font-size: 18px;
    }

    .floating-btn.call {
        bottom: 310px !important;
    }

    .floating-btn.whatsapp {
        bottom: 269px !important;
    }

   
  }



/* =========================================================
   WHATSAPP BUTTON
   ========================================================= */

.floating-btn.whatsapp {
    bottom: 162px;
    background: #25D366;
}


/* =========================================================
   CALL BUTTON
   ========================================================= */

.floating-btn.call {
    bottom: 220px;
    background: #0d6efd;
}


/* =========================================================
   HOVER
   ========================================================= */

.floating-btn:hover {
    transform: translateX(-7px);
    color: #fff;

    box-shadow:
        -8px 8px 25px rgba(0, 0, 0, 0.30);
}


/* =========================================================
   ICON
   ========================================================= */

.floating-btn i {
    animation: iconBounce 1.8s infinite;
}

/* =========================================================
   RIGHT WALL STICKY FLOATING BUTTONS
   SAME DESIGN ON DESKTOP + TABLET + MOBILE
   ========================================================= */

.floating-btn {
    position: fixed;
    right: 0;

    width: 52px;
    height: 52px;

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

    color: #fff;
    font-size: 21px;
    text-decoration: none;

    z-index: 99999;
    cursor: pointer;

    /* Attached to right wall */
    border-radius: 14px 0 0 14px;

    box-shadow: -4px 5px 18px rgba(0, 0, 0, 0.22);

    transition:
        transform 0.3s ease,
        box-shadow 0.3s ease;

    animation: wallPulse 2.5s infinite;
}