/* =============================================
   GLOBAL MOTION & TRANSITION EFFECTS
   Drop into any project for instant polish
   ============================================= */

/* ── 1. SMOOTH DEFAULTS ─────────────────────── */
*,
*::before,
*::after {
  box-sizing: border-box;
}

html {
  scroll-behavior: smooth;
}

/* ── 2. PAGE LOAD FADE-IN ───────────────────── */
@keyframes fadeIn {
  from { opacity: 0; transform: translateY(12px); }
  to   { opacity: 1; transform: translateY(0); }
}

@keyframes pageFadeIn {
  from { opacity: 0; }
  to   { opacity: 1; }
}

body {
  animation: pageFadeIn 0.5s ease both;
}

/* ── 3. BUTTONS ─────────────────────────────── */
button,
[role="button"],
input[type="submit"],
input[type="button"],
input[type="reset"],
.btn {
  transition:
    background-color 0.2s ease,
    color            0.2s ease,
    border-color     0.2s ease,
    box-shadow       0.2s ease,
    transform        0.15s ease,
    opacity          0.2s ease;
  cursor: pointer;
}

button:hover,
[role="button"]:hover,
.btn:hover {
  transform: translateY(-2px);
  box-shadow: 0 6px 18px rgba(0, 0, 0, 0.12);
}

button:active,
[role="button"]:active,
.btn:active {
  transform: translateY(0) scale(0.97);
  box-shadow: none;
  transition-duration: 0.08s;
}

/* ── 4. LINKS ───────────────────────────────── */
a {
  transition: color 0.2s ease, opacity 0.2s ease;
}

a:hover {
  opacity: 0.8;
}

.app-back-button {
  display: inline-flex;
  align-items: center;
  gap: 0.2rem;
  color: #2d6f7f;
  background: rgba(45, 111, 127, 0.1);
  border: 1px solid rgba(45, 111, 127, 0.18);
  border-radius: 8px;
  font-weight: 600;
}

.app-back-button:hover,
.app-back-button:focus {
  color: #21445f;
  background: rgba(45, 111, 127, 0.16);
  border-color: rgba(45, 111, 127, 0.28);
  opacity: 1;
}

.floating-chat-button {
  position: fixed !important;
  right: max(16px, env(safe-area-inset-right));
  left: auto !important;
  inset-inline-end: max(16px, env(safe-area-inset-right));
  bottom: 24px;
  z-index: 1040;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-height: 48px;
  padding: 0 18px;
  color: #fff;
  background: #2d6f7f;
  border: 1px solid rgba(255, 255, 255, 0.18);
  border-radius: 999px;
  box-shadow: 0 14px 34px rgba(45, 111, 127, 0.3);
  font-weight: 700;
  text-decoration: none;
}

.floating-chat-button:hover,
.floating-chat-button:focus {
  color: #fff;
  background: #21445f;
  opacity: 1;
}

.floating-chat-button i {
  font-size: 20px;
  line-height: 1;
}

.floating-chat-badge {
  position: absolute;
  top: -6px;
  right: -4px;
  min-width: 22px;
  height: 22px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0 6px;
  color: #fff;
  background: #dc3545;
  border: 2px solid #fff;
  border-radius: 999px;
  font-size: 11px;
  line-height: 1;
}

@media (max-width: 575.98px) {
  .floating-chat-button {
    right: max(10px, env(safe-area-inset-right));
    left: auto !important;
    inset-inline-end: max(10px, env(safe-area-inset-right));
    bottom: 16px;
    width: 52px;
    min-height: 52px;
    justify-content: center;
    padding: 0;
  }

  .floating-chat-label {
    display: none;
  }
}

/* ── 5. CARDS & SURFACES ────────────────────── */
.card,
[class*="card"],
article {
  transition:
    transform  0.25s ease,
    box-shadow 0.25s ease;
}

.card:hover,
[class*="card"]:hover,
article:hover {
  transform: translateY(-4px);
  box-shadow: 0 12px 32px rgba(0, 0, 0, 0.1);
}

/* ── 6. FORM INPUTS ─────────────────────────── */
input:not([type="checkbox"]):not([type="radio"]):not([type="range"]),
textarea,
select {
  transition:
    border-color 0.2s ease,
    box-shadow   0.2s ease,
    background   0.2s ease;
}

