/* WhatsApp for Sollea — frontend */
/* We render as <a>/<div> (never <button>) so the theme's button chrome can't apply.
   This reset neutralizes theme link styling (color, underline, Rey's animated underline). */
.wfs-widget a,.wfs-widget [role="button"],.wfs-btn{
  -webkit-appearance:none;appearance:none;margin:0;box-shadow:none;background-image:none;
  font-family:inherit;line-height:1.2;text-transform:none;letter-spacing:normal;text-shadow:none;
  min-height:0;text-decoration:none !important;--animlink-d:none !important}
.wfs-widget a::before,.wfs-widget a::after,.wfs-btn::before,.wfs-btn::after{display:none !important}
.wfs-widget a:hover,.wfs-widget a:focus,.wfs-btn:hover,.wfs-btn:focus{text-decoration:none !important;outline:none;box-shadow:none}

.wfs-widget{position:fixed;z-index:99990;display:flex;flex-direction:column;align-items:flex-start;gap:12px;
  font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;--wfs-bg:#25D366;--wfs-text:#fff}
.wfs-widget--right{align-items:flex-end}
.wfs-wa-ic{display:block}

/* FAB (round button) */
.wfs-fab{order:2;display:inline-flex;align-items:center;gap:10px;height:56px;min-width:56px;padding:0 16px;border:0 !important;cursor:pointer;
  border-radius:999px !important;background:var(--wfs-bg) !important;color:var(--wfs-text) !important;box-shadow:0 8px 24px rgba(0,0,0,.22) !important;position:relative}
.wfs-fab:not(.has-label){padding:0;width:56px;justify-content:center}
.wfs-fab .wfs-wa-ic{width:26px;height:26px}
.wfs-fab__label{font-size:14px;font-weight:600;white-space:nowrap}
.wfs-fab__close{position:absolute;inset:0;display:none;align-items:center;justify-content:center;font-size:26px;line-height:1;background:var(--wfs-bg);border-radius:999px}
.wfs-widget.is-open .wfs-fab .wfs-wa-ic,.wfs-widget.is-open .wfs-fab__label{visibility:hidden}
.wfs-widget.is-open .wfs-fab__close{display:flex}

/* Açılır panel */
.wfs-panel{order:1;width:320px;max-width:calc(100vw - 32px);background:#fff;border-radius:16px;overflow:hidden;
  box-shadow:0 18px 50px -12px rgba(0,0,0,.3);animation:wfs-in .18s ease}
@keyframes wfs-in{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}
.wfs-panel__head{display:flex;gap:12px;align-items:flex-start;background:var(--wfs-bg);color:var(--wfs-text);padding:18px 18px}
.wfs-panel__ic{flex:0 0 auto;width:34px;height:34px;border-radius:50%;background:rgba(255,255,255,.18);display:grid;place-items:center}
.wfs-panel__ic .wfs-wa-ic{width:20px;height:20px}
.wfs-panel__title{font-size:var(--wfs-ft,18px);font-weight:700;line-height:1.2}
.wfs-panel__desc{font-size:var(--wfs-fd,12px);opacity:.92;margin-top:4px;line-height:1.45}
.wfs-panel__body{padding:14px 16px 16px}
.wfs-resp{font-size:var(--wfs-fr,11px);color:#6b7280;margin:0 0 12px;text-align:center}

/* Account row */
.wfs-acc,.wfs-btn{display:flex;align-items:center;gap:12px;width:100%;text-align:left;cursor:pointer;background:#fff !important;
  border:1px solid #e6e6e6 !important;border-radius:12px !important;padding:12px 14px;transition:.15s}
.wfs-acc{border-left:3px solid var(--wfs-bg) !important}
.wfs-acc:hover{background:#f7f7f7 !important}
.wfs-ava,.wfs-btn__ava{width:44px;height:44px;border-radius:50%;object-fit:cover;flex:0 0 auto;background:#eee}
.wfs-ava--ph{display:grid;place-items:center;font-weight:700;color:#333;font-family:Georgia,serif;font-size:22px}
.wfs-acc__m,.wfs-btn__m{flex:1;min-width:0}
.wfs-acc__name{font-size:var(--wfs-fa,14px);font-weight:600;color:#111;display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.wfs-btn__name{font-size:var(--wfs-fa,14px);font-weight:600;color:var(--wfs-text,#fff) !important;display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.wfs-acc__go .wfs-wa-ic,.wfs-btn__go .wfs-wa-ic{width:22px;height:22px}
.wfs-btn__go{background:var(--wfs-bg);width:34px;height:34px;border-radius:50%;display:grid;place-items:center;flex:0 0 auto}
.wfs-btn__go .wfs-wa-ic{width:18px;height:18px}

/* Online/offline rozet */
.wfs-badge{font-size:10px;font-weight:700;letter-spacing:.02em;text-transform:none;padding:2px 8px;border-radius:999px}
.wfs-badge--on{background:#e7f6ec;color:#1c8a4b}
.wfs-badge--off{background:#eee;color:#777}

/* WooCommerce product button — kompakt: içeriğe göre daralır, tam genişlik olmaz */
.wfs-btn{display:inline-flex;width:auto;max-width:100%;vertical-align:middle;gap:14px;
  background:var(--wfs-bg,#25D366) !important;border:0 !important;color:var(--wfs-text,#fff) !important;margin:14px 0}
.wfs-btn .wfs-btn__m{flex:0 1 auto}          /* metin büyümesin → ikon metnin hemen sağında */
.wfs-btn__go{margin-left:2px}
.wfs-btn:hover{filter:brightness(.96);background:var(--wfs-bg,#25D366) !important}
.wfs-btn--round{border-radius:999px !important}
.wfs-btn .wfs-btn__name{color:var(--wfs-text,#fff)}
.wfs-btn .wfs-badge--on{background:rgba(255,255,255,.85);color:#1c8a4b}
.wfs-btn .wfs-badge--off{background:rgba(255,255,255,.7);color:#555}

@media (max-width:600px){
  /* Widget'ı iki yandan eşit 16px boşlukla sar (panel artık ortalı, taşmıyor)
     ve ikonu biraz aşağı al (safe-area'yı da hesaba katarak). */
  .wfs-widget{left:16px !important;right:16px !important;bottom:calc(20px + env(safe-area-inset-bottom,0px)) !important}
  .wfs-panel{width:100%;max-width:none}
}