 
    :root{--slotShadow:0 6px 20px rgba(0,0,0,.06)}
    [data-slot]{position:relative}
    [data-slot].locked{opacity:.85}
    [data-slot].locked::after{content:"\1F512";position:absolute;inset-inline-end:.5rem;top:.5rem;opacity:.5}
    .vline:before{content:"";position:absolute;left:1.15rem;top:0;bottom:0;width:2px;background:rgba(13,148,136,.18)} /* teal */
    :dir(rtl) .vline:before{left:auto;right:1.15rem}

    /* طيّ الخانات */
    [data-slot].collapsed .space-y-2,
    [data-slot].collapsed .mt-2,
    [data-slot].collapsed textarea,
    [data-slot].collapsed .grid{display:none}
    [data-slot].collapsed{padding-block:.75rem}

    /* Review modal */
    .review-backdrop{position:fixed;inset:0;background:rgba(0,0,0,.55);display:grid;place-items:center;z-index:70}
    .review-card{max-height:85vh;overflow:auto}

    /* Place Picker modal */
    .place-backdrop{position:fixed;inset:0;background:rgba(0,0,0,.55);display:grid;place-items:center;z-index:80}
    .place-card{max-height:85vh;overflow:auto}
    .place-tab{padding:.4rem .75rem;border-radius:.65rem;border:1px solid rgba(0,0,0,.08);background:#f8fafc;font-weight:600;font-size:.875rem}
    .place-tab.active{background:#0f766e;color:#fff;border-color:#0f766e}  /* teal */

    /* Flatpickr → ألوان Teal */
    .flatpickr-calendar { border-radius: 14px; box-shadow: 0 10px 35px rgba(0,0,0,.12) }
    .flatpickr-months .flatpickr-prev-month,
    .flatpickr-months .flatpickr-next-month { color:#0f766e } /* teal */
    .flatpickr-day.selected,
    .flatpickr-day.startRange,
    .flatpickr-day.endRange,
    .flatpickr-day.selected:hover { background:#0f766e; border-color:#0f766e }
    .flatpickr-day.today { border-color:#14b8a6 } /* teal-500 */
    .flatpickr-day:hover { background:#f1f5f9 } /* slate-100 */

    @media print{
      .review-backdrop{position:static;background:transparent}
      .step, .prev, .next, #btnFinish, #btnToggleAll { display:none !important; }
      #planDays { page-break-inside: avoid; }
      [data-slot]{ break-inside: avoid; }
    }




  
 /*title*/
.heroHeader .anim{
  opacity:0;
  transform:translateY(12px) scale(.985);
  transition:opacity .7s cubic-bezier(.22,.61,.36,1),
             transform .7s cubic-bezier(.22,.61,.36,1);
}
.heroHeader.show .anim{ opacity:1; transform:none; }
.heroHeader .delay-0{ transition-delay:.05s }
.heroHeader .delay-1{ transition-delay:.15s }
.heroHeader .delay-2{ transition-delay:.28s }
.heroHeader .delay-3{ transition-delay:.42s }
.heroHeader .delay-4{ transition-delay:.58s }
 
.badge-dot{
  width:.5rem; height:.5rem; border-radius:9999px; background:#0f766e;
  box-shadow:0 0 0 0 rgba(15,118,110,.45);
  animation:pulse-badge 1.8s ease-out infinite;
}
@keyframes pulse-badge{
  0%{ box-shadow:0 0 0 0 rgba(15,118,110,.45) }
  100%{ box-shadow:0 0 0 18px rgba(15,118,110,0) }
}

 
.title-gradient{
  background:linear-gradient(90deg,#0f766e 0%,#14b8a6 50%,#0ea5a0 100%);
  -webkit-background-clip:text; background-clip:text; color:transparent;
}

 
.shine{
  background:linear-gradient(90deg,rgba(20,184,166,.15),rgba(20,184,166,.65),rgba(20,184,166,.15));
  background-size:200% 100%;
  animation:shine-move 2.4s linear infinite;
}
@keyframes shine-move{ 0%{background-position:0% 50%} 100%{background-position:100% 50%} }

/* تحسينات RTL للزخارف */
:dir(rtl) .shine{ animation-direction: reverse; }




 /*step1*/
/* Staggered reveal */
#step1Basics .stagger { opacity: 0; transform: translateY(10px) scale(.995); transition: opacity .6s ease, transform .6s ease; }
#step1Basics.show .stagger { opacity: 1; transform: none; }
#step1Basics .stagger:nth-child(1) { transition-delay: .05s }
#step1Basics .stagger:nth-child(2) { transition-delay: .12s }
#step1Basics .stagger:nth-child(3) { transition-delay: .2s }
#step1Basics .stagger:nth-child(4) { transition-delay: .28s }
#step1Basics .stagger:nth-child(5) { transition-delay: .36s }

/* Nice elevated buttons */
.elev-btn { box-shadow: 0 8px 24px -10px rgba(0,0,0,.25); }
.elev-btn:hover { transform: translateY(-1px); box-shadow: 0 12px 28px -12px rgba(0,0,0,.28); }
.elev-btn:active { transform: translateY(0); box-shadow: 0 8px 20px -12px rgba(0,0,0,.25); }

/* Preview chips nicer */
#daysPreviewList .chip {
  display:inline-flex;align-items:center;gap:.5rem;
  padding:.35rem .65rem;border-radius:9999px;
  background:linear-gradient(180deg,#fff, #f7faf9);
  border:1px solid rgba(0,0,0,.08); color:#0f172a; font-size:.875rem;
  box-shadow: 0 8px 18px -12px rgba(0,0,0,.25);
  transition: transform .2s ease, box-shadow .2s ease;
}
#daysPreviewList .chip:hover { transform: translateY(-1px); box-shadow: 0 14px 26px -16px rgba(0,0,0,.28); }
#daysPreviewList .chip .del { color:#dc2626; font-weight:600; }


/* padding منطقي يدعم RTL/LTR */
.input-pad{
  padding-inline-start: 2.75rem; /* مساحة للأيقونة */
  padding-inline-end: 0.875rem;
}

/* نسخة أوسع للمسافة بين الأيقونة والنص */
.input-pad-lg{
  padding-inline-start: 3.5rem; /* زوديها لو عايزة مسافة أكبر */
}

/* تحسين شكل الـ placeholder (اختياري) */
.input-pad::placeholder,
.input-pad-lg::placeholder{
  color: #94a3b8; /* slate-400 */
}




 
/* step2*/
#step2Cities{
  opacity:0;
  transform: translateY(12px) scale(.99);
  transition: opacity .7s cubic-bezier(.22,.61,.36,1),
              transform .7s cubic-bezier(.22,.61,.36,1),
              box-shadow .6s ease, border-color .6s ease;
  border-color: rgba(148,163,184,.35);
  box-shadow: 0 16px 40px -28px rgba(2,44,34,.16);
}
#step2Cities.show{
  opacity:1;
  transform:none;
  border-color: rgba(13,148,136,.28);
  box-shadow: 0 28px 64px -30px rgba(13,148,136,.30);
}
#step2Cities:hover{
  box-shadow: 0 34px 80px -34px rgba(13,148,136,.40);
}

/* جلو زخرفي */
#step2Cities .step2Glow{
  transition: opacity .9s ease, transform .9s ease;
  transform: scale(.9);
}
#step2Cities.show .step2Glow{
  opacity:1; transform: scale(1);
}

/* Stagger داخل Step 2 */
#step2Cities .stagger { opacity: 0; transform: translateY(10px) scale(.995); transition: opacity .6s ease, transform .6s ease; }
#step2Cities.show .stagger { opacity: 1; transform: none; }
#step2Cities .stagger:nth-child(1) { transition-delay: .10s }
#step2Cities .stagger:nth-child(2) { transition-delay: .18s }
#step2Cities .stagger:nth-child(3) { transition-delay: .26s }
#step2Cities .stagger:nth-child(4) { transition-delay: .34s }
#step2Cities .stagger:nth-child(5) { transition-delay: .42s }

 
.elev-btn { box-shadow: 0 8px 24px -10px rgba(0,0,0,.22); transition: transform .15s ease, box-shadow .2s ease; }
.elev-btn:hover { transform: translateY(-1px); box-shadow: 0 12px 28px -12px rgba(0,0,0,.26); }
.elev-btn:active { transform: translateY(0); box-shadow: 0 8px 20px -12px rgba(0,0,0,.22); }

 



 /*step3*/
#step3Plan{
  opacity:0;
  transform: translateY(12px) scale(.99);
  transition: opacity .7s cubic-bezier(.22,.61,.36,1),
              transform .7s cubic-bezier(.22,.61,.36,1);
}
#step3Plan.show{
  opacity:1;
  transform:none;
}

 
@keyframes fadeUp {
  from { opacity:0; transform: translateY(8px) }
  to   { opacity:1; transform: none }
}
#planDays > * { animation: fadeUp .55s ease both; }
#planDays > *:nth-child(1){ animation-delay: .05s }
#planDays > *:nth-child(2){ animation-delay: .12s }
#planDays > *:nth-child(3){ animation-delay: .19s }
#planDays > *:nth-child(4){ animation-delay: .26s }
#planDays > *:nth-child(5){ animation-delay: .33s }
#planDays > *:nth-child(6){ animation-delay: .40s }

 
#planDays [data-slot]{
  background:#fff;
  border-color: rgba(148,163,184,.35);  
  box-shadow: 0 12px 32px -18px rgba(2,44,34,.16);
}

 
#planDays input,
#planDays textarea,
#planDays select{
  background:#fff;
  border:1px solid rgba(0,0,0,.12);
  border-radius:.75rem;
  padding:.5rem .625rem;
  box-shadow: 0 8px 22px -16px rgba(0,0,0,.28);
  transition: box-shadow .2s ease, border-color .2s ease, transform .1s ease;
}
#planDays input:hover,
#planDays textarea:hover,
#planDays select:hover{
  box-shadow: 0 12px 26px -18px rgba(0,0,0,.28);
}
#planDays input:focus,
#planDays textarea:focus,
#planDays select:focus{
  outline:none;
  border-color: rgba(13,148,136,.45); /* teal */
  box-shadow: 0 14px 34px -16px rgba(13,148,136,.35);
  transform: translateY(-1px);
}

 
#planDays .rounded-lg{
  box-shadow: 0 10px 24px -18px rgba(0,0,0,.22);
}





