/* ─────────────────────────────────────────────────────────────
   WhatsApp Button Pro – Frontend Styles  (v1.1)
   CSS custom-property design system: presets set defaults via
   CSS variables on .wabp-container; per-button inline-style
   overrides always win.
   ───────────────────────────────────────────────────────────── */

@import url('https://fonts.googleapis.com/css2?family=Tajawal:wght@700&display=swap');

/* ══ CSS Custom Property defaults ═══════════════════════════ */
.wabp-container {
  /* Per-button overrides are injected as inline style here */
  --wabp-color:         #25d366;
  --wabp-text-color:    #ffffff;
  --wabp-border-radius: 50px;   /* overridden by preset  */
  --wabp-border:        none;
  --wabp-shadow:        none;
  --wabp-icon-color:    var(--wabp-text-color);
  --wabp-icon-width:    24px;
  --wabp-icon-height:   24px;
  --wabp-icon-stroke:   none;
  --wabp-icon-stroke-w: 0;
  --wabp-btn-width:     auto;
  --wabp-btn-height:    auto;
  --wabp-btn-size:      auto;   /* preset size fallback  */
  display: inline-flex; /* makes text-align on parent work */
}

/* Full-width button: make container 100% width */
.wabp-container[style*="--wabp-btn-width: 100%"],
.wabp-container[style*="--wabp-btn-width:100%"] {
  width: 100%;
  display: flex;
}

.wabp-container[style*="--wabp-btn-width: 100%"] .wabp-button,
.wabp-container[style*="--wabp-btn-width:100%"] .wabp-button {
  width: 100%;
  justify-content: center;
}

/* Alignment wrapper produced by shortcode renderer */
.wabp-align-wrap {
  display: block;
  width: 100%;
}

/* ══ Base Button ════════════════════════════════════════════ */
.wabp-button {
  display:         inline-flex;
  align-items:     center;
  justify-content: center;
  gap:             10px;
  background:      var(--wabp-color);
  color:           var(--wabp-text-color) !important;
  padding:         14px 24px;
  border-radius:   var(--wabp-border-radius);
  border:          var(--wabp-border);
  box-shadow:      var(--wabp-shadow);
  width:           var(--wabp-btn-width, var(--wabp-btn-size));
  min-height:      var(--wabp-btn-height, var(--wabp-btn-size));
  text-decoration: none !important;
  font-family:     'Tajawal', Arial, sans-serif;
  font-size:       16px;
  font-weight:     700;
  transition:      transform 0.3s ease, filter 0.3s ease;
  position:        relative;
  overflow:        hidden;
  cursor:          pointer;
  box-sizing:      border-box;
  white-space:     nowrap;
}

.wabp-button:visited,
.wabp-button:link,
.wabp-button:active { color: var(--wabp-text-color) !important; text-decoration: none !important; }

/* shine sweep */
.wabp-button::after {
  content: '';
  position: absolute; top: 0; left: -100%; width: 100%; height: 100%;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,.18), transparent);
  transition: left .45s;
}
.wabp-button:hover::after { left: 100%; }
.wabp-button:hover { color: var(--wabp-text-color) !important; transform: translateY(-2px); filter: brightness(1.07); }

/* ══ Icon ═══════════════════════════════════════════════════ */
.wabp-button.wabp-icon-right { flex-direction: row-reverse; direction: ltr; }
.wabp-button.wabp-icon-right .wabp-button-text { direction: rtl; }
.wabp-icon-slot { display: inline-flex; align-items: center; flex-shrink: 0; }
.wabp-icon-slot svg {
  width:        var(--wabp-icon-width) !important;
  height:       var(--wabp-icon-height) !important;
  fill:         var(--wabp-icon-color) !important;
  stroke:       var(--wabp-icon-stroke) !important;
  stroke-width: var(--wabp-icon-stroke-w) !important;
  display: block; flex-shrink: 0;
}
.wabp-icon { width: var(--wabp-icon-width) !important; height: var(--wabp-icon-height) !important; fill: var(--wabp-icon-color) !important; stroke: var(--wabp-icon-stroke) !important; stroke-width: var(--wabp-icon-stroke-w) !important; display: block; flex-shrink: 0; }
/* Force fill+stroke on all child shapes */
.wabp-icon-slot svg path,
.wabp-icon-slot svg circle,
.wabp-icon-slot svg rect,
.wabp-icon-slot svg polygon {
  fill:         var(--wabp-icon-color) !important;
  stroke:       var(--wabp-icon-stroke) !important;
  stroke-width: var(--wabp-icon-stroke-w) !important;
}