input:focus,
textarea:focus,
select:focus {
  outline: none;
  box-shadow: 0 0 0 3px rgba(99, 102, 241, 0.2);
}

/* ── 7. IMAGES ──────────────────────────────── */
img {
  transition: transform 0.3s ease, opacity 0.3s ease;
}

img:hover {
  transform: scale(1.02);
}

/* ── 8. NAV LINKS ───────────────────────────── */
nav a {
  position: relative;
  text-decoration: none;
  transition: color 0.2s ease;
}

nav a::after {
  content: '';
  position: absolute;
  bottom: -2px;
  left: 0;
  width: 0;
  height: 2px;
  background: currentColor;
  border-radius: 2px;
  transition: width 0.25s ease;
}

nav a:hover::after,
nav a.active::after {
  width: 100%;
}

/* ── 9. ICON / SVG ──────────────────────────── */
svg,
i,
[class*="icon"] {
  transition: transform 0.2s ease, opacity 0.2s ease, color 0.2s ease;
}

/* ── 10. MODALS & OVERLAYS ──────────────────── */
@keyframes slideUp {
  from { opacity: 0; transform: translateY(20px) scale(0.97); }
  to   { opacity: 1; transform: translateY(0)    scale(1); }
}

@keyframes fadeOverlay {
  from { opacity: 0; }
  to   { opacity: 1; }
}
/*
.modal.show .modal-dialog,
[class*="drawer"] {
  animation: slideUp 0.3s cubic-bezier(0.16, 1, 0.3, 1) both;
}

.modal {
  transform: none !important;
}

.modal-backdrop {
  position: fixed !important;
  inset: 0 !important;
  width: 100vw !important;
  height: 100vh !important;
  margin: 0 !important;
  transform: none !important;
  animation: fadeOverlay 0.25s ease both;
}

.overlay,
[class*="overlay"],
.backdrop:not(.modal-backdrop) {
  animation: fadeOverlay 0.25s ease both;
} */

/* ── 11. DROPDOWN / MENU ────────────────────── */
@keyframes dropDown {
  from { opacity: 0; transform: translateY(-8px); }
  to   { opacity: 1; transform: translateY(0); }
}

.dropdown,
[class*="dropdown"],
[class*="menu-list"],
[class*="popover"] {
  animation: dropDown 0.2s ease both;
  transform-origin: top center;
}

/* ── 12. TOAST / NOTIFICATION ───────────────── */
@keyframes slideInRight {
  from { opacity: 0; transform: translateX(100%); }
  to   { opacity: 1; transform: translateX(0); }
}

@keyframes slideOutRight {
  from { opacity: 1; transform: translateX(0); }
  to   { opacity: 0; transform: translateX(110%); }
}

.toast,
.alert,
[class*="toast"],
[class*="notification"],
[class*="snackbar"] {
  animation: slideInRight 0.3s cubic-bezier(0.16, 1, 0.3, 1) both;
}

.toast.hide,
.toast.dismissing {
  animation: slideOutRight 0.25s ease both;
}

/* ── 13. SKELETON / LOADING SHIMMER ─────────── */
@keyframes shimmer {
  from { background-position: -600px 0; }
  to   { background-position:  600px 0; }
}

.skeleton,
[class*="skeleton"],
[class*="loading-placeholder"] {
  background: linear-gradient(
    90deg,
    rgba(0, 0, 0, 0.06) 25%,
    rgba(0, 0, 0, 0.12) 37%,
    rgba(0, 0, 0, 0.06) 63%
  );
  background-size: 1200px 100%;
  animation: shimmer 1.4s ease infinite;
  border-radius: 4px;
}

/* ── 14. SCROLL-REVEAL UTILITY CLASSES ──────── */
/* Add .reveal to any element, JS not required for CSS part */
/* Pair with IntersectionObserver to add .visible class     */
.reveal {
  opacity: 0;
  transform: translateY(24px);
  transition: opacity 0.5s ease, transform 0.5s ease;
}

.reveal.visible {
  opacity: 1;
  transform: translateY(0);
}

.reveal-left {
  opacity: 0;
  transform: translateX(-24px);
  transition: opacity 0.5s ease, transform 0.5s ease;
}

