/* PMW Viagens — movimento: carregador de busca, entrada dos cartões, formas de pagamento e microinterações */

/* ───── carregador de busca ───── */
.sload{position:relative;overflow:hidden;border-radius:20px;margin-bottom:16px;border:1px solid var(--line);background:linear-gradient(180deg,#eaf2ff 0%,#f6f9ff 70%,var(--card) 100%);box-shadow:var(--sh);animation:up .35s both;transition:opacity .35s,transform .35s,max-height .35s;max-height:260px}
[data-theme=dark] .sload{background:linear-gradient(180deg,#14233f 0%,#101c33 70%,var(--card) 100%)}
.sload.out{opacity:0;transform:translateY(-8px);max-height:0;margin-bottom:0;border-width:0}
.sload .sky{position:relative;height:104px;padding:0 22px;display:flex;align-items:center}
.sload .route{position:relative;z-index:2;display:flex;align-items:center;gap:12px;width:100%}
.sload .end{font-size:20px;font-weight:800;letter-spacing:.02em;color:var(--navy);min-width:44px}
.sload .end:last-child{text-align:right}
.sload .trail{position:relative;flex:1;height:36px;display:block}
.sload .trail .dash{position:absolute;left:0;right:0;top:50%;height:3px;margin-top:-1.5px;border-radius:3px;background:repeating-linear-gradient(90deg,color-mix(in srgb,var(--navy3) 50%,transparent) 0 10px,transparent 10px 20px);background-size:20px 3px;-webkit-mask:linear-gradient(90deg,transparent,#000 12%,#000 88%,transparent);mask:linear-gradient(90deg,transparent,#000 12%,#000 88%,transparent);animation:dashmove .7s linear infinite}
.sload .trail .trv{position:absolute;left:0;top:50%;width:34px;height:34px;margin-top:-17px;border-radius:50%;background:var(--accent);color:#fff;display:flex;align-items:center;justify-content:center;box-shadow:0 6px 16px rgba(255,122,26,.45);animation:cross 3.2s cubic-bezier(.55,.05,.35,1) infinite}
.sload .trail .trv svg{width:18px;height:18px}
.sload.flight .trail .trv svg{transform:rotate(0deg)}
.sload.hotel .trail .trv{animation:cross 3.6s ease-in-out infinite;background:var(--navy3)}
.sload.package .trail .trv{background:var(--ok);box-shadow:0 6px 16px rgba(20,160,90,.4)}
@keyframes cross{0%{left:0;transform:translateY(0) scale(.9)}25%{transform:translateY(-9px) scale(1)}50%{transform:translateY(0) scale(1.05)}75%{transform:translateY(-8px) scale(1)}100%{left:calc(100% - 34px);transform:translateY(0) scale(.9)}}
@keyframes dashmove{to{background-position-x:20px}}
.sload .cld{position:absolute;height:18px;border-radius:99px;background:#fff;opacity:.85;filter:blur(.3px);animation:drift linear infinite}
[data-theme=dark] .sload .cld{background:#27406b;opacity:.6}
.sload .cld::before,.sload .cld::after{content:"";position:absolute;background:inherit;border-radius:50%}
.sload .cld::before{width:22px;height:22px;left:10px;top:-11px}.sload .cld::after{width:16px;height:16px;left:30px;top:-7px}
.sload .c1{width:64px;top:14px;left:-80px;animation-duration:15s}
.sload .c2{width:48px;top:64px;left:-80px;animation-duration:21s;animation-delay:-8s;opacity:.6}
.sload .c3{width:78px;top:34px;left:-90px;animation-duration:27s;animation-delay:-16s;opacity:.5}
@keyframes drift{to{transform:translateX(calc(100vw + 160px))}}
@media(min-width:1180px){@keyframes drift{to{transform:translateX(1280px)}}}
.sload .sbar{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:6px 20px 14px;min-height:46px;flex-wrap:wrap}
.sload .msgs{position:relative;flex:1;min-width:200px;height:22px;font-weight:700;color:var(--info)}
.sload .msgs span{position:absolute;left:0;top:0;white-space:nowrap;opacity:0;animation:msgcycle calc(var(--n)*2.6s) infinite;animation-delay:calc(var(--i)*2.6s)}
@keyframes msgcycle{0%{opacity:0;transform:translateY(8px)}6%,22%{opacity:1;transform:none}28%,100%{opacity:0;transform:translateY(-8px)}}
.sload .msgs[style*="--n:3"] span{animation-name:msgcycle3}
@keyframes msgcycle3{0%{opacity:0;transform:translateY(8px)}8%,28%{opacity:1;transform:none}36%,100%{opacity:0;transform:translateY(-8px)}}
.sload .found{display:inline-flex;align-items:center;gap:6px;background:var(--card);border:1px solid var(--line);border-radius:999px;padding:6px 13px;font-size:13.5px;font-weight:700;color:var(--ink);box-shadow:var(--sh)}
.sload .found b{color:var(--ok);font-size:16px;font-variant-numeric:tabular-nums}
.sload .found.bump{animation:pop .4s}
.sload .prog{margin:0;border-radius:0;height:4px}

/* ───── entrada dos cartões ───── */
.enter{animation:cardin .5s cubic-bezier(.2,.7,.2,1) both;animation-delay:var(--d,0ms)}
@keyframes cardin{from{opacity:0;transform:translateY(18px) scale(.985)}to{opacity:1;transform:none}}
#view>*{animation:viewin .35s both}
@keyframes viewin{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}

/* ───── esqueleto mais fiel ───── */
.skel{position:relative;overflow:hidden;border:1px solid var(--line)}
.skel::after{content:"";position:absolute;inset:0;background:linear-gradient(100deg,transparent 30%,color-mix(in srgb,var(--card) 70%,transparent) 50%,transparent 70%);transform:translateX(-100%);animation:sheen 1.4s infinite}
@keyframes sheen{to{transform:translateX(100%)}}

/* ───── cartões e botões ───── */
.fcard,.hcard,.pcard,.dcard,.ord,.opt{transition:transform .22s cubic-bezier(.2,.7,.2,1),box-shadow .22s,border-color .18s}
@media(hover:hover){
  .fcard:hover,.hcard:hover,.pcard:hover,.ord:hover{transform:translateY(-3px);box-shadow:0 14px 34px rgba(16,40,74,.14)}
  .dcard:hover{transform:translateY(-4px) scale(1.01);box-shadow:var(--sh2)}
  .hcard .ph img,.pcard .ph img{transition:transform .6s cubic-bezier(.2,.7,.2,1)}
  .hcard:hover .ph img,.pcard:hover .ph img{transform:scale(1.06)}
}
.btn{position:relative;overflow:hidden;transition:transform .12s,box-shadow .18s,filter .18s,background .18s}
.btn:not(.ghost):not(.txt):hover{filter:brightness(1.06);box-shadow:0 8px 22px rgba(255,122,26,.32)}
.btn.ok:not(.ghost):hover{box-shadow:0 8px 22px rgba(20,160,90,.32)}
.btn:active{transform:scale(.97)}
.btn::after{content:"";position:absolute;inset:0;background:radial-gradient(circle,rgba(255,255,255,.45) 0,transparent 60%);opacity:0;transform:scale(.2);transition:opacity .4s,transform .5s}
.btn:active::after{opacity:1;transform:scale(2.4);transition:0s}
.btn.lg:not(.ghost):not(.txt):not([disabled]){background-image:linear-gradient(110deg,transparent 40%,rgba(255,255,255,.22) 50%,transparent 60%);background-size:250% 100%;background-position:150% 0;animation:btnshine 4.5s 1.5s infinite}
@keyframes btnshine{0%,60%{background-position:150% 0}100%{background-position:-60% 0}}
.hero .bg{animation:kenburns 26s ease-in-out infinite alternate}
@keyframes kenburns{from{transform:scale(1)}to{transform:scale(1.07)}}
.sorts button.on{animation:pop .3s}
.chip.on{animation:pop .25s}

/* ───── selos de pagamento ───── */
.pms{display:flex;flex-wrap:wrap;gap:4px;margin:7px 0 2px;justify-content:inherit}
.fc-buy .pms,.hcard .hp .pms,.pcard .pp2 .pms{justify-content:flex-end}
.tag.g{display:inline-flex;grid-template-columns:none}  /* .g do calendário (grid de 7 colunas) vazava para a etiqueta verde */
.pm{display:inline-flex;align-items:center;gap:4px;padding:3px 8px;border-radius:999px;font-size:11.5px;font-weight:700;line-height:1.5;white-space:nowrap;border:1px solid transparent}
.pm svg{width:13px;height:13px}
.pm.pix{background:var(--okbg);color:var(--ok);border-color:color-mix(in srgb,var(--ok) 25%,transparent)}
.pm.card{background:var(--infobg);color:var(--info);border-color:color-mix(in srgb,var(--info) 25%,transparent)}
.pm.bol{background:var(--warnbg);color:var(--warn);border-color:color-mix(in srgb,var(--warn) 30%,transparent)}
.pm.fin{background:#f1ebff;color:#6a3fd0;border-color:#d9c9ff}
[data-theme=dark] .pm.fin{background:#2a2050;color:#bda6ff;border-color:#43397a}
@media(max-width:860px){.fc-buy .pms,.hcard .hp .pms,.pcard .pp2 .pms{justify-content:flex-start}}

/* ───── resumo do carrinho: formas de pagamento ───── */
.paylist{margin-top:14px;padding-top:12px;border-top:1px dashed var(--line);font-size:13.5px}
.paylist h4{font-size:12px;text-transform:uppercase;letter-spacing:.05em;color:var(--mut);margin-bottom:8px}
.paylist>div{display:flex;align-items:center;gap:8px;padding:4px 0;flex-wrap:wrap}
.paylist svg{color:var(--ok)}.paylist b{font-weight:700}.paylist span{color:var(--mut);font-size:12.5px;margin-left:auto}

/* ───── seleção de pagamento no checkout ───── */
.pmopt{position:relative;display:flex;align-items:center;gap:14px;padding:14px 46px 14px 14px;border:1.5px solid var(--line);border-radius:16px;margin-bottom:10px;cursor:pointer;background:var(--card);transition:border-color .18s,background .18s,box-shadow .18s,transform .18s}
.pmopt:hover{border-color:color-mix(in srgb,var(--ok) 55%,var(--line))}
.pmopt:focus-visible{outline:3px solid color-mix(in srgb,var(--accent) 45%,transparent);outline-offset:2px}
.pmopt.on{border-color:var(--ok);background:var(--okbg);box-shadow:0 0 0 3px rgba(20,160,90,.12)}
.pmopt .ic{width:44px;height:44px;border-radius:13px;background:var(--soft);display:flex;align-items:center;justify-content:center;color:var(--navy3);flex:none;transition:.2s}
.pmopt.on .ic{background:var(--card);color:var(--ok)}
.pmopt .ptitle{display:flex;align-items:center;gap:8px;flex-wrap:wrap}.pmopt .ptitle .tag{font-size:11px}
.pmopt .pv{font-weight:800;font-size:17px;white-space:nowrap;letter-spacing:-.01em}
.pmopt .rd{position:absolute;right:15px;top:50%;width:22px;height:22px;margin-top:-11px;border-radius:50%;border:2px solid var(--line);transition:.2s}
.pmopt.on .rd{border-color:var(--ok);background:var(--ok);box-shadow:inset 0 0 0 4px var(--okbg);animation:pop .3s}
.pmopt .instsel{display:flex;align-items:center;gap:10px;margin-top:10px;font-size:13.5px;font-weight:600;animation:up .25s both}
.pmopt .instsel select{flex:1;min-width:0;border:1.5px solid var(--line);border-radius:11px;padding:9px 10px;background:var(--card);color:var(--ink)}
.pmnote{display:flex;gap:8px;margin-top:10px;font-size:13px;color:var(--mut);background:var(--soft);border-radius:11px;padding:9px 11px;animation:up .25s both}
.pmnote svg{margin-top:2px;color:var(--info)}
@media(max-width:560px){.pmopt{flex-wrap:wrap;padding-right:44px}.pmopt .pv{width:100%;padding-left:58px;margin-top:-6px}}

/* ───── pedido por link / boleto / financiamento ───── */
.linkbox .lbval{display:flex;align-items:flex-end;justify-content:space-between;gap:12px;flex-wrap:wrap;margin:14px 0}
.lbwait{display:flex;align-items:center;gap:14px;background:var(--soft);border-radius:14px;padding:14px 16px;margin-bottom:12px}
.lbwait i{width:22px;height:22px;flex:none;border-radius:50%;border:3px solid var(--line);border-top-color:var(--accent);animation:spin .9s linear infinite}
.lbwait p{margin:0;font-size:14.5px}

@media(prefers-reduced-motion:reduce){
  .sload *,.sload,.enter,#view>*,.hero .bg,.btn,.btn::after,.pmopt,.skel::after{animation:none!important;transition:none!important}
  .sload .trail .trv{left:calc(50% - 17px)}
  .sload .msgs span:first-child{opacity:1}
}