/* WhatsApp widget styles - copied and adapted from provided design */
:root{
  --wa-green:#128C7E;      /* WhatsApp brand green used in text/icons */
  --wa-dark:#075E54;       /* WhatsApp header green */
  --bubble:#ffffff;        /* message bubble background */
  --chat-bg:#ECE5DD;       /* chat area bg */
  --divider:#EAEAEA;       /* separators for options */
}

.wa-widget{z-index:9999}

/* Hidden checkbox for CSS toggle */
.wa-toggle{position:absolute;clip:rect(0 0 0 0);height:1px;width:1px;overflow:hidden;border:0;padding:0;margin:-1px}
.wa-toggle{position:absolute;left:-9999px;top:auto;width:1px;height:1px;overflow:hidden;border:0;padding:0;margin:0}

/* Floating button */
.whatsapp-float{
  position:fixed;margin-bottom: 75px;margin-right: 7px; right:20px;bottom:20px;display:flex;align-items:center;justify-content:center;
  width:60px;height:60px;border-radius:50%;background:#25D366;color:#fff;cursor:pointer;z-index:1000;
  box-shadow:0 6px 18px rgba(0,0,0,.25);border:0;outline:0;padding:6px
}
.whatsapp-float{
  position:fixed;right:20px;bottom:20px;display:flex;align-items:center;justify-content:center;
  width:60px;height:60px;border-radius:50%;background:#25D366;color:#fff;cursor:pointer;z-index:10005;
  box-shadow:0 6px 18px rgba(0,0,0,.25);border:0;outline:0;padding:6px;font-size:24px
}
.whatsapp-float i{color:#fff;display:inline-block;width:36px;height:36px;line-height:36px;text-align:center;border-radius:50%}
.whatsapp-float img{display:none}
.whatsapp-float img{width:100%;height:100%;object-fit:cover;border-radius:50%;border:0.2px solid rgba(0,0,0,.2)}

/* Chat box - hidden by default, shown when checkbox is checked */
.chat-box{
  position:fixed;margin-bottom: 75px; right:100px;bottom:20px;width:400px;background:#fff;border-radius:12px;overflow:hidden;display:none;flex-direction:column;
  box-shadow:0 14px 32px rgba(0,0,0,.35);z-index:999
}

/* Show chat when widget has .open class (toggled by JS) */
.wa-widget.open .chat-box{display:flex}
.whatsapp-float .fa-brands.fa-whatsapp {
  font-size: 40px; /* Adjust as needed */
}

.chat-header{background:#f9f9f9;color:black;padding:12px;display:flex;align-items:center;gap:10px}
.chat-header img{width:50px;height:50px;border-radius:50%;border: solid 0.5px}
.chat-title-wrap{display:flex;flex-direction:column}
.chat-title{display:flex;align-items:center;gap:6px;font-weight:700}
.chat-title svg{display:inline-block;vertical-align:-2px}
.chat-sub{font-size:14px;opacity:.85}

/* Make chat body grow so footer stays pinned to the bottom of the panel */
.chat-body{background:var(--chat-bg);max-height:420px;overflow:auto;padding:12px;flex:1 1 auto;padding-top: 20px;padding-right: 20px}
.message{background:var(--bubble);padding:10px 12px;border-radius:10px;box-shadow:0 1px 2px rgba(0,0,0,.08);width:100%;max-width:100%;margin-bottom:10px}

.option-card{margin-top:8px;border:1px solid var(--divider);overflow:hidden;background:#fff}
.option-item{display:flex;align-items:center;gap:10px;padding:12px 14px;background:#fff;border:0;outline:0;cursor:pointer;color:var(--wa-green);font-weight:600;font-size:14px;text-decoration:none}
.option-item + .option-item{border-top:1px solid var(--divider)}
.option-item i{min-width:16px}
.option-item:hover{background:#f8f8f8}

/* Footer: visible and pinned to the bottom. Uses a small form to submit text to wa.me without JS. */
.chat-footer{display:flex;align-items:center;border-top:1px solid #ddd;padding:5px;background:#ECE5DD}
.wa-form{display:flex;gap:8px;align-items:center;width:100%;padding: 5px;}
.chat-footer input{flex:1;padding:10px 14px;border:1px solid #e6e6e6;max-height: 40px;border-radius:22px;outline:none;font-size:14px;background:#fff}
.chat-footer input:focus{box-shadow:0 0 0 3px rgba(18,140,126,0.06);border-color:var(--wa-green)}
.chat-footer .wa-input{padding:15px 15px !important;border-radius:22px !important}
.chat-footer button{background:#131815;border:none;color:#fff;padding:0;width:44px;height:44px;border-radius:50%;cursor:pointer;font-size:16px;display:flex;align-items:center;justify-content:center}
.chat-footer button svg{width:18px;height:18px}
.chat-footer button:hover{background:#1c211ed6}

/* Ultra-mobile adjustments for <=480px screens */
@media (max-width:480px) {

  /* Floating button slightly smaller and closer to edges */
  .whatsapp-float {
    right: 12px;
    bottom: 12px;
    width: 52px;
    height: 52px;
    font-size: 20px;
  }

  /* Chat box fills most of the screen width */
  .chat-box {
    right: 8px;
    left: 8px;
    bottom: 70px; /* leaves room above float button */
    width: auto;
    max-width: none;
    min-width: unset;
    border-radius: 10px;
  }

  /* When chat is open, keep full width */
  .wa-widget.open .chat-box {
    right: 8px;
    left: 8px;
    bottom: 70px;
    margin: 0;
    max-height: 80vh; /* so it doesn’t overflow */
    min-height: 320px;
  }

  /* Header compact */
  .chat-header {
    padding: 10px;
  }
  .chat-header img {
    width: 42px;
    height: 42px;
  }

  /* Chat body smaller */
  .chat-body {
    max-height: 300px;
    padding: 10px;
  }

  /* Footer input + button */
  .chat-footer {
    padding: 6px;
  }
  .chat-footer input {
    font-size: 13px;
    height: 40px;
    padding: 8px 12px;
  }
  .chat-footer button {
    width: 40px;
    height: 40px;
    font-size: 15px;
  }
}


/* Tablet and small-desktop adjustments */
@media (max-width: 992px) {
  .chat-box{
    right:18px;
    left:18px;
    width:auto;
    max-width:520px;
    bottom:18px;
    border-radius:12px;
  }
  .wa-widget.open .chat-box{right:18px;left:18px}
  .whatsapp-float{right:20px;bottom:16px;width:56px;height:56px;font-size:22px}
  .chat-header img{width:44px;height:44px}
  .chat-body{max-height:460px;padding:12px}
}

/* Mobile (portrait) tweaks */
@media (max-width: 768px) {
  .chat-box{
    right:12px;
    left:12px;
    width:auto;
    bottom:12px;
    border-radius:10px;
  }
  .wa-widget.open .chat-box{        
        right: 27px;
        margin-top: 25px;
        margin-bottom: 135px;
       /* margin-left: 75px;*/
       /* margin-right: 5px; */
        max-height: 700px;
        min-height: 400px;
        min-width: 400px;
        max-width: 420px;
        left: 150px;
      }
  .whatsapp-float{right:20px;bottom:12px;width:52px;height:52px;font-size:20px}
  .chat-header{padding:10px}
  .chat-title{font-size:15px}
  .chat-sub{font-size:13px;margin-right: 17px}
  .chat-body{max-height:800px;padding-right: 30px;padding:12px}
  .chat-footer input{padding:9px}
}

/* Very small phones: make chat full-width and ensure footer usable */
@media (max-width: 420px) {
  .chat-box{right:10px;left:10px;width:auto;border-radius:8px}
  .wa-widget.open .chat-box{
        max-height: 600px;
        min-height: 500px;
        left: 10px;
        right: 70px;
        margin-right: 67px;
        /*padding-right: 65px;*/
        margin-bottom: 72px;
        min-width: 95%;
        max-width: 98%;
  }
 
  .whatsapp-float{right:10px;bottom:10px;width:48px;height:48px;font-size:18px}
  .chat-header img{width:40px;height:40px}
  .chat-body{
        max-height: 450px;
        padding: 8px;
        padding-top: 15px;
        padding-bottom: 0px;
  }
  .chat-footer input{padding:8px}
}

/* Utility: place the widget slightly above sticky footer if present (tweak if needed) */
body.has-sticky-footer .whatsapp-float{bottom:86px}

/* End of whatsapp.css */