/* =========================================================
   Travel Professional NEWS - 2027 Media Kit flipbook viewer
   Self-hosted. No external requests.
   ========================================================= */

:root{
  --ink:#0e1a24;
  --ink-2:#16283a;
  --ink-3:#1e3648;
  --line:rgba(255,255,255,.10);
  --txt:#e8f1f7;
  --txt-dim:#9db3c4;
  --accent:#4cb7e6;
  --accent-2:#2a95c8;
  --bar-h:56px;
  --foot-h:52px;
  --radius:10px;
  --shadow:0 18px 50px rgba(0,0,0,.45);
}

*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0;
  background:var(--ink);
  color:var(--txt);
  font:15px/1.45 -apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
  -webkit-font-smoothing:antialiased;
  overflow:hidden;
}

.fb-app{
  position:fixed; inset:0;
  overflow:hidden;
  background:
    radial-gradient(1100px 650px at 50% 0%, rgba(76,183,230,.13) 0%, transparent 62%),
    linear-gradient(180deg,#0e1a24 0%,#0b141c 55%,#080f15 100%);
}

/* ---------- bars (float over the stage, auto-hide when idle) ---------- */
.fb-bar{
  position:absolute; left:0; right:0;
  display:flex; align-items:center; gap:10px;
  padding:0 12px;
  background:rgba(10,18,26,.78);
  backdrop-filter:blur(12px) saturate(140%);
  -webkit-backdrop-filter:blur(12px) saturate(140%);
  z-index:30;
  min-width:0; overflow:hidden;
  transition:transform .3s cubic-bezier(.22,.61,.36,1), opacity .25s;
}
.fb-bar--top{
  top:0; height:var(--bar-h);
  border-bottom:1px solid var(--line);
  box-shadow:0 6px 26px rgba(0,0,0,.30);
}
.fb-bar--bottom{
  bottom:0; height:var(--foot-h);
  border-top:1px solid var(--line); justify-content:center;
  box-shadow:0 -6px 26px rgba(0,0,0,.30);
}

/* Immersive by default: the bars stay tucked off-screen until the reader
   pulls them out with the tab, then they retire again on their own. */
.fb-bar--top{transform:translateY(-100%); opacity:0; pointer-events:none}
.fb-bar--bottom{transform:translateY(100%); opacity:0; pointer-events:none}
.fb-app.chrome-on .fb-bar{transform:none; opacity:1; pointer-events:auto}

/* the pull tab that summons the controls */
.fb-tab{
  position:absolute; left:50%; bottom:0; z-index:36;
  transform:translateX(-50%);
  width:62px; height:26px; padding:0;
  display:grid; place-items:center;
  border:1px solid var(--line); border-bottom:0;
  border-radius:11px 11px 0 0;
  background:rgba(10,18,26,.72);
  backdrop-filter:blur(10px); -webkit-backdrop-filter:blur(10px);
  color:var(--txt-dim); cursor:pointer;
  transition:bottom .3s cubic-bezier(.22,.61,.36,1), background .15s, color .15s, opacity .2s;
}
.fb-tab:hover{background:rgba(76,183,230,.30); color:#fff}
/* a few slow pulses on arrival so the tab gets noticed, then it settles down */
.fb-tab svg{animation:fbTabHint 2.2s ease-in-out 1.2s 3}
.fb-app.chrome-on .fb-tab svg{animation:none}
@keyframes fbTabHint{
  0%,100%{transform:translateY(0)}
  12%{transform:translateY(-3px)}
  24%{transform:translateY(0)}
  36%{transform:translateY(-3px)}
  48%{transform:translateY(0)}
}
@media (prefers-reduced-motion:reduce){.fb-tab svg{animation:none}}
.fb-tab:focus-visible{outline:2px solid var(--accent); outline-offset:2px}
.fb-tab svg{width:20px; height:20px; fill:none; stroke:currentColor; stroke-width:2.1;
  stroke-linecap:round; stroke-linejoin:round; transition:transform .3s}
.fb-app.chrome-on .fb-tab{bottom:var(--foot-h)}
.fb-app.chrome-on .fb-tab svg{transform:rotate(180deg)}

.fb-brand{display:flex; align-items:center; gap:10px; min-width:0; margin-right:auto; color:inherit; text-decoration:none}
.fb-brand:hover .fb-brand__text strong{color:var(--accent)}
.fb-brand__logo{
  display:block; height:32px; width:auto; max-width:230px;
  object-fit:contain; flex:none;
}
/* when the real logo loads, drop the placeholder lettermark and the
   duplicate wordmark next to it */
.fb-brand.has-logo .fb-brand__mark{display:none}
.fb-brand.has-logo .fb-brand__text strong{display:none}
.fb-brand.has-logo .fb-brand__text em{font-size:12px}
.fb-brand__mark{
  flex:none;
  display:grid; place-items:center;
  width:34px; height:34px; border-radius:8px;
  background:linear-gradient(140deg,var(--accent),var(--accent-2));
  color:#06222f; font-weight:800; font-size:12px; letter-spacing:.5px;
}
.fb-brand__text{display:flex; flex-direction:column; line-height:1.15; min-width:0}
.fb-brand__text strong{font-size:14px; font-weight:700; white-space:nowrap; overflow:hidden; text-overflow:ellipsis}
.fb-brand__text sup{font-size:8px; top:-.6em}
.fb-brand__text em{font-style:normal; font-size:11.5px; color:var(--accent); letter-spacing:.4px; text-transform:uppercase}

.fb-tools{display:flex; align-items:center; gap:4px; flex:none}
.fb-sep{width:1px; height:22px; background:var(--line); margin:0 4px}

.fb-btn{
  display:inline-flex; align-items:center; gap:7px;
  height:36px; padding:0 10px;
  border:1px solid transparent; border-radius:8px;
  background:transparent; color:var(--txt);
  font:inherit; font-size:13px; font-weight:600;
  text-decoration:none; cursor:pointer;
  transition:background .15s,border-color .15s,color .15s,transform .1s;
}
.fb-btn:hover{background:rgba(255,255,255,.08); border-color:var(--line)}
.fb-btn:active{transform:translateY(1px)}
.fb-btn.is-on{background:rgba(76,183,230,.18); border-color:rgba(76,183,230,.45); color:#bfe7fa}
.fb-btn svg{width:19px; height:19px; fill:none; stroke:currentColor; stroke-width:1.9; stroke-linecap:round; stroke-linejoin:round; flex:none}
.fb-btn--sm{height:32px; padding:0 8px}
.fb-btn--sm svg{width:17px;height:17px}
.fb-btn--zoomlvl{min-width:56px; justify-content:center; font-variant-numeric:tabular-nums; color:var(--txt-dim)}
.fb-btn__lbl{white-space:nowrap}
.fb-btn:disabled{opacity:.32; cursor:default}
.fb-btn:focus-visible{outline:2px solid var(--accent); outline-offset:2px}

/* ---------- stage ---------- */
.fb-stage{position:absolute; inset:0; display:flex; align-items:center; justify-content:center; overflow:hidden}
.fb-viewport{
  position:absolute; inset:0;
  display:flex; align-items:center; justify-content:center;
  overflow:hidden; touch-action:pan-y;
}
.fb-zoom{
  transform-origin:center center;
  transition:transform .22s cubic-bezier(.22,.61,.36,1);
  will-change:transform;
}
.fb-viewport{cursor:zoom-in}          /* hints that a double-click enlarges */
.fb-viewport.is-zoomed{cursor:grab; touch-action:none}
.fb-viewport.is-panning{cursor:grabbing}
.fb-page a.fb-hot{cursor:pointer}
.fb-viewport.is-zoomed .fb-zoom{transition:none}

.fb-book{margin:0 auto}

/* --- StPageFlip base styles (bundled locally; the library ships a typo in
       its own stylesheet, so the wrapper rule is corrected here) --- */
.stf__parent{position:relative; display:block; box-sizing:border-box; transform:translateZ(0); -ms-touch-action:pan-y; touch-action:pan-y}
.stf__wrapper{position:relative; width:100%; box-sizing:border-box}
.stf__parent canvas{position:absolute; width:100%; height:100%; left:0; top:0}
.stf__block{position:absolute; width:100%; height:100%; box-sizing:border-box; perspective:2000px}
.stf__item{display:none; position:absolute; transform-style:preserve-3d}
.stf__outerShadow,.stf__innerShadow,.stf__hardShadow,.stf__hardInnerShadow{position:absolute; left:0; top:0}

/* page */
.fb-page{
  background:#fff;
  overflow:hidden;
  box-shadow:0 2px 14px rgba(0,0,0,.25);
}
.fb-page img{display:block; width:100%; height:100%; object-fit:contain; background:#fff; user-select:none; -webkit-user-drag:none}
.fb-page__ph{
  position:absolute; inset:0;
  display:grid; place-items:center;
  background:linear-gradient(110deg,#f4f7f9 0%,#eaeff3 40%,#f4f7f9 80%);
  background-size:250% 100%;
  animation:fbShimmer 1.3s linear infinite;
  color:#9aa8b3; font-size:12px; font-weight:700; letter-spacing:1px;
}
@keyframes fbShimmer{from{background-position:120% 0}to{background-position:-120% 0}}

/* clickable hotspots */
.fb-hot{
  position:absolute;
  display:block;
  border-radius:3px;
  background:rgba(76,183,230,0);
  box-shadow:inset 0 0 0 0 rgba(42,149,200,0);
  transition:background .15s, box-shadow .15s;
  cursor:pointer;
}
.fb-hot:hover{background:rgba(76,183,230,.20); box-shadow:inset 0 0 0 1.5px rgba(42,149,200,.75)}

/* side nav arrows */
.fb-nav{
  position:absolute; top:50%; transform:translateY(-50%);
  z-index:12;
  width:46px; height:76px;
  display:grid; place-items:center;
  border:1px solid var(--line); border-radius:12px;
  background:rgba(12,22,31,.62);
  backdrop-filter:blur(6px);
  color:var(--txt); cursor:pointer;
  transition:background .15s,opacity .15s;
}
.fb-nav{transition:background .15s, opacity .3s}
.fb-nav:hover{background:rgba(76,183,230,.28)}
.fb-nav:disabled{opacity:.22; cursor:default}
.fb-nav svg{width:24px;height:24px;fill:none;stroke:currentColor;stroke-width:2.1;stroke-linecap:round;stroke-linejoin:round}
.fb-nav--prev{left:14px}
.fb-nav--next{right:14px}

/* first-run hint */
.fb-hint{
  position:absolute; left:50%; bottom:calc(var(--foot-h) + 16px);
  transform:translateX(-50%);
  z-index:14;
  padding:7px 15px; border-radius:99px;
  background:rgba(10,18,26,.72);
  backdrop-filter:blur(8px); -webkit-backdrop-filter:blur(8px);
  border:1px solid var(--line);
  color:var(--txt-dim); font-size:12.5px; white-space:nowrap;
  pointer-events:none;
  transition:opacity .5s;
}
.fb-hint.is-gone{opacity:0 !important}
@media (max-width:640px){.fb-hint{display:none}}

/* ---------- splash / loading screen ---------- */
.fb-splash{
  position:absolute; inset:0; z-index:80;
  display:grid; place-items:center;
  background:
    radial-gradient(760px 520px at 50% 42%, rgba(76,183,230,.16) 0%, transparent 66%),
    linear-gradient(180deg,#0e1a24 0%,#0b141c 55%,#070d12 100%);
  transition:opacity .6s ease, visibility .6s;
}
.fb-splash.is-done{opacity:0; visibility:hidden; pointer-events:none}

.fb-splash__glow{
  position:absolute; width:min(560px,86vw); aspect-ratio:1;
  border-radius:50%;
  background:radial-gradient(circle, rgba(76,183,230,.14) 0%, transparent 62%);
  animation:fbBreathe 4.5s ease-in-out infinite;
}
@keyframes fbBreathe{
  0%,100%{transform:scale(.94); opacity:.75}
  50%{transform:scale(1.06); opacity:1}
}

.fb-splash__inner{
  position:relative;
  display:flex; flex-direction:column; align-items:center;
  gap:0; padding:0 24px; text-align:center;
}
.fb-splash__logo{
  display:block; width:auto; height:clamp(44px, 8vw, 78px);
  max-width:min(70vw, 340px);
  animation:fbRise .8s cubic-bezier(.22,.61,.36,1) both;
}
.fb-splash__fallback{
  display:none;
  font-size:clamp(20px,4vw,30px); font-weight:700; color:#fff; letter-spacing:-.3px;
  animation:fbRise .8s cubic-bezier(.22,.61,.36,1) both;
}
.fb-splash__fallback sup{font-size:.45em; top:-.9em}
.fb-splash__inner.no-logo .fb-splash__fallback{display:block}

.fb-splash__title{
  margin-top:16px;
  font-size:12px; font-weight:700; letter-spacing:3.4px; text-transform:uppercase;
  color:var(--accent);
  animation:fbRise .8s .12s cubic-bezier(.22,.61,.36,1) both;
}
.fb-splash__bar{
  margin-top:26px;
  width:min(240px,56vw); height:3px; border-radius:99px;
  background:rgba(255,255,255,.11); overflow:hidden;
  animation:fbRise .8s .2s cubic-bezier(.22,.61,.36,1) both;
}
.fb-splash__bar i{
  display:block; height:100%; width:0;
  border-radius:99px;
  background:linear-gradient(90deg,var(--accent-2),var(--accent));
  box-shadow:0 0 12px rgba(76,183,230,.55);
  transition:width .35s cubic-bezier(.22,.61,.36,1);
}
.fb-splash__pct{
  margin-top:12px;
  font-size:11px; letter-spacing:2.2px; text-transform:uppercase;
  color:#b9cbd8; font-variant-numeric:tabular-nums;
  animation:fbRise .8s .28s cubic-bezier(.22,.61,.36,1) both;
}

@keyframes fbRise{
  from{opacity:0; transform:translateY(10px)}
  to{opacity:1; transform:none}
}
@media (prefers-reduced-motion:reduce){
  .fb-splash__glow,.fb-splash__logo,.fb-splash__fallback,
  .fb-splash__title,.fb-splash__bar,.fb-splash__pct{animation:none}
}

/* ---------- footer controls ---------- */
.fb-slider{
  -webkit-appearance:none; appearance:none;
  flex:0 1 auto; min-width:60px;
  width:min(46vw,420px); height:4px; margin:0 8px;
  border-radius:99px; background:rgba(255,255,255,.16); outline:none; cursor:pointer;
}
.fb-slider::-webkit-slider-thumb{
  -webkit-appearance:none; width:15px; height:15px; border-radius:50%;
  background:var(--accent); border:2px solid #0b141c; cursor:grab;
  box-shadow:0 0 0 1px rgba(76,183,230,.6);
}
.fb-slider::-moz-range-thumb{
  width:13px;height:13px;border-radius:50%;background:var(--accent);
  border:2px solid #0b141c; cursor:grab;
}
.fb-counter{
  margin-left:14px; font-size:13px; color:var(--txt-dim);
  font-variant-numeric:tabular-nums; white-space:nowrap;
}
.fb-counter span:first-child{color:var(--txt); font-weight:700}
.fb-counter i{font-style:normal; opacity:.5; margin:0 2px}

/* ---------- drawers ---------- */
.fb-scrim{
  position:fixed; inset:0; z-index:40;
  background:rgba(4,9,13,.55);
  opacity:0; pointer-events:none; transition:opacity .22s;
}
.fb-scrim.is-on{opacity:1; pointer-events:auto}

.fb-drawer{
  position:fixed; z-index:50;
  right:0; bottom:0; top:0;
  width:min(340px,86vw);
  display:flex; flex-direction:column;
  background:var(--ink-2);
  border-left:1px solid var(--line);
  box-shadow:var(--shadow);
  transform:translateX(102%);
  transition:transform .26s cubic-bezier(.22,.61,.36,1);
}
.fb-drawer.is-open{transform:none}
.fb-drawer--left{
  left:0; right:auto; border-left:0; border-right:1px solid var(--line);
  transform:translateX(-102%);
}
.fb-drawer--left.is-open{transform:none}
.fb-drawer__head{
  display:flex; align-items:center; justify-content:space-between; gap:10px;
  padding:14px 12px 14px 16px; border-bottom:1px solid var(--line); flex:none;
}
.fb-drawer__head h2{margin:0; font-size:14px; letter-spacing:.6px; text-transform:uppercase; color:var(--accent)}

.fb-thumbs{
  flex:1; overflow-y:auto; padding:14px;
  display:grid; grid-template-columns:repeat(2,1fr); gap:12px;
}
.fb-thumb{
  border:2px solid transparent; border-radius:6px; overflow:hidden;
  background:#0b141c; padding:0; cursor:pointer; position:relative; line-height:0;
}
.fb-thumb img{width:100%; height:auto; display:block; opacity:.86; transition:opacity .15s}
.fb-thumb:hover img{opacity:1}
.fb-thumb.is-current{border-color:var(--accent); box-shadow:0 0 0 3px rgba(76,183,230,.22)}
.fb-thumb b{
  position:absolute; right:4px; bottom:4px;
  background:rgba(10,18,26,.82); color:#fff;
  font-size:10px; font-weight:700; line-height:1;
  padding:3px 5px; border-radius:4px;
}

.fb-toc{flex:1; overflow-y:auto; padding:8px 0 20px}
.fb-toc a{
  display:flex; align-items:baseline; gap:10px;
  padding:11px 16px; color:var(--txt); text-decoration:none;
  border-left:3px solid transparent; font-size:14px;
  transition:background .14s,border-color .14s;
}
.fb-toc a:hover{background:rgba(255,255,255,.06); border-left-color:var(--accent)}
.fb-toc a span{margin-left:auto; color:var(--txt-dim); font-size:12px; font-variant-numeric:tabular-nums}
.fb-toc a.is-current{background:rgba(76,183,230,.12); border-left-color:var(--accent)}

/* ---------- modal ---------- */
.fb-modal{
  position:fixed; inset:0; z-index:60;
  display:grid; place-items:center; padding:20px;
  opacity:0; pointer-events:none; transition:opacity .2s;
}
.fb-modal.is-open{opacity:1; pointer-events:auto}
.fb-modal__panel{
  width:min(460px,100%);
  background:var(--ink-2); border:1px solid var(--line);
  border-radius:14px; box-shadow:var(--shadow); overflow:hidden;
  transform:translateY(8px); transition:transform .2s;
}
.fb-modal.is-open .fb-modal__panel{transform:none}
.fb-share{padding:16px}
.fb-copy{display:flex; gap:8px}
.fb-copy input{
  flex:1; min-width:0; height:38px; padding:0 10px;
  border:1px solid var(--line); border-radius:8px;
  background:rgba(0,0,0,.28); color:var(--txt); font:inherit; font-size:13px;
}
.fb-cta{
  height:38px; padding:0 14px; border:0; border-radius:8px;
  background:linear-gradient(140deg,var(--accent),var(--accent-2));
  color:#05222f; font:inherit; font-weight:700; cursor:pointer; white-space:nowrap;
}
.fb-share__row{display:flex; flex-wrap:wrap; gap:8px; margin-top:12px}
.fb-chip{
  padding:8px 13px; border-radius:99px; border:1px solid var(--line);
  color:var(--txt); text-decoration:none; font-size:13px; font-weight:600;
}
.fb-chip:hover{background:rgba(255,255,255,.08); border-color:rgba(76,183,230,.5)}
.fb-note{margin:14px 0 2px; font-size:12px; color:var(--txt-dim)}

/* ---------- toast ---------- */
.fb-toast{
  position:fixed; left:50%; bottom:calc(var(--foot-h) + 18px);
  transform:translate(-50%,12px); z-index:70;
  padding:10px 16px; border-radius:99px;
  background:rgba(8,15,21,.94); border:1px solid var(--line);
  color:var(--txt); font-size:13px; font-weight:600;
  opacity:0; pointer-events:none; transition:opacity .2s,transform .2s;
}
.fb-toast.is-on{opacity:1; transform:translate(-50%,0)}

/* ---------- print ---------- */
.fb-print{display:none}
@media print{
  .fb-app{display:none !important}
  body{background:#fff; overflow:visible}
  .fb-print{display:block}
  .fb-print img{width:100%; page-break-after:always; break-after:page}
}

/* ---------- responsive ---------- */
@media (max-width:900px){
  .fb-btn__lbl{display:none}
  .fb-btn{padding:0 8px}
  .fb-brand__text em{display:none}
}
@media (max-width:640px){
  :root{--bar-h:52px; --foot-h:48px}
  .fb-tab{width:72px; height:30px}
  .fb-nav{width:34px; height:58px; border-radius:9px; background:rgba(12,22,31,.5)}
  .fb-nav--prev{left:2px}
  .fb-nav--next{right:2px}
  .fb-brand__text strong{font-size:12.5px}
  .fb-slider{width:38vw}
  #btnPrint,#btnZoomOut,#btnZoomIn,.fb-btn--zoomlvl{display:none}
  .fb-thumbs{grid-template-columns:repeat(2,1fr)}
}
@media (max-width:400px){
  .fb-brand__text{display:none}
}