/*
 * ═══════════════════════════════════════════════════════════════════
 *  JADWL — UX Enhancements Layer
 *  أضف هذا الملف في index.html بعد index.css مباشرةً
 *  <link rel="stylesheet" href="/jadwl-enhancements.css" />
 * ═══════════════════════════════════════════════════════════════════
 */

/* ─────────────────────────────────────────────────────────────────
   1. KEYFRAMES — كل الأنيميشنات المركزية
   ───────────────────────────────────────────────────────────────── */

@keyframes jdl-float {
  0%, 100% { transform: translateY(0px); }
  50%       { transform: translateY(-8px); }
}

@keyframes jdl-pulse-ring {
  0%   { box-shadow: 0 0 0 0 rgba(200,134,10,.55); }
  70%  { box-shadow: 0 0 0 14px rgba(200,134,10,0); }
  100% { box-shadow: 0 0 0 0 rgba(200,134,10,0); }
}

@keyframes jdl-shimmer-gold {
  0%   { background-position: 200% center; }
  100% { background-position: -200% center; }
}

@keyframes jdl-fade-up {
  from { opacity: 0; transform: translateY(22px); }
  to   { opacity: 1; transform: translateY(0); }
}

@keyframes jdl-fade-in {
  from { opacity: 0; }
  to   { opacity: 1; }
}

@keyframes jdl-scale-in {
  from { opacity: 0; transform: scale(.88); }
  to   { opacity: 1; transform: scale(1); }
}

@keyframes jdl-bounce-in {
  0%   { opacity: 0; transform: scale(.6); }
  55%  { opacity: 1; transform: scale(1.08); }
  75%  { transform: scale(.97); }
  100% { transform: scale(1); }
}

@keyframes jdl-slide-right {
  from { opacity: 0; transform: translateX(-18px); }
  to   { opacity: 1; transform: translateX(0); }
}

@keyframes jdl-ticker {
  0%   { transform: translateX(0); }
  100% { transform: translateX(-50%); }
}

@keyframes jdl-glow-pulse {
  0%, 100% { opacity: .55; }
  50%       { opacity: 1; }
}

@keyframes jdl-checkmark {
  0%   { stroke-dashoffset: 30; }
  100% { stroke-dashoffset: 0; }
}

@keyframes jdl-wave {
  0%, 100% { transform: scaleY(1); }
  50%       { transform: scaleY(1.4); }
}

@keyframes jdl-spin-slow {
  to { transform: rotate(360deg); }
}

