/* ====== Entrance Animations ====== */
.entrance-fade-in {
    animation: fadeIn 0.8s ease-in-out;
}
@keyframes fadeIn {
    from { opacity: 0; }
    to { opacity: 1; }
}

.entrance-slide-up {
    animation: slideUp 0.8s ease-out;
}
@keyframes slideUp {
    from { opacity: 0; transform: translateY(20px); }
    to { opacity: 1; transform: translateY(0); }
}

.entrance-zoom-in {
    animation: zoomIn 0.6s ease-in-out;
}
@keyframes zoomIn {
    from { opacity: 0; transform: scale(0.8); }
    to { opacity: 1; transform: scale(1); }
}


/* ====== Hover Animations ====== */
.hover-grow:hover {
    transform: scale(1.05);
    transition: transform 0.3s ease;
}

.hover-shrink:hover {
    transform: scale(0.95);
    transition: transform 0.3s ease;
}

.hover-pulse:hover {
    animation: pulse 0.6s ease-in-out;
}
@keyframes pulse {
    0%, 100% { transform: scale(1); }
    50% { transform: scale(1.1); }
}


/* ====== General Styling Helpers (Optional) ====== */
.wpcod-order-form input[type="text"],
.wpcod-order-form input[type="tel"] {
    padding: 8px;
    width: 100%;
    margin-bottom: 10px;
    border-radius: 4px;
    border: 1px solid #ccc;
}

.wpcod-order-form button {
    padding: 12px 25px;
    font-weight: bold;
    cursor: pointer;
    border-radius: 4px;
    transition: background-color 0.3s ease;
}


/* Enhanced attention loop: Pulse + Shake */
.wpcod-attention-loop {
  animation: wpcodPulseShake 4s ease-in-out infinite;
}

@keyframes wpcodPulseShake {
  0%, 100% {
    transform: scale(1) translateX(0);
  }
  10% {
    transform: scale(1.05) translateX(-3px);
  }
  20% {
    transform: scale(1.1) translateX(3px);
  }
  30% {
    transform: scale(1.05) translateX(-2px);
  }
  40% {
    transform: scale(1.08) translateX(2px);
  }
  50% {
    transform: scale(1.1) translateX(0);
  }
  60% {
    transform: scale(1.05) translateX(1px);
  }
  70% {
    transform: scale(1.02) translateX(-1px);
  }
  80% {
    transform: scale(1.04) translateX(1px);
  }
  90% {
    transform: scale(1.02) translateX(0);
  }
}


@keyframes pulse-wobble {
  0% { transform: scale(1) rotate(0); }
  25% { transform: scale(1.05) rotate(-3deg); }
  50% { transform: scale(0.97) rotate(3deg); }
  75% { transform: scale(1.02) rotate(-1deg); }
  100% { transform: scale(1) rotate(0); }
}

.wpcod-attention-loop {
  animation: pulse-wobble 1s ease-in-out infinite;
  animation-delay: 0s;
  animation-iteration-count: infinite;
  animation-direction: normal;
  animation-timing-function: ease-in-out;
  animation-play-state: running;
  animation-fill-mode: both;
}

.wp-cod-form-wrapper,
.wp-cod-form-wrapper * {
    font-family: 'Cairo', Arial, Helvetica, sans-serif !important;
}