/* Small visual enhancements for SafeMarg */
.trip-card:hover{transform:translateY(-2px);box-shadow:0 12px 28px rgba(11,31,58,.09);transition:.2s}
.seat:not(.taken):hover{border-color:var(--sky);transform:translateY(-1px)}
.search-btn,.pay-btn,.continue-btn,.new-search,.select-trip{transition:transform .15s ease,filter .15s ease}
.search-btn:active,.pay-btn:active,.continue-btn:active,.new-search:active,.select-trip:active{transform:translateY(1px)}
.score::before{content:"✓";margin-right:4px}


/* ---------- SafeMarg 2026 frontend upgrade ---------- */
.sm-swap{
  align-self:end; margin-bottom:2px; border:1px solid var(--line);
  background:var(--paper); color:var(--ink); border-radius:10px;
  padding:9px 12px; font-weight:700; white-space:nowrap;
}
.sm-swap:hover{border-color:var(--sky);color:var(--sky)}
.sm-route-info{
  display:flex;gap:10px;flex-wrap:wrap;margin:0 0 18px;
}
.sm-route-info span{
  border:1px solid var(--line);background:var(--paper);color:var(--ink-soft);
  border-radius:999px;padding:7px 11px;font-size:12px;font-weight:600;
}
body.dark .sm-swap, body.dark .sm-route-info span{
  background:#101c2d;color:#edf3ff;border-color:#334761;
}
body.dark .eticket{
  background:#0b1728;
  color:#f4f8ff;
  border:1px solid #29415f;
}
body.dark .et-stub{background:#112b4b;border-left-color:#7187a4}
body.dark .et-field .l,body.dark .stub-label,
body.dark .et-fare .sum-row span:first-child{color:#c7d8ef}
body.dark .et-fare,body.dark .track-mini{border-color:#365475}
body.dark .barcode{border-color:#7187a4}
body.dark .barcode-bars{background:repeating-linear-gradient(90deg,#fff 0 2px,transparent 2px 5px)}
body.dark input::placeholder,body.dark select{color:#aebed2}
body.dark .field label,body.dark .in label{color:#c8d6e8}
@media(max-width:600px){
  .sm-swap{width:100%;margin-top:-5px}
  .sm-route-info{gap:6px}
  .sm-route-info span{font-size:11px}
}

/* Frontend-only interaction polish */
:where(button,a,input,select):focus-visible{
  outline:3px solid rgba(91,103,230,.48);
  outline-offset:3px
}
.stepper .step-line{
  position:relative;overflow:hidden;border-radius:999px;
  background:#e3e7f0;transition:background .25s ease
}
.stepper .step-line::after{
  content:"";position:absolute;inset:0 auto 0 0;width:0;
  border-radius:inherit;background:linear-gradient(90deg,#f07842,#e85b83,#6259e6);
  transition:width .42s cubic-bezier(.22,.68,0,1.12)
}
.step.done + .step-line::after{width:100%}
.step.active + .step-line::after{width:48%}
.step .circ{transition:transform .2s ease,box-shadow .2s ease}
.step.active .circ{box-shadow:0 4px 13px rgba(75,91,221,.3);transform:scale(1.06)}
.step.done .circ{box-shadow:0 3px 9px rgba(75,91,221,.16)}

.view.active{animation:smViewEnter .34s cubic-bezier(.2,.7,.25,1) both}
.view.active .results-head{animation:smContentEnter .38s .03s ease both}
#flightList .trip-card{animation:smContentEnter .35s ease both}
#flightList .trip-card:nth-child(2){animation-delay:.045s}
#flightList .trip-card:nth-child(3){animation-delay:.09s}
#flightList .trip-card:nth-child(4){animation-delay:.135s}
#seatGrid .seat{animation:smSeatEnter .24s ease both}
#seatGrid .seat:nth-of-type(4n+2){animation-delay:.035s}
#seatGrid .seat:nth-of-type(4n+3){animation-delay:.07s}
#seatGrid .seat:nth-of-type(4n+4){animation-delay:.105s}

button:not(:disabled){-webkit-tap-highlight-color:transparent}
button:disabled{cursor:not-allowed}
.pay-tab,.mode-tab,.sm-chip,.sm-region-filter,.login-btn,.dark-toggle,.sm-btn{
  transition:transform .18s ease,box-shadow .18s ease,color .18s ease,background-color .18s ease,border-color .18s ease
}
.pay-tab:active,.mode-tab:active,.sm-chip:active,.sm-region-filter:active,.login-btn:active,.dark-toggle:active,.sm-btn:active{
  transform:scale(.98)
}
.pay-btn:disabled,.continue-btn:disabled{filter:saturate(.45);box-shadow:none}
::selection{background:rgba(98,89,230,.2);color:inherit}

body.dark :where(button,a,input,select):focus-visible{outline-color:rgba(158,169,255,.7)}
body.dark .stepper .step-line{background:#28354a}

@keyframes smViewEnter{
  from{opacity:0;transform:translateY(8px)}
  to{opacity:1;transform:translateY(0)}
}
@keyframes smContentEnter{
  from{opacity:0;transform:translateY(9px)}
  to{opacity:1;transform:translateY(0)}
}
@keyframes smSeatEnter{
  from{opacity:.45;transform:translateY(4px)}
  to{opacity:1;transform:translateY(0)}
}

@media(prefers-reduced-motion:reduce){
  .stepper .step-line,.stepper .step-line::after,.step .circ,
  .view.active,.view.active .results-head,#flightList .trip-card,#seatGrid .seat,
  .pay-tab,.mode-tab,.sm-chip,.sm-region-filter,.login-btn,.dark-toggle,.sm-btn{
    animation:none!important;transition:none!important;transform:none!important
  }
}