.reveal-left.visible {
  opacity: 1;
  transform: translateX(0);
}

.reveal-scale {
  opacity: 0;
  transform: scale(0.94);
  transition: opacity 0.4s ease, transform 0.4s ease;
}

.reveal-scale.visible {
  opacity: 1;
  transform: scale(1);
}

/* Stagger children: add .stagger to parent */
.stagger > * {
  opacity: 0;
  transform: translateY(16px);
  transition: opacity 0.4s ease, transform 0.4s ease;
}

.stagger.visible > *:nth-child(1) { transition-delay: 0.05s; opacity:1; transform:translateY(0); }
.stagger.visible > *:nth-child(2) { transition-delay: 0.10s; opacity:1; transform:translateY(0); }
.stagger.visible > *:nth-child(3) { transition-delay: 0.15s; opacity:1; transform:translateY(0); }
.stagger.visible > *:nth-child(4) { transition-delay: 0.20s; opacity:1; transform:translateY(0); }
.stagger.visible > *:nth-child(5) { transition-delay: 0.25s; opacity:1; transform:translateY(0); }
.stagger.visible > *:nth-child(6) { transition-delay: 0.30s; opacity:1; transform:translateY(0); }

/* ── 15. TOOLTIPS ───────────────────────────── */
[title],
[data-tooltip] {
  position: relative;
}

[data-tooltip]::after {
  content: attr(data-tooltip);
  position: absolute;
  bottom: calc(100% + 6px);
  left: 50%;
  transform: translateX(-50%) translateY(4px);
  background: rgba(0, 0, 0, 0.75);
  color: #fff;
  font-size: 12px;
  padding: 4px 10px;
  border-radius: 4px;
  white-space: nowrap;
  pointer-events: none;
  opacity: 0;
  transition: opacity 0.2s ease, transform 0.2s ease;
}

[data-tooltip]:hover::after {
  opacity: 1;
  transform: translateX(-50%) translateY(0);
}

/* ── 16. CHECKBOX & RADIO ───────────────────── */
input[type="checkbox"],
input[type="radio"] {
  transition: transform 0.15s ease, box-shadow 0.15s ease;
  cursor: pointer;
}

input[type="checkbox"]:hover,
input[type="radio"]:hover {
  transform: scale(1.15);
}

input[type="checkbox"]:checked,
input[type="radio"]:checked {
  animation: pop 0.2s ease;
}

@keyframes pop {
  0%   { transform: scale(1); }
  50%  { transform: scale(1.25); }
  100% { transform: scale(1); }
}

/* ── 17. ACCORDION / DETAILS ────────────────── */
details > summary {
  cursor: pointer;
  transition: color 0.2s ease;
}

details[open] > summary {
  color: inherit;
}

details > *:not(summary) {
  animation: fadeIn 0.25s ease both;
}

/* ── 18. TABLE ROWS ─────────────────────────── */
table tr {
  transition: background-color 0.15s ease;
}

/* ── 19. PROGRESS BAR ───────────────────────── */
@keyframes progressFill {
  from { width: 0%; }
}

progress,
[role="progressbar"] > *,
.progress-bar {
  animation: progressFill 0.8s cubic-bezier(0.16, 1, 0.3, 1) both;
}

/* ── 20. SPIN UTILITY ───────────────────────── */
@keyframes spin {
  to { transform: rotate(360deg); }
}

/* .spin,
.loading,
[class*="spinner"] {
  animation: spin 0.75s linear infinite;
} */

/* ── 21. PULSE UTILITY ──────────────────────── */
@keyframes pulse {
  0%, 100% { opacity: 1; }
  50%       { opacity: 0.5; }
}

.pulse,
.pending {
  animation: pulse 1.5s ease-in-out infinite;
}

/* ── 22. BOUNCE UTILITY ─────────────────────── */
@keyframes bounce {
  0%, 100% { transform: translateY(0); }
  50%       { transform: translateY(-8px); }
}

.bounce {
  animation: bounce 0.8s ease infinite;
}

/* ── 23. RESPECT REDUCED MOTION ─────────────── */
@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration:   0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration:  0.01ms !important;
    scroll-behavior: auto !important;
  }
}