@import url('https://fonts.googleapis.com/css2?family=Poppins:ital,wght@0,300;0,400;0,500;0,600;0,700;0,800;1,400&display=swap');

/* ============================================================
   TREND 2026 STRICT ARCHITECTURAL FLAT & NEO-MINIMALIST RULES
   - STRICTLY ZERO SHADOWS (box-shadow: none !important)
   - STRICTLY ZERO GRADIENTS (flat solid colors only)
   - STRICT CONSTANT ICON COLOR (#421454) - NEVER WHITE ON ACTIVE
   - FLUID ARCHITECTURAL MICRO-ANIMATIONS (Render & Click)
   ============================================================ */

:root {
  --color-primary: #421454;
  --color-secondary: #FF5B42;
  --color-bg: #F4F4F6;
  --color-surface: #FFFFFF;
  --color-border: #E4E4E7;
  --color-text-main: #18181B;
  --color-text-muted: #71717A;
  --color-icon: #421454;
  --color-wa: #25D366;
}

/* Hard reset for shadows across all pseudo-elements and components */
*,
*::before,
*::after {
  box-shadow: none !important;
  text-shadow: none !important;
  filter: none !important;
  -webkit-box-shadow: none !important;
}

body {
  font-family: 'Poppins', system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  background-color: var(--color-bg);
  color: var(--color-text-main);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  overflow-x: hidden;
}

/* ============================================================
   STRICT CONSTANT ICON COLOR RULE
   ICONS MUST ALWAYS BE CONSTANT (#421454) AND NEVER WHITE ON ACTIVE
   ============================================================ */

.icon-constant,
svg.icon-constant,
.lucide,
[data-lucide] {
  color: var(--color-icon) !important;
  stroke: var(--color-icon) !important;
  fill: none !important;
  transition: transform 0.15s cubic-bezier(0.16, 1, 0.3, 1), stroke 0.15s ease;
}

/* GUARANTEE: In active, focus, hover or pressed states, icons NEVER turn white */
:active > .lucide,
:active > [data-lucide],
:focus > .lucide,
:focus > [data-lucide],
:hover > .lucide,
:hover > [data-lucide],
.lucide:active,
.lucide:focus,
.lucide:hover,
[data-lucide]:active,
[data-lucide]:focus,
[data-lucide]:hover,
.btn-primary:active .lucide,
.btn-secondary:active .lucide,
.btn-click-effect:active .lucide,
button:active .lucide,
button:focus .lucide,
a:active .lucide,
a:focus .lucide,
.group:focus-within .lucide,
.group:active .lucide {
  color: var(--color-icon) !important;
  stroke: var(--color-icon) !important;
  fill: none !important;
}

/* Form inputs: flat architectural border states */
.form-input {
  transition: border-color 0.18s cubic-bezier(0.16, 1, 0.3, 1), transform 0.15s ease, background-color 0.18s ease;
  border-width: 1.5px;
  border-color: #D4D4D8;
  background-color: #FFFFFF;
}

.form-input:hover {
  border-color: #A1A1AA;
}

.form-input:focus {
  border-color: var(--color-primary) !important;
  outline: 2px solid var(--color-primary);
  outline-offset: 1px;
  transform: translateY(-1px);
}

.form-input.is-invalid {
  border-color: var(--color-secondary) !important;
  outline: 2px solid var(--color-secondary);
  outline-offset: 1px;
  animation: shakeX 0.35s ease;
}

/* Smooth expansion for conditional container without layout jumps */
.conditional-container {
  overflow: hidden;
  transition: max-height 0.35s cubic-bezier(0.16, 1, 0.3, 1), opacity 0.28s ease, transform 0.28s cubic-bezier(0.16, 1, 0.3, 1);
}

.conditional-container.collapsed {
  max-height: 0;
  opacity: 0;
  transform: translateY(-10px) scale(0.98);
  pointer-events: none;
  visibility: hidden;
}

.conditional-container.expanded {
  max-height: 260px;
  opacity: 1;
  transform: translateY(0) scale(1);
  pointer-events: auto;
  visibility: visible;
}

/* Modal backdrop strictly flat */
.flat-modal-backdrop {
  background-color: rgba(18, 18, 22, 0.65);
}

/* Custom flat scrollbar */
::-webkit-scrollbar {
  width: 6px;
  height: 6px;
}

::-webkit-scrollbar-track {
  background: #F4F4F6;
}

