/* =============================================================================
 * Herb & House — Floating WhatsApp Widget (v3 — user-supplied FAB asset)
 * -----------------------------------------------------------------------------
 * What this is:
 *   A floating container in the bottom-right corner that hosts WHATEVER
 *   image or animation the user supplies — PNG, JPG, GIF, WebP, MP4 WebM,
 *   or a Lottie JSON played via <lottie-player>. On hover (or keyboard
 *   focus) a small cream tooltip appears above it with the text:
 *
 *       Questions about
 *       our herbs?
 *       Let's chat! 💚
 *
 *   Clicking the FAB opens https://wa.me/<phone> in a new tab.
 *
 * Design references (matched to user-supplied screenshots):
 *   • FAB is whatever asset the user drops in — no forced background,
 *     no forced shape, no inline SVG (unless they didn't configure one,
 *     in which case we fall back to the WhatsApp glyph).
 *   • Tooltip is a rounded rectangle, off-white background, charcoal text,
 *     soft drop shadow, NO close button, NO avatar, NO status line.
 *   • Tooltip tail points DOWN at the FAB.
 *
 * Asset is configured via:
 *   • Blade env var:   WHATSAPP_FAB_ASSET  (URL or /path/under/public)
 *   • Blade var:       $whatsappFabAsset   (passed to the partial)
 *   • Data attribute:  <div class="hh-wa-float" data-fab-asset="...">
 *
 * Self-contained: zero JS required for the hover behaviour. All selectors
 * scoped under `.hh-wa-float` — no risk of clashing with site CSS.
 * ========================================================================== */

/* ---------------------------------------------------------------------------
   1. Container — fixed, bottom-right, above all site chrome
   ------------------------------------------------------------------------- */
.hh-wa-float {
    position: fixed;
    right: 24px;
    bottom: 24px;
    z-index: 2147483000;
    font-family: 'DM Sans', system-ui, -apple-system, BlinkMacSystemFont,
                 'Segoe UI', Roboto, Arial, sans-serif;
    /* Brand-matched tokens */
    --wa-brand:       #25D366;
    --wa-brand-hi:    #2ECC71;
    --wa-brand-deep:  #1EBE57;
    --wa-bubble-bg:   #F9F9F7;
    --wa-bubble-text: #333333;
    --wa-shadow-fab:    0 10px 22px rgba(7, 43, 27, 0.22),
                       0 4px 8px rgba(7, 43, 27, 0.12);
    --wa-shadow-fab-hi: 0 14px 28px rgba(7, 43, 27, 0.30),
                       0 6px 12px rgba(7, 43, 27, 0.16);
    --wa-shadow-bubble: 0 4px 12px rgba(0, 0, 0, 0.08),
                       0 1px 3px rgba(0, 0, 0, 0.04);

    /* Sizing tokens — override these from your site CSS to resize the FAB */
    --hh-wa-fab-size: 64px;
}

@media (min-width: 1024px) {
    .hh-wa-float {
        right: 32px;
        bottom: 32px;
    }
}

/* ---------------------------------------------------------------------------
   2. The floating action button (FAB)
   -----------------------------------------------------------------------------
      The FAB is a transparent <a> that hosts whatever the user supplied:
        • <img src="...">          for PNG / JPG / GIF / WebP / SVG
        • <video autoplay loop muted playsinline>  for MP4 / WebM
        • <lottie-player src="..."> for Lottie JSON
      The asset fills the FAB (width:100%; height:100%; object-fit:contain).
      The FAB itself stays transparent so the asset's own shape shows through.
   ------------------------------------------------------------------------- */
.hh-wa-float__fab {
    position: relative;
    display: block;
    width:  var(--hh-wa-fab-size);
    height: var(--hh-wa-fab-size);
    border-radius: 50%;          /* keep circular by default — override to 0 for square assets */
    background: transparent;
    border: none;
    cursor: pointer;
    text-decoration: none;
    -webkit-tap-highlight-color: transparent;
    box-shadow: var(--wa-shadow-fab);
    transition: transform 0.22s cubic-bezier(0.34, 1.56, 0.64, 1),
                box-shadow 0.22s ease;
    overflow: hidden;             /* clips the asset to the FAB's border-radius */
    /* The asset inherits color from the FAB; we set it explicitly to white
       so the inline-SVG fallback glyph renders correctly. */
    color: #ffffff;
}

/* When NO asset is supplied, we paint the brand 3D sphere as a fallback
   so the widget isn't an empty transparent circle. The fallback is
   triggered by the absence of the .hh-wa-float--has-asset modifier. */
