/* ==========================================================
   Tariff: a split-flap departure board (assets/js/tariff.js).
   Its own palette: green-black board, amber flaps.
   ========================================================== */
.tariff { --tf-bg: #05130e; --tf-board: #0a1913; --tf-amber: #ffc233; --tf-green: #3ddc97; --tf-muted: #7f9b8f; position: relative; overflow: clip; isolation: isolate; padding: 84px max(20px, 5vw) 90px; background: var(--tf-bg); color: #e9f2ec; }
.tf-glow { position: absolute; inset: 0; z-index: -1; pointer-events: none; background: radial-gradient(38% 50% at 88% 0%, #ffc23324, transparent 70%), radial-gradient(40% 50% at 0% 100%, #3ddc971c, transparent 70%), linear-gradient(#ffffff06 1px, transparent 1px) 0 0 / 100% 46px, linear-gradient(90deg, #ffffff06 1px, transparent 1px) 0 0 / 46px 100%; mask-image: linear-gradient(180deg, #000 40%, transparent); -webkit-mask-image: linear-gradient(180deg, #000 40%, transparent); }

/* ---------- Heading ---------- */
.tf-head { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr); gap: 24px clamp(30px, 6vw, 110px); align-items: end; }
.tf-head .section-kicker { display: flex; align-items: center; gap: 10px; color: var(--tf-muted); }
.tf-head .section-kicker:before { display: none; }
.tf-live { width: 8px; height: 8px; border-radius: 50%; background: var(--tf-green); box-shadow: 0 0 0 0 var(--tf-green); animation: tfPing 1.8s ease-out infinite; }
@keyframes tfPing { 70% { box-shadow: 0 0 0 10px transparent; } 100% { box-shadow: 0 0 0 0 transparent; } }
.tf-head h2 { font-size: clamp(46px, 5.6vw, 88px); font-weight: 600; color: #f4fbf7; }
.tf-head h2 em { font-family: inherit; font-weight: 400; color: var(--tf-amber); }
.tf-side p:first-child { max-width: 440px; margin: 0 0 20px; color: #a9bdb4; line-height: 1.75; }
.tf-clock { display: inline-flex; align-items: center; gap: 12px; margin: 0; padding: 8px 10px 8px 14px; border-radius: 12px; border: 1px solid #ffffff17; background: #ffffff08; }
.tf-clock span { font: 700 10.5px "Plus Jakarta Sans", sans-serif; letter-spacing: .16em; text-transform: uppercase; color: var(--tf-muted); }
.tf-clock b { padding: 4px 8px; border-radius: 6px; background: linear-gradient(#1a2a23 50%, #13211b 50%); font: 700 18px/1 Outfit, sans-serif; letter-spacing: .08em; color: var(--tf-amber); font-variant-numeric: tabular-nums; }

/* ---------- Board ---------- */
.board { position: relative; margin-top: 44px; border-radius: 22px; overflow: hidden; background: var(--tf-board); border: 1px solid #ffffff14; box-shadow: 0 50px 100px -50px #000, inset 0 1px 0 #ffffff12; }
.board:after { content: ""; position: absolute; inset: 0; pointer-events: none; background: repeating-linear-gradient(0deg, #ffffff04 0 1px, transparent 1px 3px); }
.brd-row { position: relative; display: grid; grid-template-columns: minmax(220px, 2.2fr) .7fr 1.2fr 1.15fr 1.3fr 1.35fr auto; align-items: center; gap: 16px; padding: 14px 22px; border-top: 1px solid #ffffff0f; }
.brd-cols { padding-block: 16px; border-top: 0; background: #0e231b; font: 700 10.5px "Plus Jakarta Sans", sans-serif; letter-spacing: .14em; text-transform: uppercase; color: var(--tf-muted); }

/* Rows slide in one after another; on hover a colour bar and a light sweep run across */
.board:not(.on) .brd-body .brd-row { opacity: 0; }
.board.on .brd-body .brd-row { animation: rowIn .9s var(--ease-out) backwards; animation-delay: calc(var(--i) * 140ms + .15s); }
@keyframes rowIn { from { opacity: 0; transform: translateX(-36px); clip-path: inset(0 100% 0 0); } to { clip-path: inset(0 0 0 0); } }
.brd-body .brd-row { transition: background .4s; }
.brd-body .brd-row:before { content: ""; position: absolute; left: 0; top: 10px; bottom: 10px; width: 3px; border-radius: 0 3px 3px 0; background: var(--c1); transform: scaleY(0); transition: transform .45s var(--ease-out); }
.brd-body .brd-row:after { content: ""; position: absolute; inset: 0; pointer-events: none; background: linear-gradient(100deg, transparent 30%, #ffffff0c 50%, transparent 70%) -100% 0 / 60% 100% no-repeat; }
.brd-body .brd-row:hover { background: linear-gradient(90deg, color-mix(in srgb, var(--c1) 13%, transparent), transparent 70%); }
.brd-body .brd-row:hover:before { transform: scaleY(1); }
.brd-body .brd-row:hover:after { background-position: 220% 0; transition: background-position 1s var(--ease-out); }

.brd-veh { display: flex; align-items: center; gap: 14px; min-width: 0; }
.brd-veh img { flex: none; width: 84px; height: 56px; border-radius: 10px; object-fit: cover; filter: saturate(.9); transition: transform .6s var(--ease-out), filter .4s; }
.brd-row:hover .brd-veh img { transform: scale(1.06); filter: saturate(1.15); }
.brd-veh b { display: block; font: 700 17px/1.2 Outfit, sans-serif; color: #fff; }
.brd-veh small { display: block; margin-top: 3px; font-size: 12px; line-height: 1.35; color: var(--tf-muted); }

/* Split-flap characters */
.flaps { display: inline-flex; gap: 3px; vertical-align: middle; }
.flap { position: relative; display: inline-grid; place-items: center; width: .8em; height: 1.3em; border-radius: 4px; background: linear-gradient(#24392f 50%, #1b2d24 50%); box-shadow: inset 0 0 0 1px #ffffff0f, 0 2px 4px #0006; text-shadow: 0 0 10px #ffc23355; font: 700 19px/1 Outfit, sans-serif; font-style: normal; color: var(--tf-amber); font-variant-numeric: tabular-nums; }
.flap:after { content: ""; position: absolute; left: 0; right: 0; top: 50%; height: 1px; background: #000a; }
.flap.fx { width: auto; padding: 0 1px; background: none; box-shadow: none; color: #c9d6cf; }
.flap.fx:after { display: none; }
.flap.tick { animation: flapTick .12s ease-out; }
@keyframes flapTick { from { transform: perspective(160px) rotateX(75deg); filter: brightness(1.8); } }
.brd-row em { margin-left: 5px; font-size: 12px; font-style: normal; color: var(--tf-muted); }
.brd-row em.brd-from { margin: 0 6px 0 0; }

.brd-status b { display: inline-flex; align-items: center; gap: 7px; padding: 6px 10px; border-radius: 8px; font: 700 11px "Plus Jakarta Sans", sans-serif; letter-spacing: .06em; text-transform: uppercase; white-space: nowrap; }
.brd-status b:before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: currentColor; }
.st-deal { color: #ff8a65; background: #ff5a1f1c; border: 1px solid #ff5a1f50; }
.st-deal:before { animation: blink 1.2s steps(2, start) infinite; }
@keyframes blink { to { visibility: hidden; } }
.st-ok { color: var(--tf-green); background: #3ddc9712; border: 1px solid #3ddc9738; }

.tariff .row-book { display: inline-flex; align-items: center; gap: 8px; height: 40px; padding: 0 16px; border-radius: 10px; border: 1.5px solid var(--tf-amber); background: none; color: var(--tf-amber); font: 800 13px Outfit, sans-serif; cursor: pointer; transition: background .3s, color .3s; }
.tariff .row-book i { font-style: normal; transition: transform .3s; }
.tariff .row-book:hover { background: var(--tf-amber); color: var(--tf-bg); }
.tariff .row-book:hover i { transform: translate(2px, -2px); }
.tariff .row-book:focus-visible { outline: 2px solid #fff; outline-offset: 2px; }
.tariff-note { margin: 18px 2px 0; font-size: 13px; line-height: 1.6; color: var(--tf-muted); }

/* ---------- Phones / tablets: each row becomes a card ---------- */
@media (max-width: 1000px) {
  .tf-head { grid-template-columns: 1fr; }
  .brd-cols { display: none; }
  .brd-row { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; padding: 18px; }
  .brd-veh, .brd-status, .brd-book { grid-column: 1 / -1; }
  .brd-row > [data-l]:not(.brd-status) { padding: 10px 12px; border-radius: 12px; background: #ffffff07; }
  .brd-row > [data-l]:not(.brd-status):before { content: attr(data-l); display: block; margin-bottom: 7px; font: 700 9.5px "Plus Jakarta Sans", sans-serif; letter-spacing: .12em; text-transform: uppercase; color: var(--tf-muted); }
  .tariff .row-book { width: 100%; justify-content: center; height: 44px; }
}
@media (max-width: 760px) {
  .tariff { padding: 64px 16px 70px; }
  .board { margin-top: 32px; }
  .flap { font-size: 17px; }
}
@media (prefers-reduced-motion: reduce) {
  .tf-live, .st-deal:before { animation: none; }
  .board:not(.on) .brd-body .brd-row { opacity: 1; }
  .board.on .brd-body .brd-row { animation: none; }
}

/* Bulk order line under the board */
.tf-bulk { display: flex; align-items: center; justify-content: space-between; gap: 14px 24px; flex-wrap: wrap; margin: 16px 0 0; padding: 14px 18px; border-radius: 16px; border: 1px dashed #ffc23366; background: #ffc2330b; color: #cfe0d7; font-size: 14px; line-height: 1.5; }
.tf-bulk b { color: var(--tf-amber); }