::-webkit-scrollbar-thumb {
  background: #D4D4D8;
  border-radius: 3px;
}

::-webkit-scrollbar-thumb:hover {
  background: var(--color-primary);
}

/* ============================================================
   CLICK & HOVER MICRO-ANIMATIONS (NO SHADOW / NO GRADIENT)
   ============================================================ */

.btn-click-effect {
  transition: transform 0.12s cubic-bezier(0.2, 0, 0, 1), background-color 0.15s ease, border-color 0.15s ease;
  user-select: none;
  -webkit-user-select: none;
}

.btn-click-effect:active {
  transform: scale(0.96) !important;
}

.btn-secondary {
  background-color: var(--color-secondary);
  color: #FFFFFF;
}

.btn-secondary:hover {
  background-color: #E84E36;
  transform: translateY(-1.5px);
}

.btn-secondary:active {
  background-color: #D33E27;
  transform: scale(0.97) translateY(0);
}

.btn-primary {
  background-color: var(--color-primary);
  color: #FFFFFF;
}

.btn-primary:hover {
  background-color: #340F43;
  transform: translateY(-1.5px);
}

.btn-primary:active {
  background-color: #260A31;
  transform: scale(0.97) translateY(0);
}

/* Floating WhatsApp Button Animation */
.floating-wa-btn {
  transition: transform 0.2s cubic-bezier(0.34, 1.56, 0.64, 1), background-color 0.15s ease;
  animation: floatBob 3s ease-in-out infinite, entrancePop 0.5s cubic-bezier(0.16, 1, 0.3, 1) forwards;
}

.floating-wa-btn:hover {
  transform: scale(1.08) translateY(-4px) !important;
  animation-play-state: paused;
}

.floating-wa-btn:active {
  transform: scale(0.94) translateY(0) !important;
}

/* ============================================================
   ON-RENDER ENTRANCE ANIMATIONS (Smooth Staggered Flow)
   ============================================================ */

@keyframes fadeInDown {
  from {
    opacity: 0;
    transform: translateY(-16px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes fadeInUp {
  from {
    opacity: 0;
    transform: translateY(24px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes scaleIn {
  from {
    opacity: 0;
    transform: scale(0.94);
  }
  to {
    opacity: 1;
    transform: scale(1);
  }
}

@keyframes entrancePop {
  0% {
    opacity: 0;
    transform: scale(0.6) translateY(20px);
  }
  70% {
    transform: scale(1.06) translateY(-4px);
  }
  100% {
    opacity: 1;
    transform: scale(1) translateY(0);
  }
}

@keyframes floatBob {
  0%, 100% {
    transform: translateY(0);
  }
  50% {
    transform: translateY(-5px);
  }
}

@keyframes shakeX {
  0%, 100% { transform: translateX(0); }
  20%, 60% { transform: translateX(-5px); }
  40%, 80% { transform: translateX(5px); }
}

@keyframes countdownBar {
  from { width: 100%; }
  to { width: 0%; }
}

/* Animation utility classes */
.anim-nav {
  animation: fadeInDown 0.45s cubic-bezier(0.16, 1, 0.3, 1) forwards;
}

.anim-hero {
  animation: fadeInUp 0.55s cubic-bezier(0.16, 1, 0.3, 1) forwards;
}

.anim-card {
  animation: fadeInUp 0.65s cubic-bezier(0.16, 1, 0.3, 1) 0.1s both;
}

.anim-stagger-1 {
  animation: fadeInUp 0.45s cubic-bezier(0.16, 1, 0.3, 1) 0.15s both;
}

.anim-stagger-2 {
  animation: fadeInUp 0.45s cubic-bezier(0.16, 1, 0.3, 1) 0.22s both;
}

.anim-stagger-3 {
  animation: fadeInUp 0.45s cubic-bezier(0.16, 1, 0.3, 1) 0.29s both;
}

.anim-stagger-4 {
  animation: fadeInUp 0.45s cubic-bezier(0.16, 1, 0.3, 1) 0.36s both;
}

.anim-stagger-5 {
  animation: fadeInUp 0.45s cubic-bezier(0.16, 1, 0.3, 1) 0.43s both;
}

.anim-modal-in {
  animation: scaleIn 0.3s cubic-bezier(0.16, 1, 0.3, 1) forwards;
}

.redirect-progress-bar {
  animation: countdownBar 3s linear forwards;
}