/* Статья «Паспорт и документы в ОАЭ». */

.art-alarm.is-violet{background:#f2e9ff;color:#7d3cc4}
.art-alarm.is-violet i{background:#9b50df;animation-name:art-pulse-violet}
@keyframes art-pulse-violet{0%{box-shadow:0 0 0 0 rgba(155,80,223,.45)}100%{box-shadow:0 0 0 10px rgba(155,80,223,0)}}

/* ---------- обложка ---------- */

.pass-hero{position:relative;display:grid;place-items:center;min-height:360px;border-radius:34px;background:linear-gradient(160deg,#f2ecff,#f7f8fa)}
.pass-stage{position:relative;width:240px;height:240px}
.pass-book{position:absolute;inset:20px;display:grid;place-items:center;border-radius:50%;background:#9b50df;color:#fff;font-size:100px;box-shadow:0 0 0 12px #fff,0 26px 50px rgba(155,80,223,.35)}
.pass-stamp{position:absolute;right:-6px;top:-10px;display:grid;place-items:center;width:78px;height:78px;border-radius:50%;background:#fff;color:#c78912;font-size:40px;box-shadow:0 14px 30px rgba(33,44,62,.16);transform-origin:50% 100%;animation:pass-stamp 3.6s cubic-bezier(.5,0,.3,1) infinite}
.pass-seal{position:absolute;left:4px;bottom:6px;display:grid;place-items:center;width:64px;height:64px;border-radius:50%;background:#1f9b64;color:#fff;font-size:34px;box-shadow:0 0 0 6px #fff,0 12px 24px rgba(31,155,100,.3);opacity:0;animation:pass-seal 3.6s cubic-bezier(.34,1.56,.64,1) infinite}
@keyframes pass-stamp{0%,18%{transform:translate(0,0) rotate(0)}32%{transform:translate(-50px,40px) rotate(-18deg) scale(1.08)}38%{transform:translate(-50px,48px) rotate(-18deg) scale(.94)}52%,100%{transform:translate(0,0) rotate(0)}}
@keyframes pass-seal{0%,36%{opacity:0;transform:scale(.3)}46%,86%{opacity:1;transform:scale(1)}100%{opacity:0;transform:scale(.8)}}
@keyframes pass-float{0%,100%{transform:translateY(0)}50%{transform:translateY(-10px)}}
.pass-hero__chip{position:absolute;display:inline-flex;align-items:center;gap:8px;padding:9px 14px;border-radius:999px;background:#fff;box-shadow:0 12px 30px rgba(33,44,62,.12);font-size:14px;font-weight:700;animation:pass-float 5s ease-in-out infinite}
.pass-hero__chip i{font-size:18px}
.pass-hero__chip.is-a{left:6%;top:14%;color:#1782e8}
.pass-hero__chip.is-b{right:6%;top:40%;color:#c78912;animation-delay:-1.6s}
.pass-hero__chip.is-c{left:12%;bottom:12%;color:#9b50df;animation-delay:-3.2s}

/* ---------- ситуации ---------- */

.pass-tabs{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:8px;margin-top:26px}
.pass-tabs button{display:flex;flex-direction:column;align-items:flex-start;gap:12px;padding:18px;border:0;border-radius:24px;background:var(--surface);color:var(--ink);font:inherit;font-size:16px;font-weight:700;line-height:1.25;text-align:left;cursor:pointer;transition:background .25s ease,color .25s ease,transform .35s cubic-bezier(.16,1,.3,1),box-shadow .3s ease}
.pass-tabs button i{display:grid;place-items:center;width:44px;height:44px;border-radius:50%;background:#fff;color:#9b50df;font-size:22px}
.pass-tabs button:hover{transform:translateY(-2px)}
.pass-tabs button[aria-selected='true']{background:#1D1D1F;color:#fff;box-shadow:0 18px 40px rgba(29,29,31,.2)}
.pass-tabs button[aria-selected='true'] i{background:#9b50df;color:#fff}
.pass-cases{margin-top:14px}
.pass-case{padding:clamp(18px,3vw,30px);border-radius:30px;background:var(--surface)}
.pass-case+.pass-case{margin-top:14px}
.pass-cases.is-tabbed .pass-case+.pass-case{margin-top:0}
.pass-case[hidden]{display:none}
.pass-case.is-in{animation:pass-in .5s cubic-bezier(.16,1,.3,1)}
@keyframes pass-in{from{opacity:0;transform:translateY(12px)}to{opacity:1;transform:none}}
.pass-steps{display:grid;gap:10px;margin:0;padding:0;list-style:none}
.pass-steps li{display:grid;grid-template-columns:auto minmax(0,1fr);gap:14px;padding:16px;border-radius:20px;background:#fff}
.pass-steps li>span{display:grid;place-items:center;width:38px;height:38px;border-radius:50%;background:#eee1ff;color:#7d3cc4;font-weight:800}
.pass-steps strong{display:block;font-size:17px;letter-spacing:-.015em}
.pass-steps p{margin:4px 0 0;color:var(--muted);font-size:15px;line-height:1.5}
.pass-case.is-in .pass-steps li{animation:pass-in .5s cubic-bezier(.16,1,.3,1) both}
.pass-case.is-in .pass-steps li:nth-child(2){animation-delay:.07s}
.pass-case.is-in .pass-steps li:nth-child(3){animation-delay:.14s}
.pass-case.is-in .pass-steps li:nth-child(4){animation-delay:.21s}
.pass-note{display:flex;gap:10px;align-items:flex-start;margin:14px 0 0;color:#5a3d0b;font-size:15px;line-height:1.45}
.pass-note i{flex:none;color:#e3a21a;font-size:20px}

.pass-chain{display:grid;grid-template-columns:auto minmax(16px,1fr) auto minmax(16px,1fr) auto minmax(16px,1fr) auto;align-items:center;gap:6px;margin-top:14px;padding:16px;border-radius:20px;background:#fff}
.pass-chain span{display:grid;justify-items:center;gap:6px;color:var(--muted);font-size:13px;font-weight:650;text-align:center}
.pass-chain span i{display:grid;place-items:center;width:44px;height:44px;border-radius:50%;background:#f5f5f7;color:#1D1D1F;font-size:21px}
.pass-chain span.is-done i{background:#1f9b64;color:#fff}
.pass-chain>i{height:3px;border-radius:9px;background:linear-gradient(90deg,#c9ced6 50%,transparent 50%) 0 0/10px 3px repeat-x}

/* ---------- консульства ---------- */

.pass-select{display:grid;gap:8px;max-width:420px;margin-top:22px}
.pass-select span{color:var(--muted);font-size:14px;font-weight:650}
.pass-select select{min-height:52px;padding:0 44px 0 16px;border:0;border-radius:16px;background:var(--surface) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='m6 9 6 6 6-6' fill='none' stroke='%231D1D1F' stroke-width='2.2' stroke-linecap='round'/%3E%3C/svg%3E") right 14px center/20px no-repeat;color:var(--ink);font:inherit;font-size:16px;font-weight:600;appearance:none;-webkit-appearance:none;cursor:pointer}
.pass-select select:focus-visible{outline:2px solid #0071E3;outline-offset:2px}
.pass-missions{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px;margin-top:18px}
.pass-mission{display:flex;flex-direction:column;gap:10px;padding:20px;border-radius:24px;background:var(--surface);transition:transform .45s cubic-bezier(.16,1,.3,1),box-shadow .3s ease}
.pass-mission[hidden]{display:none}
.pass-mission.is-focus{grid-column:1/-1;background:#fff;box-shadow:0 20px 50px rgba(33,44,62,.12);animation:pass-in .5s cubic-bezier(.16,1,.3,1)}
.pass-mission header strong{display:block;font-size:20px;letter-spacing:-.02em}
.pass-mission header span{color:var(--muted);font-size:14px}
.pass-mission p{display:flex;gap:8px;align-items:flex-start;margin:0;font-size:15px;line-height:1.45}
.pass-mission p i{flex:none;margin-top:2px;color:#9b50df}
.pass-mission a{display:inline-flex;align-items:center;gap:6px;align-self:flex-start;color:var(--blue-ink);font-size:15px;font-weight:650;text-decoration:none;word-break:break-word}
.pass-mission a:hover{text-decoration:underline}
.pass-mission small{color:var(--soft);font-size:13px;line-height:1.4}
.pass-warning{display:flex;gap:10px;align-items:flex-start;margin:16px 0 0;padding:14px 16px;border-radius:18px;background:#fff6e8;color:#5a3d0b;font-size:14px;line-height:1.5}
.pass-warning i{flex:none;color:#ee8b12;font-size:20px}

/* ---------- шенген ---------- */

.pass-schengen{margin-top:clamp(64px,8vw,112px);padding:clamp(28px,5vw,56px);border-radius:40px;background:linear-gradient(160deg,#eaf3ff,#f7f9fc)}
.pass-schengen h3{margin-top:30px}
.pass-schengen .pass-select select{background-color:#fff}
.pass-visa__result{margin-top:14px;padding:18px 20px;border-radius:22px;background:#fff;font-size:16px;line-height:1.5}
.pass-visa__result p{margin:0}
.pass-visa__result.is-free{background:#e6f6ee;color:#145c3b}
.pass-visa__result.is-visa{background:#fff;color:var(--ink);box-shadow:inset 0 0 0 2px #1f7ff2}
.pass-visa__result.is-warn{background:#fff6e8;color:#5a3d0b}
.pass-visa__result strong{font-size:18px}
.pass-checklist{display:grid;gap:8px;margin:14px 0 0;padding:0;list-style:none}
.pass-checklist li{display:flex;gap:12px;align-items:flex-start;padding:14px 16px;border-radius:18px;background:#fff;font-size:15px;line-height:1.45}
.pass-checklist i{flex:none;color:#1f9b64;font-size:21px}
.pass-timeline{display:grid;grid-template-columns:auto minmax(20px,1fr) auto minmax(20px,1fr) auto;align-items:center;gap:8px;margin:18px 0}
.pass-timeline div{display:grid;justify-items:center;padding:12px 16px;border-radius:18px;background:#fff;text-align:center}
.pass-timeline div.is-best{background:#1f7ff2;color:#fff;box-shadow:0 12px 28px rgba(31,127,242,.28)}
.pass-timeline strong{font-size:17px}
.pass-timeline span{font-size:13px;opacity:.75}
.pass-timeline>i{height:3px;border-radius:9px;background:#c9d8ee}

@media (max-width:900px){
  .pass-tabs{grid-template-columns:repeat(2,minmax(0,1fr))}
  .pass-missions{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media (max-width:560px){
  .pass-tabs button{padding:14px;font-size:15px}
  .pass-missions{grid-template-columns:1fr}
  .pass-chain{grid-template-columns:1fr;justify-items:center}
  .pass-chain>i{width:3px;height:16px;background:linear-gradient(#c9ced6 50%,transparent 50%) 0 0/3px 8px repeat-y}
  .pass-timeline{grid-template-columns:1fr}
  .pass-timeline>i{width:3px;height:14px;justify-self:center}
  .pass-schengen{border-radius:30px;margin-left:-4px;margin-right:-4px}
  .pass-hero{min-height:300px}
  .pass-stage{transform:scale(.85)}
}
@media (prefers-reduced-motion:reduce){
  .pass-hero__chip,.pass-stamp,.pass-seal{animation:none}
  .pass-seal{opacity:1}
}