/* ═══════════════════════════════════════════════════════════════
   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:
     <link rel="stylesheet" href="main.css"/>
     <link rel="stylesheet" href="service.css"/>
   ═══════════════════════════════════════════════════════════════ */

/* ── 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); }

/* ── BREADCRUMB ── */
.bc-wrap{background:#f8f9fa;border-bottom:1px solid #e5e7eb;padding:8px 20px}
.bc{color:#6b7280;list-style:none;display:flex;flex-wrap:wrap;gap:5px;font-size:12px;max-width:920px;margin:0 auto}
.bc a{color:#00355F;text-decoration:none}
.bc a:hover{color:#FFC72C}
.bc-sep{color:#d1d5db}
[aria-current=page]{color:#374151}

/* ── ANNOUNCE BAR ── */
.announce{
  display:flex;align-items:center;justify-content:space-between;gap:16px;
  background:linear-gradient(135deg,#00355F 0%,#003f75 100%);
  border-left:4px solid #FFC72C;
  padding:13px 24px;
  position:relative;z-index:10;
}
.announce-text{
  font-family:var(--font-b,'DM Sans',sans-serif);
  font-size:14px;font-weight:500;
  color:rgba(255,255,255,.92);
  line-height:1.5;flex:1;
}
.announce-text a{
  color:#FFC72C;font-weight:700;
  text-decoration:underline;
  text-decoration-color:rgba(255,199,44,.45);
  text-underline-offset:2px;
  transition:text-decoration-color .2s;
}
.announce-text a:hover{text-decoration-color:#FFC72C;}
/* button inside announce — compact override */
.announce .btn-scroll-form{
  flex-shrink:0;white-space:nowrap;
  padding:10px 20px;font-size:13px;
  animation:none;
  box-shadow:0 3px 14px rgba(0,53,95,.4);
}
@media(max-width:640px){
  .announce{flex-direction:column;align-items:stretch;gap:11px;padding:14px 16px 14px 18px;}
  .announce-text{font-size:13.5px;}
  .announce .btn-scroll-form{width:100%;justify-content:center;padding:12px 16px;font-size:14px;}
}

/* ── 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,#00355F 0%,#004e8c 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(0,53,95,.35),0 0 0 0 rgba(255,199,44,.4);transition:transform .2s,box-shadow .2s,background .2s,color .2s;animation:sfPulse 2.4s ease-in-out infinite;cursor:pointer}
.btn-scroll-form:hover{transform:translateY(-2px);box-shadow:0 8px 32px rgba(0,53,95,.50),0 0 0 0 rgba(255,199,44,0);background:linear-gradient(135deg,#FFC72C 0%,#e6b000 100%);color:#00355F;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(0,53,95,.35),0 0 0 0 rgba(255,199,44,.4)}60%{box-shadow:0 4px 24px rgba(0,53,95,.35),0 0 0 10px rgba(255,199,44,0)}}