.hh-wa-float__fab:not(.hh-wa-float--has-asset) {
    background: radial-gradient(circle at 30% 30%,
                                var(--wa-brand-hi)   0%,
                                var(--wa-brand)     55%,
                                var(--wa-brand-deep) 100%);
}

/* Subtle top-edge sheen for the fallback sphere (no-op when an asset is set,
   because the asset covers it entirely). */
.hh-wa-float__fab:not(.hh-wa-float--has-asset)::before {
    content: "";
    position: absolute;
    inset: 4px;
    border-radius: 50%;
    background: radial-gradient(circle at 30% 18%,
                                rgba(255, 255, 255, 0.35) 0%,
                                rgba(255, 255, 255, 0) 55%);
    pointer-events: none;
}

.hh-wa-float__fab:hover {
    transform: translateY(-2px) scale(1.04);
    box-shadow: var(--wa-shadow-fab-hi);
}

.hh-wa-float__fab:active {
    transform: translateY(0) scale(0.98);
}

.hh-wa-float__fab:focus-visible {
    outline: 3px solid var(--wa-brand);
    outline-offset: 4px;
}

/* ---------------------------------------------------------------------------
   3. The FAB asset — img / video / lottie-player
   ------------------------------------------------------------------------- */
.hh-wa-float__asset {
    position: relative;
    z-index: 1;
    display: block;
    width:  100%;
    height: 100%;
    object-fit: contain;          /* preserves aspect ratio of the asset */
    pointer-events: none;         /* clicks go to the <a>, not the asset */
    user-select: none;
    -webkit-user-drag: none;
}

/* For video: hide native controls / poster glow */
.hh-wa-float__asset video.hh-wa-float__asset,   /* rare specificity bump */
video.hh-wa-float__asset {
    background: transparent;
}

/* Inline-SVG fallback glyph (only used when no asset is configured) */
.hh-wa-float__icon {
    position: relative;
    z-index: 1;
    display: block;
    width: 70%;
    height: 70%;
    margin: 15% auto;
    color: #ffffff;
}

/* ---------------------------------------------------------------------------
   4. The hover tooltip — appears ABOVE the FAB
   ------------------------------------------------------------------------- */
.hh-wa-float__bubble {
    position: absolute;
    right: 0;                     /* right-aligned with the FAB */
    bottom: calc(var(--hh-wa-fab-size) + 12px);   /* sits above the FAB + 12px gap */
    width: 240px;
    background: var(--wa-bubble-bg);
    color: var(--wa-bubble-text);
    border-radius: 18px;
    padding: 16px 20px;
    box-shadow: var(--wa-shadow-bubble);
    font-size: 15.5px;
    font-weight: 500;
    line-height: 1.45;
    letter-spacing: 0.005em;
    text-align: left;
    white-space: pre-line;        /* respect \n in the text node */
    /* Hidden by default */
    opacity: 0;
    transform: translateY(8px) scale(0.96);
    transform-origin: bottom right;
    pointer-events: none;
    transition: opacity 0.22s ease, transform 0.22s cubic-bezier(0.34, 1.56, 0.64, 1);
}

/* Downward-pointing tail — sits at the bottom of the bubble, pointing at the FAB */
.hh-wa-float__bubble::after {
    content: "";
    position: absolute;
    bottom: -7px;
    /* aligns with FAB horizontal center: FAB width / 2 - 7 (half tail width) */
    right: calc(var(--hh-wa-fab-size) / 2 - 7px);
    width: 14px;
    height: 14px;
    background: var(--wa-bubble-bg);
    transform: rotate(45deg);
    border-radius: 2px;
    box-shadow: 2px 2px 4px rgba(0, 0, 0, 0.04);
}

/* Reveal on hover OR keyboard focus OR tap-active (touch) */
.hh-wa-float:hover  .hh-wa-float__bubble,
.hh-wa-float:focus-within .hh-wa-float__bubble,
.hh-wa-float.is-tap-active .hh-wa-float__bubble {
    opacity: 1;
    transform: translateY(0) scale(1);
    pointer-events: auto;
}

/* ---------------------------------------------------------------------------
   5. Responsive
   ------------------------------------------------------------------------- */
@media (max-width: 480px) {
    .hh-wa-float {
        right: 16px;
        bottom: 16px;
        --hh-wa-fab-size: 56px;
    }

    .hh-wa-float__bubble {
        right: 0;
        width: 220px;
        padding: 14px 18px;
        font-size: 14.5px;
    }
}

/* ---------------------------------------------------------------------------
   6. Accessibility & print
   ------------------------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
    .hh-wa-float__fab,
    .hh-wa-float__bubble {
        transition: none !important;
    }
}

@media print {
    .hh-wa-float { display: none !important; }
}