/* ============================================================
   DHALIWAL SCAFFOLDING & ROOFING — EXTRAS / EFFECTS
   ============================================================ */

/* ── Pulse animation ── */
@keyframes pulse {
  0%, 100% { box-shadow: 0 0 0 0 rgba(245,166,35,.55); }
  50% { box-shadow: 0 0 0 12px rgba(245,166,35,0); }
}
.pulse { animation: pulse 2.2s ease-out infinite; }

/* ── Floating CTA bar ── */
/* Mobile: full-width bottom strip */
.floating-cta {
  display: flex;
  position: fixed; bottom: 0; left: 0; right: 0;
  z-index: 900;
  padding: .75rem 1rem;
  background: var(--color-white);
  box-shadow: 0 -3px 20px rgba(0,0,0,.14);
  border-top: 3px solid var(--color-accent);
  gap: .75rem; align-items: center;
  transition: transform .3s ease;
}
.floating-cta .btn { flex: 1; justify-content: center; padding: .85rem 1rem; font-size: .93rem; }
body { padding-bottom: 70px; }

/* Desktop: centered pill */
@media (min-width: 769px) {
  .floating-cta {
    left: 50%; right: auto;
    transform: translateX(-50%);
    border-radius: var(--radius-full) var(--radius-full) 0 0;
    padding: .6rem 2rem; gap: 1.25rem;
    width: auto; min-width: 500px;
    box-shadow: 0 -4px 24px rgba(0,0,0,.18);
  }
  .floating-cta .btn { flex: none; padding: .65rem 1.5rem; font-size: .9rem; }
  body { padding-bottom: 58px; }
}

/* ── Back to Top ── */
.back-to-top {
  position: fixed; bottom: 5rem; right: 1.5rem; z-index: 901;
  width: 44px; height: 44px; background: var(--color-accent);
  border-radius: var(--radius-full); box-shadow: var(--shadow-lg);
  display: flex; align-items: center; justify-content: center;
  color: var(--color-primary); cursor: pointer; border: none;
  transition: var(--transition);
  opacity: 0; visibility: hidden; transform: translateY(20px);
}
.back-to-top.visible { opacity: 1; visibility: visible; transform: translateY(0); }
.back-to-top:hover { transform: translateY(-3px); box-shadow: var(--shadow-accent); }
@media (min-width: 769px) {
  .back-to-top { bottom: 4rem; }
}

/* ── Signature Pad ── */
.signature-area {
  border: 2px dashed var(--color-border); border-radius: var(--radius-md);
  overflow: hidden; position: relative;
  background: #fafafa; cursor: crosshair; height: 130px;
}
.signature-area canvas { display: block; width: 100%; height: 100%; }
.sig-placeholder {
  position: absolute; inset: 0; display: flex; align-items: center; justify-content: center;
  pointer-events: none; font-size: .85rem; color: var(--color-text-muted); gap: .5rem;
}
.sig-controls { display: flex; justify-content: flex-end; margin-top: .5rem; }
.sig-clear {
  font-size: .82rem; color: var(--color-text-muted); font-weight: 600;
  background: none; border: none; cursor: pointer; transition: var(--transition);
}
.sig-clear:hover { color: var(--color-error); }

/* ── Loading Skeleton ── */
.skeleton {
  background: linear-gradient(90deg, #f0f0f0 25%, #e8e8e8 50%, #f0f0f0 75%);
  background-size: 200% 100%;
  animation: shimmer 1.5s ease-in-out infinite;
  border-radius: var(--radius-sm);
}
@keyframes shimmer {
  0% { background-position: 200% 0; }
  100% { background-position: -200% 0; }
}

/* ── Toast Notification ── */
.toast {
  position: fixed; top: 1.5rem; right: 1.5rem; z-index: 9999;
  background: var(--color-white); border-radius: var(--radius-md);
  padding: 1rem 1.5rem; box-shadow: var(--shadow-xl);
  border-left: 4px solid var(--color-success);
  display: flex; align-items: center; gap: .75rem;
  transform: translateX(120%); transition: transform .4s cubic-bezier(.4,0,.2,1);
  max-width: 360px;
}
.toast.show { transform: translateX(0); }
.toast.error { border-color: var(--color-error); }
.toast-message { font-size: .92rem; color: var(--color-text); }