@keyframes jdl-count-up {
  from { opacity: 0; transform: translateY(8px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* ─────────────────────────────────────────────────────────────────
   2. PROGRESS BAR — إضافة glow + تأثير shine
   ───────────────────────────────────────────────────────────────── */

.progress-bar {
  height: 3px !important;
}

.progress-fill {
  position: relative;
  overflow: hidden;
  box-shadow: 0 0 8px rgba(200,134,10,.6);
}

.progress-fill::after {
  content: "";
  position: absolute;
  top: 0;
  left: -60%;
  width: 40%;
  height: 100%;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,.65), transparent);
  animation: jdl-shimmer-gold 2.2s ease infinite;
}

/* ─────────────────────────────────────────────────────────────────
   3. HERO — حياة وحركة في الصفحة الرئيسية
   ───────────────────────────────────────────────────────────────── */

/* عنوان hero يظهر بأنيميشن */
.hero-title {
  animation: jdl-fade-up .75s cubic-bezier(.22,.68,0,1) both;
  animation-delay: .1s;
}

.hero-desc {
  animation: jdl-fade-up .75s cubic-bezier(.22,.68,0,1) both;
  animation-delay: .22s;
}

.btn-cta {
  animation: jdl-fade-up .75s cubic-bezier(.22,.68,0,1) both;
  animation-delay: .34s;
  position: relative;
  overflow: hidden;
}

/* Shine sweep على زر CTA عند hover */
.btn-cta::before {
  content: "";
  position: absolute;
  top: -50%;
  left: -75%;
  width: 50%;
  height: 200%;
  background: linear-gradient(
    105deg,
    transparent 40%,
    rgba(255,255,255,.28) 50%,
    transparent 60%
  );
  transform: skewX(-20deg);
  transition: left .55s ease;
}

.btn-cta:hover::before {
  left: 130%;
}

/* Pulse ring على زر CTA */
.btn-cta {
  animation: jdl-fade-up .75s cubic-bezier(.22,.68,0,1) both,
             jdl-pulse-ring 2.8s ease-out infinite;
  animation-delay: .34s, 2s;
}

.hero-checks {
  animation: jdl-fade-up .75s cubic-bezier(.22,.68,0,1) both;
  animation-delay: .46s;
}

/* ─── Social Proof Bar — شريط إحصاءات بعد hero ─── */
.jdl-social-proof {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0;
  background: var(--d2, #111);
  border-top: 1px solid rgba(200,134,10,.15);
  border-bottom: 1px solid rgba(200,134,10,.15);
  padding: .9rem 1rem;
  overflow: hidden;
  direction: rtl;
}

.jdl-stat {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: .15rem;
  padding: 0 1.5rem;
  flex: 1;
  animation: jdl-count-up .6s ease both;
}

.jdl-stat:nth-child(1) { animation-delay: .1s; }
.jdl-stat:nth-child(2) { animation-delay: .22s; }
.jdl-stat:nth-child(3) { animation-delay: .34s; }

.jdl-stat + .jdl-stat {
  border-right: 1px solid rgba(200,134,10,.18);
}

.jdl-stat-num {
  font-family: 'Tajawal', sans-serif;
  font-size: 1.35rem;
  font-weight: 900;
  color: var(--prl, #F5A623);
  line-height: 1;
  background: linear-gradient(90deg, var(--pr, #C8860A), var(--prl, #F5A623), var(--acc, #E8D5A3), var(--prl, #F5A623));
  background-size: 300% auto;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  animation: jdl-shimmer-gold 4s linear infinite;
}

.jdl-stat-label {
  font-size: .65rem;
  color: var(--mu, #6B6762);
  font-weight: 600;
  letter-spacing: .5px;
  white-space: nowrap;
}

/* ─── Floating Destination Tags فوق hero ─── */
.jdl-float-tags {
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 2;
  overflow: hidden;
}

.jdl-float-tag {
  position: absolute;
  background: rgba(10,10,10,.62);
  backdrop-filter: blur(10px);
  border: 1px solid rgba(200,134,10,.3);
  border-radius: 999px;
  padding: .4rem .85rem;
  font-size: .74rem;
  font-weight: 700;
  color: rgba(240,237,232,.85);
  display: flex;
  align-items: center;
  gap: .4rem;
  white-space: nowrap;
  animation: jdl-float linear infinite;
}

.jdl-float-tag:nth-child(1) { top: 18%; right: 6%; animation-duration: 5.5s; animation-delay: 0s; }
.jdl-float-tag:nth-child(2) { top: 28%; left: 5%; animation-duration: 6.2s; animation-delay: 1.1s; }
.jdl-float-tag:nth-child(3) { top: 58%; right: 7%; animation-duration: 5.8s; animation-delay: .6s; }
.jdl-float-tag:nth-child(4) { top: 68%; left: 6%; animation-duration: 6.5s; animation-delay: 1.8s; }
.jdl-float-tag:nth-child(5) { top: 44%; right: 4%; animation-duration: 5s;  animation-delay: 2.3s; }

/* ─── Nav Pill تحسين ─── */
.nav-pill {
  transition: all .25s ease;
}

.nav-pill:hover {
  background: rgba(124,58,237,.3) !important;
  border-color: rgba(167,139,250,.6) !important;
  transform: translateY(-1px);
}

/* ─────────────────────────────────────────────────────────────────
   4. COMPANION CARDS — بطاقات رفيق السفر
   ───────────────────────────────────────────────────────────────── */

.companion-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: .75rem;
  margin-bottom: 1.8rem;
}

.companion-card {
  position: relative;
  background: var(--d3, #181818);
  border: 1.5px solid var(--br, rgba(255,255,255,.06));
  border-radius: 16px;
  padding: 1.1rem .5rem .85rem;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: .55rem;
  cursor: pointer;
  transition: all .25s cubic-bezier(.22,.68,0,1.2);
  overflow: hidden;
  user-select: none;
}

/* Shimmer sweep على hover */
.companion-card::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(
    135deg,
    transparent 40%,
    rgba(200,134,10,.07) 50%,
    transparent 60%
  );
  opacity: 0;
  transition: opacity .3s;
}

.companion-card:hover {
  border-color: rgba(200,134,10,.4);
  transform: translateY(-3px) scale(1.02);
  box-shadow: 0 8px 24px rgba(0,0,0,.3), 0 0 0 1px rgba(200,134,10,.15);
}

.companion-card:hover::after {
  opacity: 1;
}

.companion-card:active {
  transform: scale(.97);
}

/* Selected state مع glow */
.companion-card.on {
  border-color: var(--pr, #C8860A) !important;
  background: rgba(200,134,10,.1) !important;
  box-shadow: 0 0 0 1px rgba(200,134,10,.3),
              0 6px 20px rgba(200,134,10,.18) !important;
  transform: translateY(-2px) scale(1.03);
}

/* Icon تكبير على selected */
.companion-card.on .companion-icon {
  animation: jdl-bounce-in .4s cubic-bezier(.22,.68,0,1.2) both;
}

.companion-icon {
  font-size: 2rem;
  line-height: 1;
  transition: transform .2s ease;
}

.companion-card:hover .companion-icon {
  transform: scale(1.15);
}

.companion-label {
  font-size: .78rem;
  font-weight: 700;
  color: var(--tx, #F0EDE8);
  text-align: center;
}

/* Checkmark badge عند الاختيار */
.companion-card.on::before {
  content: "✓";
  position: absolute;
  top: 6px;
  left: 6px;
  width: 18px;
  height: 18px;
  background: var(--pr, #C8860A);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: .6rem;
  color: #000;
  font-weight: 900;
  animation: jdl-scale-in .25s ease both;
  line-height: 18px;
  text-align: center;
}

/* ─────────────────────────────────────────────────────────────────
   5. STEP DOTS — مؤشر خطوات محسّن
   ───────────────────────────────────────────────────────────────── */

.step-dot.active {
  box-shadow: 0 0 0 3px rgba(200,134,10,.2),
              0 0 0 6px rgba(200,134,10,.08) !important;
  animation: jdl-pulse-ring 2s ease-out infinite;
}

.step-dot.done {
  background: rgba(200,134,10,.25) !important;
  border-color: var(--pr) !important;
}

/* Done dot يعرض checkmark */
.step-dot.done::after {
  content: "✓";
  font-size: .55rem;
  color: var(--prl);
  font-weight: 900;
}

.step-line.done {
  background: linear-gradient(to left, var(--pr), var(--prl)) !important;
  box-shadow: 0 0 4px rgba(200,134,10,.3);
}

/* ─────────────────────────────────────────────────────────────────
   6. COUNTRY CARDS — بطاقات الدول
   ───────────────────────────────────────────────────────────────── */

.country-card {
  position: relative;
  overflow: hidden;
  transition: all .22s cubic-bezier(.22,.68,0,1.2) !important;
}

.country-card:hover {
  transform: translateY(-2px) scale(1.04) !important;
  border-color: rgba(200,134,10,.5) !important;
  box-shadow: 0 6px 18px rgba(0,0,0,.3) !important;
  z-index: 2;
}

.country-card:hover .country-flag {
  transform: scale(1.2) rotate(3deg);
  display: inline-block;
}

.country-flag {
  transition: transform .22s ease;
  display: inline-block;
}

/* Selected country checkmark */
.country-card.on {
  border-color: var(--pr) !important;
  background: rgba(200,134,10,.1) !important;
}

.country-card.on::after {
  content: "✓";
  position: absolute;
  top: 4px;
  left: 4px;
  width: 16px;
  height: 16px;
  background: var(--pr);
  border-radius: 50%;
  font-size: .55rem;
  font-weight: 900;
  color: #000;
  display: flex;
  align-items: center;
  justify-content: center;
  line-height: 16px;
  text-align: center;
  animation: jdl-scale-in .2s ease both;
}

/* ─────────────────────────────────────────────────────────────────
   7. PREF CARDS — بطاقات التفضيلات
   ───────────────────────────────────────────────────────────────── */

.pref-card {
  transition: all .2s cubic-bezier(.22,.68,0,1.2) !important;
  position: relative;
  overflow: hidden;
}

.pref-card:hover {
  transform: translateY(-2px) scale(1.03) !important;
  border-color: rgba(200,134,10,.45) !important;
  box-shadow: 0 5px 16px rgba(0,0,0,.25) !important;
}

.pref-card.on {
  border-color: var(--pr) !important;
  box-shadow: 0 0 0 1px rgba(200,134,10,.25),
              0 4px 14px rgba(200,134,10,.15) !important;
}

.pref-card.on .pref-icon {
  animation: jdl-bounce-in .35s cubic-bezier(.22,.68,0,1.2) both;
}

/* ─────────────────────────────────────────────────────────────────
   8. BUDGET CARDS — بطاقات الميزانية
   ───────────────────────────────────────────────────────────────── */

.budget-card {
  transition: all .22s cubic-bezier(.22,.68,0,1.2) !important;
  position: relative;
  overflow: hidden;
}

.budget-card:hover {
  transform: translateY(-3px) !important;
  box-shadow: 0 8px 24px rgba(0,0,0,.3) !important;
}

.budget-card.on {
  transform: translateY(-2px) !important;
  box-shadow: 0 0 0 1px rgba(200,134,10,.3),
              0 8px 22px rgba(200,134,10,.18) !important;
}

/* Shine sweep */
.budget-card::before {
  content: "";
  position: absolute;
  top: 0;
  left: -100%;
  width: 60%;
  height: 100%;
  background: linear-gradient(
    105deg,
    transparent 30%,
    rgba(255,255,255,.08) 50%,
    transparent 70%
  );
  transition: left .5s ease;
  pointer-events: none;
}

.budget-card:hover::before {
  left: 140%;
}

/* ─────────────────────────────────────────────────────────────────
   9. LOADING OVERLAY — تجربة تحميل ممتعة
   ───────────────────────────────────────────────────────────────── */

.overlay {
  background: rgba(8,8,8,.96) !important;
}

/* Animated ring مزدوج */
.ring {
  border-width: 2.5px !important;
  position: relative;
}

.ring::before {
  content: "";
  position: absolute;
  inset: -5px;
  border-radius: 50%;
  border: 1.5px solid rgba(200,134,10,.15);
  animation: jdl-spin-slow 3s linear infinite reverse;
}

/* Overlay content تحسين */
.overlay-msg {
  font-size: .93rem !important;
  color: var(--mu2) !important;
  max-width: 260px !important;
  text-align: center;
  line-height: 1.75 !important;
}

/* Loading جمل مميزة */
.jdl-loading-dest {
  display: inline-block;
  font-size: 1.8rem;
  animation: jdl-float 2.5s ease-in-out infinite;
  margin-bottom: .5rem;
}

/* Wave bars animation */
.jdl-wave-bars {
  display: flex;
  align-items: flex-end;
  gap: 4px;
  height: 28px;
  margin: .5rem auto 0;
}

.jdl-wave-bar {
  width: 4px;
  background: var(--pr, #C8860A);
  border-radius: 3px;
  animation: jdl-wave .8s ease-in-out infinite;
}

.jdl-wave-bar:nth-child(1) { animation-delay: 0s;    height: 60%; }
.jdl-wave-bar:nth-child(2) { animation-delay: .12s;  height: 100%; }
.jdl-wave-bar:nth-child(3) { animation-delay: .24s;  height: 70%; }
.jdl-wave-bar:nth-child(4) { animation-delay: .36s;  height: 85%; }
.jdl-wave-bar:nth-child(5) { animation-delay: .48s;  height: 55%; }

/* ─────────────────────────────────────────────────────────────────
   10. STREAMING PREVIEW — أنيميشن أثناء بناء الخطة
   ───────────────────────────────────────────────────────────────── */

.stream-day-card {
  animation: jdl-fade-up .4s cubic-bezier(.22,.68,0,1.2) both !important;
}

.stream-day-card:nth-child(1) { animation-delay: .05s; }
.stream-day-card:nth-child(2) { animation-delay: .12s; }
.stream-day-card:nth-child(3) { animation-delay: .2s; }
.stream-day-card:nth-child(4) { animation-delay: .28s; }
.stream-day-card:nth-child(5) { animation-delay: .36s; }
.stream-day-card:nth-child(6) { animation-delay: .44s; }
.stream-day-card:nth-child(7) { animation-delay: .52s; }

.stream-act-row {
  transition: background .18s ease;
}

.stream-act-row:hover {
  background: rgba(200,134,10,.04);
}

/* ─────────────────────────────────────────────────────────────────
   11. BACK/NEXT BUTTONS — تحسين الأزرار
   ───────────────────────────────────────────────────────────────── */

.btn-next {
  position: relative;
  overflow: hidden;
  transition: all .25s cubic-bezier(.22,.68,0,1.2) !important;
}

.btn-next::before {
  content: "";
  position: absolute;
  top: -50%;
  left: -75%;
  width: 50%;
  height: 200%;
  background: linear-gradient(
    105deg,
    transparent 40%,
    rgba(255,255,255,.22) 50%,
    transparent 60%
  );
  transform: skewX(-20deg);
  transition: left .5s ease;
}

.btn-next:not(:disabled):hover::before {
  left: 130%;
}

.btn-next:not(:disabled):hover {
  transform: translateY(-2px) scale(1.02) !important;
}

.btn-next:not(:disabled):active {
  transform: scale(.97) !important;
}

.btn-back {
  transition: all .2s ease !important;
}

.btn-back:hover {
  color: var(--tx) !important;
  transform: translateX(2px) !important;
}

/* ─────────────────────────────────────────────────────────────────
   12. QUIZ BOX — entrance animation
   ───────────────────────────────────────────────────────────────── */

.quiz-box {
  animation: jdl-fade-up .45s cubic-bezier(.22,.68,0,1.1) both !important;
}

/* Value bar تحسين */
.steps-value-bar {
  display: flex;
  flex-wrap: wrap;
  gap: .5rem;
  justify-content: center;
  margin-top: 1.2rem;
  padding: .8rem 1rem;
  background: rgba(200,134,10,.06);
  border-radius: 12px;
  border: 1px solid rgba(200,134,10,.12);
  animation: jdl-fade-up .5s ease both;
  animation-delay: .2s;
}

.steps-value-bar span {
  font-size: .76rem;
  color: var(--mu2);
  font-weight: 600;
  white-space: nowrap;
  transition: color .2s;
}

.steps-value-bar span:hover {
  color: var(--prl);
}

/* ─────────────────────────────────────────────────────────────────
   13. RESULT PAGE — تحسينات صفحة النتيجة
   ───────────────────────────────────────────────────────────────── */

/* Day header تأثير */
.day-header {
  transition: all .2s ease;
  position: relative;
  overflow: hidden;
}

.day-header::after {
  content: "";
  position: absolute;
  top: 0;
  right: 0;
  width: 60px;
  height: 100%;
  background: linear-gradient(to right, transparent, rgba(200,134,10,.08));
  pointer-events: none;
}

/* Activity cards */
.activity-card {
  transition: all .2s cubic-bezier(.22,.68,0,1) !important;
}

.activity-card:hover {
  transform: translateY(-2px) !important;
  box-shadow: 0 6px 20px rgba(0,0,0,.3) !important;
}

/* Must-do badge تحسين */
.must-do-badge {
  animation: jdl-glow-pulse 2.5s ease-in-out infinite;
}

/* Booking buttons تحسين */
.booking-btn {
  transition: all .2s cubic-bezier(.22,.68,0,1.2) !important;
  position: relative;
  overflow: hidden;
}

.booking-btn:hover {
  transform: translateY(-1px) !important;
  box-shadow: 0 4px 14px rgba(0,0,0,.3) !important;
}

.booking-btn:active {
  transform: scale(.97) !important;
}

/* ─────────────────────────────────────────────────────────────────
   14. STEPPER (Days) — تحسين عداد الأيام
   ───────────────────────────────────────────────────────────────── */

.stepper-val {
  transition: all .2s cubic-bezier(.22,.68,0,1.5) !important;
  display: inline-block;
}

.stepper-btn:not(:disabled):active + .stepper-val,
.stepper-val.changed {
  animation: jdl-bounce-in .3s cubic-bezier(.22,.68,0,1.5) both;
}

/* ─────────────────────────────────────────────────────────────────
   15. SEARCH INPUT — تحسين حقل البحث
   ───────────────────────────────────────────────────────────────── */

.search-input:focus {
  border-color: rgba(200,134,10,.55) !important;
  box-shadow: 0 0 0 3px rgba(200,134,10,.1) !important;
  background: rgba(200,134,10,.04) !important;
}

/* ─────────────────────────────────────────────────────────────────
   16. POPULAR COUNTRIES BANNER — "وجهات رائجة"
   ───────────────────────────────────────────────────────────────── */

.jdl-popular-label {
  font-size: .68rem;
  color: var(--mu);
  font-weight: 700;
  letter-spacing: 1.5px;
  margin-bottom: .45rem;
  display: flex;
  align-items: center;
  gap: .4rem;
}

.jdl-popular-label::before,
.jdl-popular-label::after {
  content: "";
  flex: 1;
  height: 1px;
  background: var(--br);
}

/* ─────────────────────────────────────────────────────────────────
   17. PAYWALL MODAL — تحسين شاشة الدفع
   ───────────────────────────────────────────────────────────────── */

/* Tier cards تحسين */
.tier-card {
  transition: all .25s cubic-bezier(.22,.68,0,1.2);
  position: relative;
  overflow: hidden;
}

.tier-card:hover {
  transform: translateY(-4px) scale(1.02);
  box-shadow: 0 10px 30px rgba(0,0,0,.35);
}

.tier-card::before {
  content: "";
  position: absolute;
  top: -50%;
  left: -80%;
  width: 55%;
  height: 200%;
  background: linear-gradient(
    105deg,
    transparent 35%,
    rgba(255,255,255,.07) 50%,
    transparent 65%
  );
  transform: skewX(-20deg);
  transition: left .6s ease;
}

.tier-card:hover::before {
  left: 140%;
}

/* ─────────────────────────────────────────────────────────────────
   18. FAB — زر العودة الطافي
   ───────────────────────────────────────────────────────────────── */

.result-fab,
.fab-btn {
  transition: all .25s cubic-bezier(.22,.68,0,1.2) !important;
}

.result-fab:hover,
.fab-btn:hover {
  transform: scale(1.1) translateY(-2px) !important;
  box-shadow: 0 8px 24px rgba(200,134,10,.4) !important;
}

.result-fab:active,
.fab-btn:active {
  transform: scale(.95) !important;
}

/* ─────────────────────────────────────────────────────────────────
   19. SCROLL ANIMATIONS — ظهور العناصر عند التمرير
   ───────────────────────────────────────────────────────────────── */

.seo-features ul li {
  transition: all .25s ease !important;
}

.seo-features ul li:hover {
  background: rgba(200,134,10,.06) !important;
  border-color: rgba(200,134,10,.25) !important;
  transform: translateX(-3px);
}

.seo-faq details {
  transition: all .2s ease;
}

.seo-faq details[open] {
  border-color: rgba(200,134,10,.2) !important;
}

.seo-faq details summary:hover {
  color: var(--prl) !important;
}

/* ─────────────────────────────────────────────────────────────────
   20. TICKER STRIP — شريط تمرير وجهات (اختياري تضيفه)
   ───────────────────────────────────────────────────────────────── */

.jdl-ticker-wrap {
  overflow: hidden;
  background: linear-gradient(135deg, rgba(200,134,10,.08), rgba(200,134,10,.04));
  border-top: 1px solid rgba(200,134,10,.12);
  border-bottom: 1px solid rgba(200,134,10,.12);
  padding: .55rem 0;
  direction: ltr;
  -webkit-mask-image: linear-gradient(to right, transparent, black 12%, black 88%, transparent);
  mask-image: linear-gradient(to right, transparent, black 12%, black 88%, transparent);
}

.jdl-ticker-inner {
  display: flex;
  gap: 0;
  width: max-content;
  animation: jdl-ticker 28s linear infinite;
}

.jdl-ticker-item {
  display: flex;
  align-items: center;
  gap: .45rem;
  padding: 0 1.6rem;
  font-size: .75rem;
  font-weight: 700;
  color: var(--mu2);
  white-space: nowrap;
  border-right: 1px solid rgba(200,134,10,.15);
}

.jdl-ticker-item:last-child {
  border-right: none;
}

.jdl-ticker-item:hover {
  color: var(--prl);
}

/* ─────────────────────────────────────────────────────────────────
   21. MOBILE TOUCH FEEDBACK
   ───────────────────────────────────────────────────────────────── */

@media (hover: none) {
  .companion-card:active {
    background: rgba(200,134,10,.12) !important;
    transform: scale(.97) !important;
  }

  .country-card:active {
    background: rgba(200,134,10,.08) !important;
    transform: scale(.96) !important;
  }

  .pref-card:active {
    background: rgba(200,134,10,.1) !important;
    transform: scale(.96) !important;
  }

  .btn-next:active, .btn-cta:active {
    transform: scale(.96) !important;
  }
}

/* ─────────────────────────────────────────────────────────────────
   22. HONEYMOON / GIRLS THEME OVERRIDES
   ───────────────────────────────────────────────────────────────── */

[data-theme="honeymoon"] .companion-card.on::before,
[data-theme="honeymoon"] .country-card.on::after {
  background: #B5445A !important;
}

[data-theme="honeymoon"] .jdl-stat-num {
  background: linear-gradient(90deg, #B5445A, #E06888, #F5C0CF, #E06888) !important;
  background-size: 300% auto !important;
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}

[data-theme="honeymoon"] .btn-cta {
  animation: jdl-fade-up .75s cubic-bezier(.22,.68,0,1) both,
             jdl-pulse-ring 2.8s ease-out infinite !important;
}

@keyframes jdl-pulse-ring-hm {
  0%   { box-shadow: 0 0 0 0 rgba(181,68,90,.6); }
  70%  { box-shadow: 0 0 0 14px rgba(181,68,90,0); }
  100% { box-shadow: 0 0 0 0 rgba(181,68,90,0); }
}

[data-theme="honeymoon"] .btn-cta {
  animation: jdl-pulse-ring-hm 2.8s ease-out infinite !important;
}

[data-theme="girls"] .companion-card.on::before,
[data-theme="girls"] .country-card.on::after {
  background: #C050A0 !important;
}

[data-theme="girls"] .jdl-stat-num {
  background: linear-gradient(90deg, #C050A0, #E070C0, #F0B0E0, #E070C0) !important;
  background-size: 300% auto !important;
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}

/* ─────────────────────────────────────────────────────────────────
   23. RESPONSIVE — موبايل
   ───────────────────────────────────────────────────────────────── */

@media (max-width: 480px) {
  .jdl-float-tag {
    display: none; /* على موبايل تختفي الـtags الطافية */
  }

  .jdl-social-proof {
    padding: .7rem .5rem;
  }

  .jdl-stat {
    padding: 0 .8rem;
  }

  .jdl-stat-num {
    font-size: 1.1rem;
  }

  .jdl-stat-label {
    font-size: .58rem;
  }

  .companion-grid {
    gap: .55rem;
  }

  .companion-card {
    padding: .9rem .35rem .7rem;
  }

  .companion-icon {
    font-size: 1.7rem;
  }

  .companion-label {
    font-size: .7rem;
  }
}

/* ─────────────────────────────────────────────────────────────────
   24. UTILITY CLASSES — تستخدمها في JSX عند الحاجة
   ───────────────────────────────────────────────────────────────── */

.jdl-animate-in {
  animation: jdl-fade-up .45s cubic-bezier(.22,.68,0,1.1) both;
}

.jdl-gold-text {
  background: linear-gradient(90deg, var(--pr), var(--prl), var(--acc), var(--prl));
  background-size: 300% auto;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  animation: jdl-shimmer-gold 4s linear infinite;
}

.jdl-glow-dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--gn, #3DB870);
  box-shadow: 0 0 6px var(--gn, #3DB870);
  animation: jdl-glow-pulse 1.8s ease-in-out infinite;
  display: inline-block;
}