/* Booking path: connected, animated cards with contrast-safe light/dark states. */
.journey{position:relative;isolation:isolate;overflow:hidden;background:linear-gradient(135deg,color-mix(in srgb,var(--blue) 8%,var(--paper)),var(--paper) 58%,color-mix(in srgb,var(--deep) 7%,var(--paper)))}
.journey:after{content:"";position:absolute;z-index:-1;width:380px;height:380px;border:1px solid color-mix(in srgb,var(--blue) 18%,transparent);border-radius:50%;inset-inline-end:-190px;top:8%;box-shadow:0 0 0 34px color-mix(in srgb,var(--blue) 4%,transparent),0 0 0 68px color-mix(in srgb,var(--blue) 3%,transparent);pointer-events:none}
.journey .section-title{width:min(1120px,100%);margin:0 auto 48px}
.steps{position:relative;isolation:isolate;width:min(1120px,100%);margin:0 auto;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:0;padding:8px 0;background:none;border:0}
.steps:before,.steps:after{content:"";position:absolute;z-index:0;inset-inline-start:16.666%;inset-inline-end:16.666%;top:57px;height:3px;border:0;border-radius:99px;pointer-events:none}
.steps:before{background:repeating-linear-gradient(90deg,color-mix(in srgb,var(--deep) 35%,var(--line)) 0 9px,transparent 9px 17px)}
.steps:after{inset-inline-start:16.666%;inset-inline-end:auto;width:24%;background:linear-gradient(90deg,transparent,var(--blue),#fff,var(--blue),transparent);filter:drop-shadow(0 0 6px color-mix(in srgb,var(--blue) 65%,transparent));animation:journeyFlow 3.4s ease-in-out infinite}
.journey .steps article{position:relative;z-index:1;display:grid;grid-template-rows:58px auto;align-content:start;gap:0;min-height:190px;margin:0 11px;padding:20px 22px 22px;overflow:visible;border:1px solid color-mix(in srgb,var(--deep) 13%,var(--line));border-radius:20px;background:color-mix(in srgb,var(--paper) 92%,transparent);box-shadow:0 14px 34px color-mix(in srgb,var(--deep) 8%,transparent);opacity:1;transform:translateY(0);text-align:start;transition:transform .3s ease,box-shadow .3s ease,border-color .3s ease}
.journey .steps article:nth-child(2){transform:translateY(-11px)}
.journey .steps article:hover,.journey .steps article:nth-child(2):hover{transform:translateY(-8px);border-color:color-mix(in srgb,var(--blue) 72%,var(--line));box-shadow:0 22px 48px color-mix(in srgb,var(--deep) 15%,transparent)}
.journey .steps b{position:relative;z-index:2;display:grid;place-items:center;justify-self:center;width:58px;height:58px;border:4px solid var(--paper);border-radius:50%;background:var(--deep);color:#fff;font:800 17px/1 Vazir,Tahoma,sans-serif;box-shadow:0 0 0 1px color-mix(in srgb,var(--deep) 24%,transparent),0 8px 22px color-mix(in srgb,var(--deep) 18%,transparent);animation:journeyPulse 2.8s ease-in-out infinite}
.journey .steps article:nth-child(2) b{animation-delay:.45s}.journey .steps article:nth-child(3) b{animation-delay:.9s}
.journey .steps h3{margin:16px 0 5px;color:var(--ink);font-size:18px;line-height:1.5}
.journey .steps p{max-width:330px;margin:0;color:var(--muted);font-size:14px;line-height:1.9}
@keyframes journeyFlow{0%{transform:translateX(0);opacity:.35}50%{opacity:1}100%{transform:translateX(178%);opacity:.35}}
@keyframes journeyPulse{0%,100%{box-shadow:0 0 0 1px color-mix(in srgb,var(--deep) 24%,transparent),0 8px 22px color-mix(in srgb,var(--deep) 18%,transparent)}50%{box-shadow:0 0 0 7px color-mix(in srgb,var(--blue) 15%,transparent),0 10px 28px color-mix(in srgb,var(--blue) 28%,transparent)}}
html[dir=rtl] .steps:before{background:repeating-linear-gradient(270deg,color-mix(in srgb,var(--deep) 35%,var(--line)) 0 9px,transparent 9px 17px)}
html[dir=rtl] .steps:after{animation-name:journeyFlowRtl}
@keyframes journeyFlowRtl{0%{transform:translateX(0);opacity:.35}50%{opacity:1}100%{transform:translateX(-178%);opacity:.35}}
@media(max-width:700px){
  .journey .section-title{margin-bottom:28px}
  .steps{width:min(560px,100%);grid-template-columns:1fr;gap:12px;padding:3px 0}
  .steps:before,.steps:after{inset-inline-start:28px;inset-inline-end:auto;top:32px;bottom:32px;width:3px;height:auto}
  .steps:before{background:repeating-linear-gradient(180deg,color-mix(in srgb,var(--deep) 35%,var(--line)) 0 9px,transparent 9px 17px)}
  .steps:after{width:3px;height:28%;background:linear-gradient(180deg,transparent,var(--blue),#fff,var(--blue),transparent);animation:journeyFlowVertical 3.4s ease-in-out infinite}
  .journey .steps article,.journey .steps article:nth-child(2){grid-template-columns:58px minmax(0,1fr);grid-template-rows:auto;column-gap:16px;min-height:0;margin:0;padding:15px 16px 17px;transform:none}
  .journey .steps article:hover,.journey .steps article:nth-child(2):hover{transform:translateY(-2px)}
  .journey .steps b{grid-column:1;grid-row:1 / span 2;justify-self:start;width:56px;height:56px}
  .journey .steps h3{grid-column:2;margin:2px 0 4px}
  .journey .steps p{grid-column:2;max-width:none}
  html[dir=rtl] .steps:before{background:repeating-linear-gradient(180deg,color-mix(in srgb,var(--deep) 35%,var(--line)) 0 9px,transparent 9px 17px)}
  html[dir=rtl] .steps:after{animation-name:journeyFlowVertical}
}
@keyframes journeyFlowVertical{0%{transform:translateY(0);opacity:.25}50%{opacity:1}100%{transform:translateY(260%);opacity:.25}}
@media(prefers-reduced-motion:reduce){.journey .steps b,.steps:after{animation:none!important}.journey .steps article,.journey .steps article:nth-child(2){transition:none;transform:none}}