/*footer*/
 
  .ink-underline {
    position: relative;
    display: inline-block;
  }
  .ink-underline::after {
    content: "";
    position: absolute;
    left: 50%; bottom: -3px;
    width: 0; height: 2px;
    border-radius: 9999px;
    background: linear-gradient(90deg,#facc15,#fde047,#facc15);
    transform: translateX(-50%);
    transition: width .42s cubic-bezier(.22,1,.36,1), height .42s cubic-bezier(.22,1,.36,1);
  }
  .ink-underline:hover::after,
  .ink-underline:focus-visible::after {
    width: 100%; height: 3px;
  }

  [data-reveal]{opacity:0; will-change:transform,opacity;}
  @keyframes revealLeft {
    from {opacity:0; transform:translateX(-40px);}
    to   {opacity:1; transform:translateX(0);}
  }
  @keyframes revealRight {
    from {opacity:0; transform:translateX(40px);}
    to   {opacity:1; transform:translateX(0);}
  }

  .is-inview[data-reveal="left"]  {animation:revealLeft .7s cubic-bezier(.22,1,.36,1) both}
  .is-inview[data-reveal="right"] {animation:revealRight .7s cubic-bezier(.22,1,.36,1) both}

  .is-inview{animation-delay:var(--rv-delay,0s)}

  @media (prefers-reduced-motion: reduce){
    .ink-underline::after{transition:none}
    [data-reveal]{opacity:1 !important; transform:none !important; animation:none !important}
  }
 


 
 









 

 

 