/* ═══════════════════════════════════════════════════════════════
SureFlight Booking — service.css
Shared base styles for all 5 service pages:
baggage-allowance-extra-weight.html
cancellation-medical-emergency.html
infant-addition-request.html
name-correction-request.html
wheelchair-special-assistance.html
Load order in each page:
═══════════════════════════════════════════════════════════════ */
/* ── Reset ── */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
/* ── PAGE GRID ── */
.page-wrap {
max-width: 920px; margin: 0 auto;
padding: 0 20px 60px;
display: grid; grid-template-columns: 1fr;
}
@media (min-width: 780px) { .page-wrap { grid-template-columns: 1fr 320px; gap: 36px; } }
/* ── FADE IN ── */
.fade-in { opacity: 1; transform: none; transition: opacity .5s ease, transform .5s ease; }
.fade-in.will-anim { opacity: 0; transform: translateY(18px); }
/* ═══ GLOBAL HEADER/FOOTER OVERRIDE ═══ */
header{background:rgba(5,14,26,.94)!important;backdrop-filter:blur(30px)!important;-webkit-backdrop-filter:blur(30px)!important;position:sticky!important;top:0!important;z-index:200!important;border-bottom:1px solid rgba(29,111,232,.08)!important;padding:0!important;min-height:unset!important}
.hdr{max-width:1240px!important;margin:0 auto!important;padding:0 36px!important;height:68px!important;display:flex!important;align-items:center!important;justify-content:space-between!important;gap:24px!important}
@media(max-width:768px){.hdr{padding:0 20px!important;height:60px!important}}
.logo{display:flex!important;align-items:center!important;gap:11px!important;flex-shrink:0!important}
.logo-mark{width:40px!important;height:40px!important;background:linear-gradient(145deg,#1D6FE8,#1558C0)!important;border-radius:8px!important;display:flex!important;align-items:center!important;justify-content:center!important;box-shadow:0 6px 28px rgba(29,111,232,.32)!important;flex-shrink:0!important}
.logo-mark svg{width:30px!important;height:30px!important}
.logo-name{font-family:'Playfair Display',Georgia,serif!important;font-size:21px!important;font-weight:700!important;color:#fff!important;letter-spacing:.01em!important}
.logo-name em{font-style:italic!important;color:#5B9BF5!important;font-weight:400!important}
nav{display:flex!important;gap:2px!important;align-items:center!important}
@media(max-width:960px){nav{display:none!important}}
nav a{font-family:'Outfit',sans-serif!important;font-size:13px!important;font-weight:500!important;color:rgba(255,255,255,.5)!important;padding:7px 14px!important;border-radius:8px!important;letter-spacing:.02em!important;transition:all .22s!important;background:transparent!important;border:none!important}
nav a:hover{color:#fff!important;background:rgba(255,255,255,.05)!important}
.hdr-r{display:flex!important;align-items:center!important;gap:10px!important}
.badge-live{display:flex!important;align-items:center!important;gap:5px!important;background:rgba(34,197,94,.1)!important;border:1px solid rgba(34,197,94,.25)!important;border-radius:999px!important;padding:4px 11px!important;font-family:'Outfit',sans-serif!important;font-size:10px!important;font-weight:700!important;color:#16A34A!important;letter-spacing:.07em!important}
.live-d{width:6px!important;height:6px!important;background:#16A34A!important;border-radius:50%!important}
@media(max-width:520px){.badge-live{display:none!important}}
.btn-hcall{display:flex!important;align-items:center!important;gap:7px!important;background:linear-gradient(145deg,#1D6FE8,#1254B8)!important;color:#fff!important;padding:9px 20px!important;border-radius:999px!important;font-family:'Outfit',sans-serif!important;font-size:12px!important;font-weight:700!important;letter-spacing:.04em!important;box-shadow:0 6px 28px rgba(29,111,232,.32)!important;white-space:nowrap!important;text-decoration:none!important}
.btn-hcall svg{width:13px!important;height:13px!important;fill:#fff!important;flex-shrink:0!important}
.hbtn{display:none!important;background:rgba(255,255,255,.1)!important;border:1px solid rgba(255,255,255,.1)!important;border-radius:8px!important;width:38px!important;height:38px!important;align-items:center!important;justify-content:center!important}
@media(max-width:960px){.hbtn{display:flex!important}}
.hbtn svg{width:20px!important;height:20px!important;fill:#fff!important}
@media(max-width:480px){.btn-hcall .xt{display:none!important}.hdr{padding:0 14px!important;height:56px!important}.logo-mark{width:34px!important;height:34px!important}.logo-mark svg{width:24px!important;height:24px!important}.logo-name{font-size:17px!important}}
.ann{background:#0A1628!important;border-bottom:1px solid rgba(29,111,232,.15)!important;padding:10px 20px!important;text-align:center!important}
.sup{background:#0E1F38!important;border-bottom:1px solid rgba(255,255,255,.05)!important;padding:10px 0!important}
.sup-in{max-width:1240px!important;margin:0 auto!important;padding:0 36px!important;display:flex!important;align-items:center!important;justify-content:center!important;flex-wrap:wrap!important;gap:6px!important;font-family:'Outfit',sans-serif!important;font-size:12.5px!important;color:rgba(255,255,255,.5)!important}
.sup-in strong{color:#5B9BF5!important;font-weight:600!important}
.bc-wrap{background:#0A1628!important;border-bottom:1px solid rgba(29,111,232,.08)!important;padding:8px 20px!important}
.bc{color:rgba(255,255,255,.4)!important;list-style:none!important;display:flex!important;flex-wrap:wrap!important;gap:5px!important;font-size:12px!important;max-width:920px!important;margin:0 auto!important}
.bc a{color:#5B9BF5!important;text-decoration:none!important}
.bc a:hover{color:#fff!important}
.bc-sep{color:rgba(255,255,255,.25)!important}
[aria-current=page]{color:rgba(255,255,255,.65)!important}
footer{background:#050E1A!important;border-top:1px solid rgba(29,111,232,.10)!important}
.ft-top{display:grid!important;grid-template-columns:2fr 1fr 1fr 1fr!important;gap:56px!important;padding:68px 0 52px!important}
@media(max-width:900px){.ft-top{grid-template-columns:1fr 1fr!important;gap:36px!important}}
@media(max-width:480px){.ft-top{grid-template-columns:1fr!important;gap:24px!important}}
.ft-brand p{font-size:13px!important;color:rgba(255,255,255,.5)!important;line-height:1.88!important;max-width:252px!important;margin:14px 0 20px!important}
.ft-col h4{font-family:'Outfit',sans-serif!important;font-size:10.5px!important;font-weight:700!important;color:rgba(29,111,232,.75)!important;letter-spacing:.10em!important;text-transform:uppercase!important;margin-bottom:16px!important}
.ft-col ul{list-style:none!important;display:flex!important;flex-direction:column!important;gap:10px!important}
.ft-col ul a{font-size:13px!important;color:rgba(255,255,255,.5)!important}
.ft-col ul a:hover{color:#5B9BF5!important}
.ft-disc-row{padding:16px 0!important;border-top:1px solid rgba(255,255,255,.04)!important}
.ft-disc{background:rgba(29,111,232,.04)!important;border:1px solid rgba(29,111,232,.10)!important;border-radius:8px!important;padding:12px 16px!important}
.ft-disc p{font-size:11px!important;color:rgba(255,255,255,.27)!important;line-height:1.88!important}
.ft-bot{border-top:1px solid rgba(255,255,255,.05)!important;padding:22px 0!important;display:flex!important;align-items:center!important;justify-content:space-between!important}
.ft-copy{font-size:12px!important;color:rgba(255,255,255,.24)!important}
.ft-copy a{color:#5B9BF5!important}
.C{max-width:1240px!important;margin:0 auto!important;padding:0 36px!important}
@media(max-width:768px){.C{padding:0 20px!important}}
.mOv{position:fixed!important;inset:0!important;background:rgba(5,14,26,.72)!important;z-index:299!important;opacity:0!important;pointer-events:none!important;transition:opacity .3s!important;backdrop-filter:blur(4px)!important}
.mOv.open{opacity:1!important;pointer-events:all!important}
.mN{position:fixed!important;top:0!important;right:-100%!important;width:min(320px,90vw)!important;height:100%!important;background:#0A1628!important;z-index:300!important;padding:24px 22px 32px!important;display:flex!important;flex-direction:column!important;transition:right .32s cubic-bezier(.4,0,.2,1)!important;overflow-y:auto!important;border-left:1px solid rgba(29,111,232,.12)!important}
.mN.open{right:0!important}
/* ── Scroll-to-form hero button (service pages) ── */
.btn-scroll-form{display:inline-flex;align-items:center;justify-content:center;gap:9px;background:linear-gradient(135deg,#1d6fe8 0%,#2563eb 100%);border:none;color:#fff;text-decoration:none;padding:14px 26px;border-radius:var(--r-md,10px);font-family:var(--font-d,'Outfit',sans-serif);font-size:14px;font-weight:700;letter-spacing:.01em;box-shadow:0 4px 24px rgba(29,111,232,.55),0 0 0 0 rgba(29,111,232,.4);transition:transform .2s,box-shadow .2s;animation:sfPulse 2.4s ease-in-out infinite;cursor:pointer}
.btn-scroll-form:hover{transform:translateY(-2px);box-shadow:0 8px 32px rgba(29,111,232,.70),0 0 0 0 rgba(29,111,232,.0);animation:none}
.btn-scroll-form svg{width:16px;height:16px;flex-shrink:0;stroke:currentColor;fill:none;stroke-width:2.5;stroke-linecap:round;stroke-linejoin:round}
@keyframes sfPulse{0%,100%{box-shadow:0 4px 24px rgba(29,111,232,.55),0 0 0 0 rgba(29,111,232,.4)}60%{box-shadow:0 4px 24px rgba(29,111,232,.55),0 0 0 10px rgba(29,111,232,0)}}