/* ══ Label ══════════════════════════════════════════════════ */
.wabp-button-text { white-space: nowrap; color: var(--wabp-text-color) !important; }

/* ══ Show-on helpers ════════════════════════════════════════ */
.wabp-mobile-only  { display: none !important; }
.wabp-desktop-only { display: inline-flex; }
@media (max-width: 768px) {
  .wabp-mobile-only  { display: inline-flex !important; }
  .wabp-desktop-only { display: none !important; }
}

/* ══════════════════════════════════════════════════════════════
   P R E S E T S
   Each preset sets CSS custom properties on the container so
   per-button inline-style overrides always take priority.
   ══════════════════════════════════════════════════════════════ */

/* ── 1. classic  (default pill + shadow + animation) ──────── */
/* Base rules already reflect classic — no extra declarations needed */

/* ── 2. rounded  (card-style with soft corners) ───────────── */
.wabp-preset-rounded { --wabp-border-radius: 12px; }

/* ── 3. minimal  (outline, no fill) ───────────────────────── */
.wabp-preset-minimal { --wabp-border-radius: 50px; --wabp-shadow: none; --wabp-icon-color: var(--wabp-color); }
.wabp-preset-minimal .wabp-button {
  background: transparent !important;
  border: 2px solid var(--wabp-color) !important;
  color: var(--wabp-color) !important;
  box-shadow: none !important;
}
.wabp-preset-minimal .wabp-button-text { color: var(--wabp-color) !important; }
.wabp-preset-minimal .wabp-button:hover { background: var(--wabp-color) !important; color: #fff !important; --wabp-icon-color: #fff; }
.wabp-preset-minimal .wabp-button:hover .wabp-button-text { color: #fff !important; }

/* ── 4. pill  (elongated) ─────────────────────────────────── */
.wabp-preset-pill { --wabp-border-radius: 100px; }
.wabp-preset-pill .wabp-button { padding: 14px 36px; }

/* ── 5. icon-only  (circle, no label) ────────────────────── */
.wabp-preset-icon-only { --wabp-btn-size: 56px; --wabp-border-radius: 50%; }
.wabp-preset-icon-only .wabp-button {
  padding: 0 !important;
  border-radius: 50% !important;
}
.wabp-preset-icon-only .wabp-button-text { display: none !important; }
.wabp-preset-icon-only .wabp-icon { width: 28px !important; height: 28px !important; }

/* ── 6. gradient  (green → teal) ─────────────────────────── */
.wabp-preset-gradient .wabp-button {
  background: linear-gradient(135deg, var(--wabp-color) 0%, #0aad8b 100%) !important;
}

/* ── 7. shadow   (elevated / deep shadow) ───────────────── */
.wabp-preset-shadow { --wabp-shadow: 0 8px 30px rgba(37,211,102,.45), 0 2px 8px rgba(0,0,0,.14); }
.wabp-preset-shadow .wabp-button         { transform: translateY(-1px); }
.wabp-preset-shadow .wabp-button:hover   { transform: translateY(-4px); }

/* ── 8. dark    (dark background, accent text) ──────────── */
.wabp-preset-dark { --wabp-icon-color: var(--wabp-color); }
.wabp-preset-dark .wabp-button {
  background: #1a1a2e !important;
  color: var(--wabp-color) !important;
}
.wabp-preset-dark .wabp-button-text { color: var(--wabp-color) !important; }
.wabp-preset-dark .wabp-button:hover { background: #16213e !important; }

/* ── 9. flat    (no shadow, no animation, sharp corners) ── */
.wabp-preset-flat { --wabp-shadow: none; --wabp-border-radius: 8px; }
.wabp-preset-flat .wabp-button        { box-shadow: none !important; transition: background .2s !important; }
.wabp-preset-flat .wabp-button:hover  { transform: none !important; filter: brightness(.92); }
.wabp-preset-flat .wabp-button::after { display: none; }

/* ── 10. compact  (small / dense) ───────────────────────── */
.wabp-preset-compact .wabp-button { padding: 8px 16px !important; font-size: 13px !important; gap: 7px; }
.wabp-preset-compact .wabp-icon   { width: 18px !important; height: 18px !important; }

/* ══ Floating Button ════════════════════════════════════════ */
.wabp-floating {
  z-index: 9999;
  display: inline-flex !important;
  margin: 0 !important;
  padding: 0 !important;
  background: transparent !important;
  border: none !important;
  box-shadow: none !important;
}

.wabp-floating .wabp-container {
  display: inline-flex !important;
}

/* Mobile adjustments for floating buttons */
@media (max-width: 768px) {
  .wabp-floating {
    bottom: 15px !important;
  }
}