/* =====================================================================
   Door Repairs UK Ltd  ·  WhatsApp widget styles
   Sits directly above the chat assistant launcher in the bottom-right
   stack. Namespaced under .druk-wa so nothing leaks either way.
   ===================================================================== */

.druk-wa {
  --wa-green: #25d366;
  --wa-green-d: #1da851;
  --wa-ink: #24313f;

  position: fixed;
  right: 20px;
  bottom: 108px;              /* 20px offset + 62px launcher + 12px gap */
  z-index: 2147482999;       /* one below the chat widget */
  font-family: "Encode Sans", system-ui, -apple-system, Roboto, "Helvetica Neue", Arial, sans-serif;
  transition: opacity .18s ease, transform .18s ease;
}

.druk-wa.is-hidden {
  opacity: 0;
  transform: translateY(8px) scale(.9);
  pointer-events: none;
}

.druk-wa-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 56px;
  height: 56px;
  margin-left: auto;
  border-radius: 28px;
  background: var(--wa-green);
  color: #fff;
  text-decoration: none;
  box-shadow: 0 6px 20px rgba(37, 211, 102, .38);
  overflow: hidden;
  white-space: nowrap;
  transition: width .22s cubic-bezier(.2, .8, .3, 1),
              background .16s ease,
              box-shadow .18s ease,
              transform .16s ease;
}

.druk-wa-icon {
  display: flex;
  flex: 0 0 56px;
  align-items: center;
  justify-content: center;
  width: 56px;
}

.druk-wa-label {
  max-width: 0;
  opacity: 0;
  font-size: 14.5px;
  font-weight: 600;
  transition: max-width .22s cubic-bezier(.2, .8, .3, 1), opacity .16s ease;
}

/* Expand to a pill on hover, so the purpose is obvious without
   permanently taking up screen width. */
@media (hover: hover) and (min-width: 481px) {
  .druk-wa-btn:hover,
  .druk-wa-btn:focus-visible {
    width: 232px;
    background: var(--wa-green-d);
    box-shadow: 0 10px 26px rgba(37, 211, 102, .46);
  }
  .druk-wa-btn:hover .druk-wa-label,
  .druk-wa-btn:focus-visible .druk-wa-label {
    max-width: 170px;
    opacity: 1;
    padding-right: 20px;
  }
}

.druk-wa-btn:active { transform: scale(.95); }

.druk-wa-btn:focus-visible {
  outline: 3px solid #064287;
  outline-offset: 3px;
}

/* Gentle one-off nudge so it is noticed, then it stops. */
@keyframes druk-wa-pulse {
  0%, 100% { box-shadow: 0 6px 20px rgba(37, 211, 102, .38); }
  50%      { box-shadow: 0 6px 20px rgba(37, 211, 102, .38), 0 0 0 12px rgba(37, 211, 102, 0); }
}
.druk-wa-btn { animation: druk-wa-pulse 2.4s ease-out 1.5s 3; }

@media (max-width: 480px) {
  .druk-wa { right: 14px; bottom: 94px; }  /* 14 + 56 launcher + 10 gap */
  .druk-wa-btn { width: 50px; height: 50px; border-radius: 25px; }
  .druk-wa-icon { flex-basis: 50px; width: 50px; }
}

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

@media (prefers-reduced-motion: reduce) {
  .druk-wa,
  .druk-wa-btn,
  .druk-wa-label {
    animation: none !important;
    transition-duration: .01ms !important;
  }
}