/* ============================================================
   AriaFly - Custom CSS
   Complément de Tailwind CSS pour les animations et styles custom
   ============================================================ */

/* ─── Variables ──────────────────────────────────────────── */
:root {
  --primary:      #0f4c81;
  --primary-dark: #0a3d6a;
  --secondary:    #e8b923;
  --dark:         #1a1a2e;
}

/* ─── Base ───────────────────────────────────────────────── */
html { scroll-behavior: smooth; }
body { font-family: 'Poppins', 'Segoe UI', Arial, sans-serif; line-height: 1.6; }

/* ─── Animations ─────────────────────────────────────────── */
@keyframes fadeInUp {
  from { opacity: 0; transform: translateY(30px); }
  to   { opacity: 1; transform: translateY(0);    }
}
@keyframes fadeInLeft {
  from { opacity: 0; transform: translateX(-50px); }
  to   { opacity: 1; transform: translateX(0);     }
}
@keyframes fadeInRight {
  from { opacity: 0; transform: translateX(50px); }
  to   { opacity: 1; transform: translateX(0);    }
}
@keyframes float {
  0%, 100% { transform: translateY(0);    }
  50%       { transform: translateY(-10px); }
}

.animate-fadeInUp    { animation: fadeInUp    0.6s ease forwards;  }
.animate-fadeInLeft  { animation: fadeInLeft  0.6s ease forwards;  }
.animate-fadeInRight { animation: fadeInRight 0.6s ease forwards;  }
.animate-float       { animation: float 3s ease-in-out infinite;   }

/* ─── Card hover ─────────────────────────────────────────── */
.card-hover {
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}
.card-hover:hover {
  transform: translateY(-8px);
  box-shadow: 0 20px 40px rgba(15, 76, 129, 0.15);
}

/* ─── Flash messages ─────────────────────────────────────── */
.flash-msg {
  animation: fadeInUp 0.4s ease forwards;
}

/* ─── Form focus ring ────────────────────────────────────── */
input:focus, select:focus, textarea:focus {
  outline: none;
  border-color: var(--primary);
  box-shadow: 0 0 0 3px rgba(15, 76, 129, 0.15);
}

/* ─── FAQ accordion ──────────────────────────────────────── */
.faq-item:hover { background: #f9fafb; }
.faq-answer { transition: all 0.3s ease; }

/* ─── Scrollbar ──────────────────────────────────────────── */
::-webkit-scrollbar       { width: 8px; }
::-webkit-scrollbar-track { background: #f1f5f9; }
::-webkit-scrollbar-thumb { background: var(--primary); border-radius: 4px; }
::-webkit-scrollbar-thumb:hover { background: var(--primary-dark); }

/* ═══════════════════════════════════════════════════════
   OFFER CARDS
═══════════════════════════════════════════════════════ */
.offer-card {
  position: relative; overflow: hidden; border-radius: 1.25rem;
  transition: transform 0.35s cubic-bezier(0.4,0,0.2,1), box-shadow 0.35s ease;
}
.offer-card:hover { transform: translateY(-8px); box-shadow: 0 24px 48px rgba(15,76,129,0.2); }
.offer-card .offer-bg { width:100%; height:260px; object-fit:cover; transition: transform 0.5s ease; display:block; }
.offer-card:hover .offer-bg { transform: scale(1.07); }
.offer-card .offer-gradient {
  position:absolute; inset:0;
  background: linear-gradient(to top, rgba(10,30,60,0.88) 40%, rgba(10,30,60,0.1) 100%);
}
.offer-card .offer-overlay {
  position:absolute; bottom:0; left:0; right:0;
  background: rgba(15,76,129,0.93); backdrop-filter: blur(4px);
  padding: 1.2rem 1.5rem;
  transform: translateY(100%);
  transition: transform 0.35s cubic-bezier(0.4,0,0.2,1);
}
.offer-card:hover .offer-overlay { transform: translateY(0); }

/* Badge colors */
.offer-badge { display:inline-flex; align-items:center; font-size:.72rem; font-weight:700;
               letter-spacing:.04em; padding:.2rem .65rem; border-radius:999px; }
.badge-red    { background:#ef4444; color:#fff; }
.badge-orange { background:#f97316; color:#fff; }
.badge-green  { background:#22c55e; color:#fff; }
.badge-blue   { background:#3b82f6; color:#fff; }
.badge-purple { background:#a855f7; color:#fff; }
.badge-yellow { background:#eab308; color:#1a1a2e; }

/* ═══════════════════════════════════════════════════════
   STATS COUNTERS
═══════════════════════════════════════════════════════ */
.stat-number {
  font-size: 2.75rem; font-weight: 800; line-height: 1;
  background: linear-gradient(135deg, #0f4c81, #1a5a9e);
  -webkit-background-clip: text; -webkit-text-fill-color: transparent;
  background-clip: text;
}

/* ═══════════════════════════════════════════════════════
   TESTIMONIALS SLIDER
═══════════════════════════════════════════════════════ */
.testimonial-slide { display:none; animation: slideIn 0.5s ease forwards; }
.testimonial-slide.active { display:block; }

@keyframes slideIn {
  from { opacity:0; transform: translateX(30px); }
  to   { opacity:1; transform: translateX(0); }
}

.slider-dot {
  width:10px; height:10px; border-radius:999px;
  background:#cbd5e1; transition:all 0.3s ease;
  cursor:pointer; border:none; padding:0;
}
.slider-dot.active { background:#0f4c81; width:28px; }

.slider-nav-btn {
  width:44px; height:44px; border-radius:50%;
  border:2px solid #e2e8f0; background:white; color:#0f4c81;
  display:flex; align-items:center; justify-content:center;
  transition:all 0.2s ease; cursor:pointer;
}
.slider-nav-btn:hover { background:#0f4c81; color:white; border-color:#0f4c81; }
.stars { color:#f59e0b; }

/* ── PRELOADER ────────────────────────────────────────────── */
#preloader {
  position: fixed;
  inset: 0;
  z-index: 9999;
  background: #0f4c81;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  transition: opacity 0.6s ease, transform 0.6s ease;
}
#preloader.hidden {
  opacity: 0;
  transform: scale(0.95);
  pointer-events: none;
}

.preloader-orbit {
  width: 80px;
  height: 80px;
  border: 3px solid rgba(232,185,35,0.25);
  border-top-color: #e8b923;
  border-radius: 50%;
  animation: preloader-spin 1s linear infinite;
  position: relative;
  margin-bottom: 28px;
}
.preloader-orbit::after {
  content: '';
  position: absolute;
  inset: -10px;
  border: 2px solid rgba(255,255,255,0.06);
  border-radius: 50%;
  animation: preloader-spin 1.8s linear infinite reverse;
}

.preloader-plane {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 36px;
  height: 36px;
  margin: -18px 0 0 -18px;
  animation: preloader-fly 2.2s ease-in-out infinite;
}

.preloader-text {
  color: rgba(255,255,255,0.85);
  font-size: 0.95rem;
  letter-spacing: 0.06em;
  font-weight: 500;
  animation: preloader-pulse 1.5s ease-in-out infinite;
}
[dir="rtl"] .preloader-text {
  font-family: 'Cairo', 'Segoe UI', Arial, sans-serif;
}

@keyframes preloader-spin { to { transform: rotate(360deg); } }
@keyframes preloader-fly  {
  0%, 100% { transform: translateY(0) rotate(-8deg); }
  50%      { transform: translateY(-16px) rotate(8deg); }
}
@keyframes preloader-pulse {
  0%, 100% { opacity: 0.55; }
  50%      { opacity: 1; }
}