/* Skinology WhatsApp Booking — shared floating container (identical base to Skinology AI Assistant). */
#skn-floating-container{position:fixed;bottom:30px;right:30px;display:flex;flex-direction:column;align-items:flex-end;gap:12px;z-index:99990;font-family:inherit;line-height:1.4}
#skn-floating-container.skn-pos-left{right:auto;left:30px;align-items:flex-start}
#skn-floating-container *,#skn-floating-container *::before,#skn-floating-container *::after{box-sizing:border-box}
#skn-floating-container svg{display:block}
#skn-floating-container .skn-wrap{position:relative;display:flex;align-items:center;gap:12px}

/* Stacking with the AI assistant: AI on top, WhatsApp below; WhatsApp hides while the AI chat is open. */
#skn-floating-container .skn-ai-wrap{order:1}
#skn-floating-container .skn-wa-wrap{order:2;gap:10px}
#skn-floating-container.skn-ai-open .skn-wa-wrap{display:none}

/* Pill */
#skn-floating-container a.skn-wa-pill{display:inline-flex;align-items:center;background:linear-gradient(135deg,#25D366,#20BA5A);border:0;border-radius:50px;text-decoration:none;box-shadow:0 4px 18px rgba(37,211,102,.45);transition:all .3s ease;padding:0 24px;height:58px}
#skn-floating-container a.skn-wa-pill:hover{transform:translateY(-3px) scale(1.03);box-shadow:0 8px 28px rgba(37,211,102,.55)}
#skn-floating-container a.skn-wa-pill:active{transform:translateY(-1px) scale(1.01)}
#skn-floating-container .skn-wa-text{color:#fff;font-size:14px;font-weight:700;white-space:nowrap;letter-spacing:.2px;line-height:1}

/* Round icon */
#skn-floating-container a.skn-wa-icon{width:58px;height:58px;border-radius:50%;background:linear-gradient(135deg,#25D366,#20BA5A);border:0;display:flex;align-items:center;justify-content:center;flex-shrink:0;box-shadow:0 4px 16px rgba(37,211,102,.5);position:relative;text-decoration:none;color:#fff;transition:all .3s ease}
#skn-floating-container a.skn-wa-icon:hover{transform:translateY(-3px) scale(1.05);box-shadow:0 8px 24px rgba(37,211,102,.6)}
#skn-floating-container a.skn-wa-icon svg{width:30px;height:30px;fill:#fff}
#skn-floating-container a.skn-wa-icon img{width:40px;height:40px;object-fit:contain;margin:0;max-width:none;border:0}

/* Badge */
#skn-floating-container .skn-wa-badge{position:absolute;top:-8px;right:-8px;min-width:20px;height:20px;padding:0 4px;background:#e53935;color:#fff;font-size:11.5px;font-weight:700;border-radius:10px;display:flex;align-items:center;justify-content:center;border:2px solid #fff;line-height:1;box-shadow:0 2px 6px rgba(229,57,53,.5);animation:skn-badge-pop .4s cubic-bezier(.34,1.56,.64,1) both}
@keyframes skn-badge-pop{from{transform:scale(0);opacity:0}to{transform:scale(1);opacity:1}}

/* Keyboard focus */
#skn-floating-container a.skn-wa-link:focus-visible{outline:3px solid #128C7E;outline-offset:3px}

@media (prefers-reduced-motion:reduce){
  #skn-floating-container a.skn-wa-pill,#skn-floating-container a.skn-wa-icon{transition:none}
  #skn-floating-container .skn-wa-badge{animation:none}
}
@media (max-width:768px){
  #skn-floating-container{bottom:20px;right:20px;gap:10px}
  #skn-floating-container.skn-pos-left{left:20px;right:auto}
  #skn-floating-container .skn-wa-nopill-mobile a.skn-wa-pill{display:none}
}
@media (max-width:480px){
  #skn-floating-container a.skn-wa-pill{height:50px;padding:0 18px}
  #skn-floating-container .skn-wa-text{font-size:12.5px}
  #skn-floating-container a.skn-wa-icon{width:50px;height:50px}
  #skn-floating-container a.skn-wa-icon svg{width:26px;height:26px}
  #skn-floating-container a.skn-wa-icon img{width:26px;height:26px}
}

/* Button size (set in Settings) — medium is the default sizing above. */
#skn-floating-container.skn-isize-small a.skn-wa-icon{width:50px;height:50px}
#skn-floating-container.skn-isize-small a.skn-wa-icon svg{width:26px;height:26px}
#skn-floating-container.skn-isize-small a.skn-wa-icon img{width:32px;height:32px}
#skn-floating-container.skn-isize-small a.skn-wa-pill{height:50px;padding:0 20px}
#skn-floating-container.skn-isize-large a.skn-wa-icon{width:72px;height:72px}
#skn-floating-container.skn-isize-large a.skn-wa-icon svg{width:38px;height:38px}
#skn-floating-container.skn-isize-large a.skn-wa-icon img{width:50px;height:50px}
#skn-floating-container.skn-isize-large a.skn-wa-pill{height:72px;padding:0 28px}
#skn-floating-container.skn-isize-large .skn-wa-text{font-size:15px}
@media (max-width:480px){
  #skn-floating-container.skn-isize-large a.skn-wa-icon{width:62px;height:62px}
  #skn-floating-container.skn-isize-large a.skn-wa-icon svg{width:32px;height:32px}
  #skn-floating-container.skn-isize-large a.skn-wa-icon img{width:42px;height:42px}
}