/* Tickets hub (Air / Bus / Train / Launch). Loaded after the other form styles. */
.tk-wrap{--tk-blue:#2563eb;--tk-ink:#10163f;--tk-mute:#5d6a8a;--tk-line:#e6ebf3}
.tk-body{display:flex;flex-direction:column;gap:7px;min-width:0}
.tk-body .ff-pills{margin:0}
.tk-body .ff-route{margin:0}

/* ---- chooser ---- */
.tk-hub{display:flex;flex-direction:column;gap:10px;padding:2px 0}
.tk-hub-head{display:flex;flex-direction:column;gap:1px;padding:2px 4px 0}
.tk-hub-head b{font-size:15px;font-weight:700;color:var(--tk-ink)}
.tk-hub-head small{font-size:12px;color:var(--tk-mute)}
.tk-grid{display:grid;grid-template-columns:1fr 1fr;gap:8px}
.tk-card{display:flex;align-items:center;gap:9px;min-width:0;text-align:left;padding:11px 10px;border-radius:14px;border:1px solid var(--tk-line);background:#fff;color:var(--tk-ink);transition:transform .12s ease,box-shadow .12s ease,border-color .12s ease}
.tk-card:active{transform:scale(.97)}
.tk-card:hover{border-color:#bcd0fb;box-shadow:0 4px 14px rgba(37,99,235,.10)}
.tk-card-ic,.tk-bar-ic,.tk-veh-ic{flex:none;width:30px;height:30px;display:flex;align-items:center;justify-content:center;color:#10163f;background:none}
.tk-ic{width:21px;height:21px}
.tk-card-tx,.tk-bar-tx,.tk-veh-tx{display:flex;flex-direction:column;min-width:0;line-height:1.2}
.tk-card-tx b{font-size:14px;font-weight:700}
.tk-card-tx small{font-size:10.5px;color:var(--tk-mute);margin-top:2px;line-height:1.25}
.tk-card-go{display:none;width:16px;height:16px;margin-left:auto;color:#94a3b8}

/* ---- form header ---- */
.tk-bar{display:flex;align-items:center;gap:9px;padding:0 2px 7px;margin-bottom:1px;border-bottom:1px solid var(--tk-line)}
.tk-back{flex:none;width:34px;height:34px;border-radius:50%;border:1px solid var(--tk-line);background:#fff;display:flex;align-items:center;justify-content:center;color:var(--tk-ink)}
.tk-back-ic{width:18px;height:18px}
.tk-bar-ic{width:34px;height:34px;border-radius:11px}
.tk-bar-ic .tk-ic{width:19px;height:19px}
.tk-bar-tx b{font-size:14.5px;font-weight:700;color:var(--tk-ink)}
.tk-bar-tx small{font-size:11px;color:var(--tk-mute);margin-top:1px}
.tk-wrap.tk-form{display:flex;flex-direction:column;gap:7px}
.tk-air>.search-form-card{padding:0!important;background:none!important;border:0!important;box-shadow:none!important;border-radius:0!important}

/* ---- "gari" (vehicle) chooser ---- */
.tk-veh{display:flex;flex-direction:column;gap:5px;margin-top:2px}
.tk-veh-h{font-size:11.5px;font-weight:600;color:var(--tk-mute);padding:0 2px}
.tk-chips{display:flex;flex-wrap:wrap;gap:6px}
.tk-chip{display:flex;align-items:center;gap:7px;padding:6px 10px 6px 8px;border-radius:12px;border:1px solid var(--tk-line);background:#fff;color:var(--tk-ink);text-align:left;transition:border-color .12s,background .12s}
.tk-chip-ic{width:18px;height:18px;flex:none;color:#64748b}
.tk-chip-tx{display:flex;flex-direction:column;line-height:1.15}
.tk-chip-tx b{font-size:12px;font-weight:700}
.tk-chip-tx small{font-size:9.5px;color:var(--tk-mute)}
.tk-chip.on{border-color:var(--tk-blue);background:#eaf1ff}
.tk-chip.on .tk-chip-ic{color:var(--tk-blue)}

/* ---- standalone page ---- */
.tk-page{background:#f4f7fc}
.tk-page-top{display:flex;align-items:center;gap:12px;padding:14px 16px 10px}
.tk-h1{font-size:20px;font-weight:800;color:#10163f;line-height:1.1;margin:0}
.tk-sub{font-size:12.5px;color:#5d6a8a;margin:2px 0 0}
.tk-page-body .search-form-card{padding:10px;gap:7px;border-radius:18px;background:#fff;border:0;box-shadow:0 8px 24px rgba(15,23,42,.08);display:flex;flex-direction:column}
.tk-page-body .tk-wrap .sf-field{min-height:42px;border-radius:12px;padding:0 10px;gap:8px}
@media(min-width:640px){.tk-page-body{max-width:560px;margin:0 auto}}

/* ---- request received ---- */
.tk-done{margin:0 auto}
.tk-done-ic{width:52px;height:52px;border-radius:50%;background:#e6f7ee;color:#15803d;display:flex;align-items:center;justify-content:center;margin-bottom:12px}
.tk-done-tick{width:26px;height:26px}
.tk-done-h{font-size:22px;font-weight:800;color:#10163f;margin:0}
.tk-done-p{font-size:13.5px;color:#5d6a8a;margin:6px 0 14px;line-height:1.45}
.tk-veh-card{display:flex;align-items:center;gap:10px;padding:10px 12px;border-radius:14px;background:#fff;border:1px solid #e6ebf3;margin-bottom:10px}
.tk-veh-tx small{font-size:11px;color:#5d6a8a}
.tk-veh-tx b{font-size:15px;color:#10163f}
.tk-sum{background:#fff;border:1px solid #e6ebf3;border-radius:14px;overflow:hidden}
.tk-sum-row{display:flex;justify-content:space-between;gap:14px;padding:10px 14px;font-size:13.5px;border-top:1px solid #eef2f8}
.tk-sum-row:first-child{border-top:0}
.tk-sum-row span{color:#5d6a8a;flex:none}
.tk-sum-row b{color:#10163f;text-align:right;min-width:0;overflow-wrap:anywhere}
.tk-actions{display:flex;flex-wrap:wrap;gap:8px;margin-top:16px}
.tk-btn{height:44px;padding:0 16px;border-radius:12px;border:1px solid #d7dfec;background:#fff;color:#10163f;font-size:14px;font-weight:600}
.tk-btn-p{background:#2563eb;border-color:#2563eb;color:#fff}

/* ---- 5th card spans full width ---- */
.tk-card:last-child:nth-child(odd){grid-column:1/-1}

/* ---- top tabs inside a form ---- */
.tk-tabs{display:flex;align-items:stretch;gap:2px;padding:0 0 0;border-bottom:1px solid var(--tk-line);overflow-x:auto;scrollbar-width:none;margin-bottom:2px}
.tk-tabs::-webkit-scrollbar{display:none}
.tk-tabs .tk-back{align-self:center;margin:0 4px 6px 0}
.tk-tab{flex:1 0 auto;min-width:54px;display:flex;flex-direction:column;align-items:center;gap:3px;padding:6px 6px 8px;border:0;border-bottom:2.5px solid transparent;background:none;color:#7683a3;font-size:11.5px;font-weight:600}
.tk-tab-ic{width:22px;height:22px}
.tk-tab.on{color:#1d4ed8;border-bottom-color:#2563eb}

/* ---- stacked Depart From / Going To (reference style) ---- */
.tk-stack{position:relative;background:#f5f6f8;border-radius:14px;border:1px solid var(--tk-line);display:flex;flex-direction:column}
.tk-big{display:flex;flex-direction:column;gap:1px;padding:9px 56px 9px 14px}
.tk-big-l{font-size:11.5px;color:#7683a3}
.tk-big input{border:0;background:transparent;outline:0;padding:0;margin:0;width:100%;font:inherit;font-size:15.5px;font-weight:600;color:#10163f}
.tk-big input::placeholder{color:#10163f;font-weight:600;opacity:1}
.tk-stack-sep{height:1px;background:#fff;box-shadow:0 0 0 .5px #e3e7ee}
.tk-swap{position:absolute;right:12px;top:50%;transform:translateY(-50%);width:34px;height:34px;border-radius:10px;background:#fff;border:0;box-shadow:0 2px 8px rgba(15,23,42,.12);display:flex;align-items:center;justify-content:center;color:#10163f}
.tk-swap .sf-ic{width:16px!important;height:16px!important}
.tk-save{color:#1d4ed8!important;font-weight:600}
.tk-clr{position:absolute;right:8px;top:50%;transform:translateY(-50%);width:22px;height:22px;border-radius:50%;border:0;background:#e6ebf3;color:#475569;font-size:15px;line-height:1;z-index:2}
.tk-big input::-webkit-calendar-picker-indicator{display:none!important;opacity:0}

/* ---- site-style (monochrome icons, site type scale) ---- */
.tk-card{gap:8px;padding:12px 10px;border-radius:14px}
.tk-card-ic .tk-ic{width:24px;height:24px;color:#10163f}
.tk-card-tx b{font-size:13.5px;font-weight:600;color:#10163f;letter-spacing:-.005em}
.tk-card-tx small{font-size:10.5px;font-weight:400;color:#5d6a8a}
.tk-hub-head b{font-size:14px;font-weight:600;color:#10163f}
.tk-hub-head small{font-size:11.5px;font-weight:400;color:#5d6a8a}
.tk-ic{color:#10163f}
.tk-veh-ic{background:#f4f7fc;border-radius:10px}
.tk-card:last-child:nth-child(odd){grid-column:auto}

/* ---- type chips, time window, popular names ---- */
.tk-sec-h{display:flex;align-items:baseline;gap:6px;font-size:11.5px;font-weight:600;color:#5d6a8a;padding:3px 2px 0}
.tk-sec-h small{font-weight:400;color:#94a3b8;font-size:10.5px}
.tk-mc{display:flex;flex-wrap:wrap;gap:6px}
.tk-mchip{display:inline-flex;align-items:center;gap:4px;height:32px;padding:0 12px;border-radius:9999px;border:1px solid #e6ebf3;background:#fff;color:#25304f;font-size:12.5px;font-weight:500;white-space:nowrap}
.tk-mchip.on{border-color:#2563eb;background:#eaf1ff;color:#1d4ed8;font-weight:600}
.tk-mchip-ic{width:13px;height:13px}
.tk-acc{width:100%;text-align:left;position:relative}
.tk-acc .sf-txt{flex:1;min-width:0}
.tk-acc .sf-txt b{display:block;font-size:13.5px;font-weight:700;color:#0f172a;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.tk-acc-chev{margin-left:auto;transition:transform .15s}
.tk-acc.open .tk-acc-chev{transform:rotate(180deg)}
.tk-acc-body{display:flex;flex-direction:column;gap:8px;padding:2px 2px 4px}
.tk-link{align-self:flex-start;border:0;background:none;color:#1d4ed8;font-size:12px;font-weight:600;padding:0}

/* v4.29 Bus: Cox's Bazar one-way, operators list */
.tk-locked{background:transparent;padding-right:14px}
.tk-lock-v{font-size:15.5px;font-weight:700;color:#10163f}
.tk-hint{margin:0;padding:4px 2px;font-size:12.5px;color:#7683a3}
.tk-opsearch{width:100%;height:36px;border:1px solid #e6ebf3;border-radius:10px;background:#fff;padding:0 12px;font-size:13px;color:#10163f;outline:0}
.tk-scroll{max-height:176px;overflow-y:auto;-webkit-overflow-scrolling:touch;padding:2px 0}
.tk-ops{margin:12px 0}
.tk-op{background:#fff;border:1px solid #e6ebf3;border-radius:12px;padding:9px 12px;margin-top:8px}
.tk-op-top{display:flex;justify-content:space-between;gap:10px;align-items:baseline;font-size:13.5px;color:#10163f}
.tk-op-fare{font-size:12.5px;font-weight:700;color:#1d4ed8;flex:none}
.tk-op-sub{font-size:12px;color:#5d6a8a;margin-top:2px}
.tk-op-times{display:flex;flex-wrap:wrap;gap:5px;margin-top:6px}
.tk-op-times span{font-size:11.5px;padding:2px 8px;border-radius:9999px;background:#eaf1ff;color:#1d4ed8}
.tk-note{margin:10px 2px 0;font-size:11.5px;line-height:1.4;color:#7683a3}

/* ---- request rules (v4.31) ---- */
.tk-rules{margin-top:14px;padding:12px 14px;border-radius:14px;background:#f3f7ff;border:1px solid #dbe6fb}
.tk-rules .tk-sec-h{margin:0 0 6px}
.tk-rules-l{margin:0 0 12px;padding-left:18px;font-size:13px;line-height:1.5;color:#33415f}
.tk-rules-l li{margin:4px 0}
.tk-wa{display:flex;align-items:center;justify-content:center;width:100%;background:#16a34a;border-color:#16a34a;color:#fff;text-decoration:none}

/* ---- tab animations (v4.32) ---- */
.fl-tabs-wrap{background:#fff;border:1px solid var(--tk-line,#e6ebf3);border-radius:18px;padding:8px 12px 0;margin:10px 0 14px}
.tk-tab{position:relative;transition:color .2s ease}
.tk-tab{border-bottom-color:transparent}
.tk-tab::after{content:"";position:absolute;left:50%;right:50%;bottom:-2.5px;height:2.5px;background:#2563eb;border-radius:2px;transition:left .25s ease,right .25s ease}
.tk-tab.on{border-bottom-color:transparent}
.tk-tab.on::after{left:0;right:0}
.tk-tab:active .tk-tab-ic{transform:scale(.9)}
.tk-tab-ic{transition:transform .15s ease}
.tk-tab.on .tk-t-anim,.tk-tab.on .tk-tab-ic{animation-duration:.8s;animation-timing-function:ease-in-out;animation-fill-mode:both}
.tk-t-air.on .tk-tab-ic{animation-name:tkFly}
.tk-t-bus.on .tk-tab-ic{animation-name:tkDrive}
.tk-t-train.on .tk-tab-ic{animation-name:tkRumble}
.tk-t-launch.on .tk-tab-ic{animation-name:tkRock;transform-origin:50% 90%}
@keyframes tkFly{0%{transform:translate(-8px,6px) rotate(-8deg);opacity:.3}60%{transform:translate(3px,-3px) rotate(4deg);opacity:1}100%{transform:none}}
@keyframes tkDrive{0%{transform:translateX(-12px);opacity:.3}60%{transform:translateX(3px);opacity:1}100%{transform:none}}
@keyframes tkRumble{0%,100%{transform:none}15%{transform:translate(-1.5px,1px)}30%{transform:translate(1.5px,-1px)}45%{transform:translate(-1px,1px)}60%{transform:translate(1px,-1px)}80%{transform:translate(-.5px,.5px)}}
@keyframes tkRock{0%{transform:rotate(-10deg)}30%{transform:rotate(8deg)}60%{transform:rotate(-5deg)}100%{transform:none}}
.tk-body,.tk-air{animation:tkIn .3s ease both}
@keyframes tkIn{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}
@media (prefers-reduced-motion:reduce){.tk-tab .tk-tab-ic,.tk-body,.tk-air,.tk-tab::after{animation:none!important;transition:none!important}}

/* ---- v4.33: top back button more visible; Flight page matches Bus layout ---- */
.tk-back{border:1.5px solid #cdd7e8;background:#fff;box-shadow:0 2px 8px rgba(15,23,42,.12);color:#10163f}
.tk-back-top{width:40px;height:40px}
.tk-back-top .tk-back-ic{width:22px;height:22px;stroke-width:2.4}
.tk-back:active{transform:scale(.94)}
.fl-page .tk-page-top{padding:14px 16px 10px}
.fl-tabs-wrap.fl-unified{margin:0 12px 14px;padding:10px 12px 12px;border-radius:24px;background:#fff;border:0;box-shadow:0 8px 24px rgba(15,23,42,.08)}
.fl-unified .tk-tabs{margin-bottom:10px}
.fl-unified .fl-card{margin:0;padding:0;border:0;box-shadow:none;border-radius:0;background:transparent}
.fl-unified .fl-field{background:#fff}

/* ---- v4.35: short booking rules under the ticket type cards ---- */
.tk-hubrules{margin-top:14px;padding:12px 14px;border-radius:16px;background:#fff;box-shadow:0 4px 16px rgba(15,23,42,.06)}
.tk-hubrules .tk-sec-h{padding:0 0 8px;font-size:12.5px;color:#10163f;font-weight:700}
.tk-hr-row{display:flex;gap:10px;align-items:flex-start;padding:7px 0;border-top:1px solid #eef2f8}
.tk-hr-row:first-of-type{border-top:0}
.tk-hr-n{flex:none;width:22px;height:22px;border-radius:50%;background:#eaf1ff;color:#1d4ed8;font-size:12px;font-weight:700;display:flex;align-items:center;justify-content:center;margin-top:1px}
.tk-hr-tx{display:flex;flex-direction:column;line-height:1.3;min-width:0}
.tk-hr-tx b{font-size:13px;font-weight:600;color:#10163f}
.tk-hr-tx small{font-size:11.5px;color:#5d6a8a;margin-top:1px}
.tk-off{opacity:.55;pointer-events:none}

/* ---- request received page (Bus / Train / Ship): confirmation-style design ---- */
.tkr{max-width:480px;padding-bottom:40px}
.tkr .tkr-ic{width:18px;height:18px;flex:none}
.tkr-hero{position:relative;height:112px;display:flex;justify-content:center;align-items:center;margin-top:4px}
.tkr-ring{width:100px;height:100px;border-radius:50%;background:#e4f6ec;display:flex;align-items:center;justify-content:center;animation:tkrPop .5s cubic-bezier(.2,1.4,.4,1) both}
.tkr-tick{width:78px;height:78px;border-radius:50%;background:#22b45f;color:#fff;display:flex;align-items:center;justify-content:center;box-shadow:0 8px 20px rgba(34,180,95,.28)}
.tkr-tick-ic{width:42px;height:42px}
.tkr-cf{position:absolute;display:block;width:16px;height:7px;border-radius:4px;animation:tkrFade .7s .25s ease both}
@keyframes tkrPop{from{transform:scale(.5);opacity:0}to{transform:none;opacity:1}}
@keyframes tkrFade{from{opacity:0;transform:scale(.4)}to{opacity:1}}
.tkr-title{margin:12px 0 0;text-align:center;font-size:24px;line-height:30px;font-weight:800;letter-spacing:-.01em;color:#10163f}
.tkr-sub{margin:6px 6px 0;text-align:center;font-size:13.5px;line-height:20px;color:#66738c}
.tkr-ref{margin-top:16px;display:flex;align-items:center;gap:12px;padding:12px 12px 12px 14px;border-radius:18px;background:#e9f8ef;border:1.5px solid #d4eede}
.tkr-ref-ic{width:46px;height:50px;border-radius:14px;background:#d9f1e4;color:#1c9a57;display:flex;align-items:center;justify-content:center;flex:none}
.tkr-ref-ic .tkr-ic{width:24px;height:24px}
.tkr-ref-t{flex:1;min-width:0;display:flex;flex-direction:column;align-items:flex-start}
.tkr-ref-t small{font-size:12px;color:#5f6c86;font-weight:500}
.tkr-ref-t b{font-size:17px;font-weight:800;letter-spacing:.01em;color:#10163f;overflow-wrap:anywhere}
.tkr-pill{margin-top:4px;font-size:11px;font-weight:700;color:#b45309;background:#fff3d6;border-radius:999px;padding:2px 9px}
.tkr-copy{display:flex;align-items:center;gap:5px;border:0;background:#fff;color:#15803d;font:inherit;font-size:13px;font-weight:700;padding:8px 11px;border-radius:11px;box-shadow:0 1px 4px rgba(15,23,42,.1)}
.tkr-card{margin-top:12px;background:#fff;border:1px solid #e6ebf3;border-radius:18px;padding:14px;box-shadow:0 4px 14px rgba(15,23,42,.05)}
.tkr-rt{display:flex;align-items:center;gap:8px}
.tkr-pt{min-width:0;flex:0 1 38%;display:flex;flex-direction:column}
.tkr-pt.tkr-r{text-align:right;align-items:flex-end}
.tkr-pt small{font-size:11.5px;color:#7683a3;font-weight:600;text-transform:uppercase;letter-spacing:.04em}
.tkr-pt b{font-size:16.5px;line-height:21px;font-weight:800;color:#10163f;overflow-wrap:anywhere}
.tkr-mid{flex:1;display:flex;align-items:center;gap:4px;min-width:40px}
.tkr-line{flex:1;border-top:2px dashed #c3cfe6}
.tkr-vic{width:34px;height:34px;border-radius:50%;background:#eaf1ff;color:#2563eb;display:flex;align-items:center;justify-content:center;flex:none}
.tkr-chips{display:flex;flex-wrap:wrap;gap:8px;margin-top:14px}
.tkr-chip{display:inline-flex;align-items:center;gap:6px;background:#f3f7ff;border:1px solid #dbe6fb;color:#1e3a8a;font-size:13px;font-weight:700;padding:7px 11px;border-radius:999px}
.tkr-chip .tkr-ic{width:15px;height:15px}
.tkr-rows{margin-top:12px;border-top:1px solid #eef2f8}
.tkr-row{display:flex;justify-content:space-between;gap:14px;padding:9px 0;font-size:13.5px;border-bottom:1px solid #f1f4f9}
.tkr-row:last-child{border-bottom:0;padding-bottom:0}
.tkr-row span{color:#5d6a8a;flex:none}
.tkr-row b{color:#10163f;text-align:right;min-width:0;overflow-wrap:anywhere}
.tkr-wa{margin-top:12px;border-radius:18px;padding:14px;background:linear-gradient(135deg,#e8f9ee,#d6f3e1);border:1.5px solid #bfe8cf}
.tkr-wa-t b{display:block;font-size:15.5px;font-weight:800;color:#0f5132}
.tkr-wa-t small{display:block;margin-top:3px;font-size:13px;line-height:18px;color:#2f6b4a}
.tkr-wa-b{margin-top:12px;display:flex;align-items:center;justify-content:center;gap:8px;height:48px;border-radius:14px;background:#16a34a;color:#fff;font-size:15px;font-weight:700;text-decoration:none;box-shadow:0 6px 14px rgba(22,163,74,.32)}
.tkr-wa-b .tkr-ic{width:22px;height:22px}
.tkr-h{font-size:15px;font-weight:800;color:#10163f;margin-bottom:10px}
.tkr-step{position:relative;display:flex;gap:12px;padding-bottom:16px}
.tkr-step.last{padding-bottom:0}
.tkr-step:not(.last)::before{content:"";position:absolute;left:13px;top:28px;bottom:2px;width:2px;background:#e1e8f5}
.tkr-step.done:not(.last)::before{background:#22b45f}
.tkr-dot{width:28px;height:28px;border-radius:50%;flex:none;display:flex;align-items:center;justify-content:center;font-size:13px;font-weight:800;background:#eef2f9;color:#7683a3;z-index:1}
.tkr-step.done .tkr-dot{background:#22b45f;color:#fff}
.tkr-step.now .tkr-dot{background:#2563eb;color:#fff;box-shadow:0 0 0 5px rgba(37,99,235,.15)}
.tkr-dot .tkr-ic{width:15px;height:15px}
.tkr-st b{display:block;font-size:14px;font-weight:700;color:#10163f;line-height:28px;margin-top:-1px}
.tkr-st small{display:block;font-size:12.5px;line-height:18px;color:#5d6a8a;margin-top:-3px}
.tkr-actions{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-top:18px}
.tkr-actions .tk-btn{width:100%;height:48px;padding:0 10px;border-radius:14px;font-size:14.5px;font-weight:700;white-space:nowrap}
.tkr-actions .tk-btn-p{grid-column:1 / -1;height:52px;font-size:15.5px;box-shadow:0 6px 14px rgba(37,99,235,.28)}
@media (prefers-reduced-motion:reduce){.tkr-ring,.tkr-cf{animation:none!important}}

/* ---- premium "priority service" WhatsApp card + pop-up ---- */
.tkr-pr{position:relative;overflow:hidden;margin-top:12px;border-radius:20px;padding:16px 16px 16px;color:#fff;background:radial-gradient(120% 90% at 100% 0%,rgba(246,194,36,.22),transparent 55%),linear-gradient(145deg,#0a1a45 0%,#13307a 100%);box-shadow:0 12px 28px rgba(10,26,69,.35);border:1px solid rgba(246,194,36,.35)}
.tkr-pr-badge{display:inline-flex;align-items:center;gap:5px;font-size:10.5px;font-weight:800;letter-spacing:.09em;color:#1b1400;background:linear-gradient(135deg,#ffe08a,#f6c224);padding:4px 10px 4px 8px;border-radius:999px}
.tkr-pr-badge .tkr-ic{width:12px;height:12px}
.tkr-pr-h{display:block;margin-top:10px;font-size:19px;line-height:24px;font-weight:800;letter-spacing:-.01em}
.tkr-pr-p{margin:5px 0 0;font-size:13.5px;line-height:20px;color:#c9d6f5}
.tkr-pr-l{list-style:none;margin:12px 0 0;padding:0;display:flex;flex-direction:column;gap:7px}
.tkr-pr-l li{display:flex;align-items:center;gap:8px;font-size:13px;color:#e8eefc}
.tkr-pr-l .tkr-ic{width:18px;height:18px;padding:3px;border-radius:50%;background:rgba(246,194,36,.2);color:#ffd45c}
.tkr-pr-b{position:relative;overflow:hidden;margin-top:14px;display:flex;align-items:center;justify-content:center;gap:9px;height:52px;border-radius:15px;background:linear-gradient(135deg,#25d366,#128c4a);color:#fff;font-size:16px;font-weight:800;text-decoration:none;box-shadow:0 8px 20px rgba(18,140,74,.45)}
.tkr-pr-b .tkr-ic{width:23px;height:23px}
.tkr-shine{position:absolute;top:0;bottom:0;left:-60%;width:40%;background:linear-gradient(100deg,transparent,rgba(255,255,255,.45),transparent);transform:skewX(-20deg);animation:tkrShine 3s ease-in-out infinite}
@keyframes tkrShine{0%,55%{left:-60%}100%{left:130%}}
.tkr-sh-ov{position:fixed;inset:0;z-index:2000000000;background:rgba(6,12,36,.62);display:flex;align-items:flex-end;justify-content:center;animation:tkrOv .25s ease both}
@keyframes tkrOv{from{opacity:0}to{opacity:1}}
.tkr-sh{width:100%;max-width:480px;border-radius:26px 26px 0 0;padding:10px 20px calc(22px + env(safe-area-inset-bottom,0px));color:#fff;text-align:center;background:radial-gradient(120% 80% at 50% 0%,rgba(246,194,36,.22),transparent 60%),linear-gradient(160deg,#0a1a45 0%,#13307a 100%);border-top:1px solid rgba(246,194,36,.45);box-shadow:0 -14px 40px rgba(0,0,0,.4);animation:tkrUp .38s cubic-bezier(.2,.9,.3,1) both}
@keyframes tkrUp{from{transform:translateY(100%)}to{transform:none}}
.tkr-sh-grip{display:block;width:42px;height:4px;border-radius:4px;background:rgba(255,255,255,.3);margin:0 auto 16px}
.tkr-sh-h{display:block;margin-top:12px;font-size:22px;line-height:28px;font-weight:800;letter-spacing:-.01em}
.tkr-sh-p{margin:7px 6px 0;font-size:14px;line-height:21px;color:#c9d6f5}
.tkr-sh .tkr-pr-b{margin-top:18px}
.tkr-sh-later{margin-top:6px;border:0;background:none;color:#a9b9e3;font:inherit;font-size:14px;font-weight:600;padding:12px}
@media (prefers-reduced-motion:reduce){.tkr-shine,.tkr-sh,.tkr-sh-ov{animation:none!important}}

/* ---- match site theme: white + blue (overrides the dark navy / gold look above) ---- */
.tkr-pr{background:linear-gradient(145deg,#fff 0%,#eef4ff 100%);color:#10163f;border:1px solid #cfe0fb;box-shadow:0 8px 22px rgba(37,99,235,.12)}
.tkr-pr-badge{color:#1d4ed8;background:#e3edff}
.tkr-pr-h{color:#10163f}
.tkr-pr-p{color:#5d6a8a}
.tkr-pr-l li{color:#33415f}
.tkr-pr-l .tkr-ic{background:#dcfce7;color:#16a34a}
.tkr-sh-ov{background:rgba(16,22,63,.45)}
.tkr-sh{background:#fff;color:#10163f;border-top:0;box-shadow:0 -14px 40px rgba(15,23,42,.25)}
.tkr-sh-grip{background:#d3dcee}
.tkr-sh-h{color:#10163f}
.tkr-sh-p{color:#5d6a8a}
.tkr-sh-later{color:#6b7694}

/* ---- payment request pushed from Admin (Pay to confirm) ---- */
.tkr-pill-due{color:#b91c1c;background:#fee2e2}
.tkr-pill-ver{color:#1d4ed8;background:#e0eaff}
.tkr-pill-paid{color:#15803d;background:#dcfce7}
.tkr-pay{margin-top:14px;padding:16px;border-radius:20px;background:linear-gradient(145deg,#fff 0%,#eef4ff 100%);border:1.5px solid #2563eb;box-shadow:0 10px 26px rgba(37,99,235,.2)}
.tkr-pay-submitted{border-color:#93b4f5;box-shadow:none}
.tkr-pay-paid{border-color:#22b45f;background:linear-gradient(145deg,#fff 0%,#e9f8ef 100%);box-shadow:none}
.tkr-pay-top{display:flex;align-items:center;justify-content:space-between;gap:10px}
.tkr-pay-badge{font-size:11px;font-weight:800;letter-spacing:.06em;color:#1d4ed8;background:#e3edff;border-radius:999px;padding:4px 10px}
.tkr-pay-paid .tkr-pay-badge{color:#15803d;background:#dcfce7}
.tkr-pay-amt{font-size:28px;font-weight:800;color:#10163f}
.tkr-pay-note{margin:8px 0 0;font-size:14px;line-height:20px;color:#33415f;white-space:pre-wrap}
.tkr-pay-btn{position:relative;overflow:hidden;margin-top:14px;width:100%;height:52px;border:0;border-radius:15px;background:linear-gradient(135deg,#2563eb,#1d4ed8);color:#fff;font:inherit;font-size:16px;font-weight:800;box-shadow:0 8px 20px rgba(37,99,235,.4)}
.tkr-psh{text-align:left;max-height:92vh;overflow:auto}
.tkr-psh .tkr-sh-h,.tkr-psh .tkr-sh-p,.tkr-psh .tkr-pr-badge{text-align:center}
.tkr-psh .tkr-pr-badge{display:block;width:max-content;margin:0 auto}
.tkr-pm{display:flex;gap:8px;margin-top:14px}
.tkr-pm-b{flex:1;height:40px;border-radius:12px;border:1.5px solid #d3dcee;background:#fff;color:#10163f;font:inherit;font-size:14px;font-weight:700}
.tkr-pm-b.on{border-color:#2563eb;background:#e8f0ff;color:#1d4ed8}
.tkr-pnum{margin-top:12px;display:flex;align-items:center;gap:10px;padding:10px 12px;border-radius:14px;background:#f2f6ff;border:1px solid #d9e5fb}
.tkr-pnum small{display:block;flex-basis:100%;font-size:12px;color:#5d6a8a}
.tkr-pnum{flex-wrap:wrap}
.tkr-pnum b{flex:1;font-size:19px;letter-spacing:.03em;color:#10163f}
.tkr-pin{display:block;width:100%;height:48px;margin-top:10px;padding:0 14px;border-radius:14px;border:1.5px solid #d3dcee;background:#fff;font:inherit;font-size:16px;color:#10163f}
.tkr-pin:focus{outline:none;border-color:#2563eb;box-shadow:0 0 0 3px rgba(37,99,235,.15)}
.tkr-perr{margin:8px 2px 0;font-size:13px;font-weight:600;color:#dc2626}
.tkr-hide{display:none!important}

/* v4.50: collapsible "How booking works" under the form */
.tk-hubrules{margin-top:14px}
.tk-hubrules.is-closed .tk-hr-list{position:relative;max-height:96px;overflow:hidden}
.tk-hubrules.is-closed .tk-hr-list:after{content:"";position:absolute;left:0;right:0;bottom:0;height:34px;background:linear-gradient(to bottom,rgba(255,255,255,0),#fff);pointer-events:none}
.tk-hr-more{display:flex;align-items:center;justify-content:center;gap:4px;width:100%;margin-top:6px;padding:8px 0 2px;border:0;background:none;color:#1d4ed8;font-size:13px;font-weight:700;cursor:pointer;-webkit-tap-highlight-color:transparent}
.tk-hr-chev{transition:transform .25s ease}
.tk-hubrules.is-open .tk-hr-chev{transform:rotate(180deg)}
.tk-hubrules.is-open .tk-hr-row{animation:tkHrIn .25s ease both}
@keyframes tkHrIn{from{opacity:0;transform:translateY(-4px)}to{opacity:1;transform:none}}

/* ---- v4.36: wide screens (owner fix, 2026-11-05) ----
   The hub was designed phone-first, and its only wide-screen rule capped
   .tk-page-body at 560px — on a PC the whole Tickets page sat in a phone
   column with the title stranded at the far left. The rules below give the
   page the site's normal 1200px container, put "How booking works" beside
   the form as a rail (the arrangement the site's other desktop pages use),
   lay the route fields side by side, and give the request-received page a
   two-column desktop body. Layout only: no colours, radii, shadows or type
   styles change, and everything under 768px is exactly as designed. */
@media (min-width:768px){
  .tk-page-top{max-width:1200px;margin-left:auto;margin-right:auto;width:100%;padding:22px 24px 8px}
  .tk-h1{font-size:24px}
  .tk-page-body{max-width:1200px;padding-left:24px;padding-right:24px}
  .tkr{max-width:720px}
}
@media (min-width:768px){
  .tk-page-body>div{display:grid;grid-template-columns:minmax(0,1fr) 340px;gap:20px;align-items:start}
  .tk-page-body .search-form-card{padding:18px}
  .tk-page-body .tk-hubrules{margin-top:0;position:sticky;top:88px}
  .tk-page .tk-stack{flex-direction:row}
  .tk-page .tk-stack>.tk-big{flex:1 1 0;min-width:0;padding:12px 18px}
  .tk-page .tk-stack-sep{height:auto;width:1px;box-shadow:none;background:#e3e7ee}
  .tk-page .tk-swap{left:50%;right:auto;transform:translate(-50%,-50%)}
  .tkr{max-width:1080px;display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:16px;align-items:start}
  .tkr>.tkr-hero,.tkr>.tkr-title,.tkr>.tkr-sub,.tkr>.tkr-ref,.tkr>.tkr-pay,.tkr>.tkr-actions,.tkr>.tkr-sh-ov{grid-column:1/-1}
  .tkr>.tkr-card:not(.tkr-next){grid-column:1}
  .tkr>.tkr-pr,.tkr>.tkr-wa,.tkr>.tkr-card.tkr-next{grid-column:2}
  .tkr>.tkr-card,.tkr>.tkr-pr,.tkr>.tkr-wa{margin-top:0}
  .tkr>.tkr-actions{margin-top:2px}
}

/* ── v4.37 (owner request): designed dropdowns + calm focus ─────────────
   The ticket forms were the only forms still opening the browser's own
   UI: the native <select> popup and the <datalist> list. Both are custom
   panels now, styled after the stays search form's dropdowns
   (desktop-search.css .bhds-pop: same border, radius, shadow, row hover
   and selected tint), and a clicked field no longer gets the browser's
   harsh blue outline — it takes the stays form's focus state instead
   (border turns blue with a soft halo, .bhds-box.is-open). */
.tk-ddw{position:relative}
.tk-ddbtn{display:flex;align-items:center;gap:8px;flex:1;min-width:0;background:none;border:0;padding:0;margin:0;font:inherit;color:inherit;cursor:pointer;text-align:left}
.tk-ddbtn:focus{outline:none}
.tk-ddval{display:block;font-size:15px;font-weight:700;color:#0f172a;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.tk-dd{position:absolute;left:0;right:0;top:calc(100% + 8px);z-index:80;background:#fff;border:1px solid #e1e8f5;border-radius:18px;box-shadow:0 28px 64px -14px rgba(15,29,77,.30),0 4px 14px rgba(15,29,77,.06);padding:6px;max-height:264px;overflow-y:auto;animation:tkDdIn .16s ease-out}
@keyframes tkDdIn{from{opacity:0;transform:translateY(-6px)}to{opacity:1;transform:none}}
@media (prefers-reduced-motion:reduce){.tk-dd{animation:none}}
.tk-dd-it{display:flex;align-items:center;justify-content:space-between;gap:8px;width:100%;padding:10px 12px;border:0;border-radius:12px;background:none;font:inherit;font-size:14.5px;font-weight:600;color:#0f1d4d;text-align:left;cursor:pointer}
.tk-dd-it:hover{background:#f1f6ff}
.tk-dd-it.on{background:#f1f6ff;color:#1d63f0}
.tk-dd-ck{width:16px;height:16px;flex:none}
.sf-field .sf-chev{transition:transform .15s}
.sf-field .sf-chev.open{transform:rotate(180deg)}
.tk-big{position:relative}
.tk-sugw{display:block}
.tk-sug{left:-4px;right:-4px;top:calc(100% + 10px)}
.tk-wrap input:focus,.tk-wrap select:focus,.tk-wrap textarea:focus,
.tk-page input:focus,.tk-page select:focus,.tk-page textarea:focus{outline:none!important;box-shadow:none!important}
.tk-wrap .sf-field:focus-within,.tk-page .sf-field:focus-within{border-color:#1d63f0;box-shadow:0 0 0 3px rgba(29,99,240,.14)}
.tk-stack:focus-within{border-color:#1d63f0;box-shadow:0 0 0 3px rgba(29,99,240,.14)}

/* ── v4.38 (owner request): the GoZayaan arrangement, tickets pages only ──
   Desktop only. The options stay on top (tabs + trip-type pills, as
   before); the fill boxes line up in ONE row — route, dates, a single
   "Travellers & class" box (stepper panel) and Airline on the flight
   form; route, date and Persons on the others — and the search button
   sits big and centred, half overlapping the card's bottom edge, in the
   site's own blue. "How booking works" moves under the wide form.
   Under 1024px (and everywhere outside the ticket pages) nothing
   changes: .tk-mainrow is display:contents and the classic stacked
   fields render exactly as designed. */
.tk-mainrow{display:contents}
.tk-travbox{display:none}
.tk-ddsub{font-size:12.5px;font-weight:600;color:#6b7a99;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.tk-travp{left:auto;right:0;width:344px;max-width:92vw;padding:10px 14px 14px}
.tk-trow{display:flex;align-items:center;justify-content:space-between;gap:10px;padding:9px 0;border-bottom:1px solid #eef2f9}
.tk-tlab{font-size:14.5px;font-weight:600;color:#0f1d4d}
.tk-stp{display:inline-flex;align-items:center;gap:12px}
.tk-stp button{width:32px;height:32px;padding:0;border-radius:50%;border:1px solid #d3dcee;background:#fff;font-size:18px;line-height:1;color:#2563eb;cursor:pointer;display:grid;place-items:center}
.tk-stp button:disabled{opacity:.35;cursor:not-allowed}
.tk-stp b{min-width:16px;text-align:center;font-size:15px;color:#0f1d4d}
.tk-trow-c{flex-direction:column;align-items:stretch;gap:8px;border-bottom:0}
.tk-cabs{display:flex;flex-wrap:wrap;gap:6px}
.tk-travdone{width:100%;margin-top:12px;height:42px;border:0;border-radius:12px;background:#2563eb;color:#fff;font:inherit;font-size:15px;font-weight:700;cursor:pointer}
@media (min-width:768px){
  .tk-page .tk-page-body>div{grid-template-columns:minmax(0,1fr)}
  .tk-page .tk-hubrules{position:static;top:auto;margin-top:30px}
  .tk-page .tk-form{padding-bottom:12px;margin-bottom:34px}
  .tk-page .tk-mainrow{display:grid;gap:10px;align-items:stretch}
  .tk-page .tk-mr-flight{grid-template-columns:minmax(0,2fr) minmax(0,1fr) minmax(0,1fr) minmax(0,1.25fr) minmax(0,1.05fr)}
  .tk-page .tk-mr-3{grid-template-columns:minmax(0,2.2fr) minmax(0,1fr) minmax(0,1fr)}
  .tk-page .tk-mainrow .tk-dc{display:contents}
  .tk-page .tk-mainrow .sf-field{min-height:64px}
  .tk-page .tk-mobrow{display:none}
  .tk-page .tk-travbox{display:flex}
  .tk-page .tk-form .sf-search{width:300px;max-width:80%;height:54px;margin:22px auto -39px;font-size:17px;position:relative;z-index:6}
}
/* v4.38 fix: an open panel must paint over the cards below the form. */
@media (min-width:768px){
  .tk-page .tk-form{position:relative;z-index:20}
}

/* v4.38 fix 2: the travellers panel shows in full (no inner scroll). */
.tk-travp{max-height:none}

/* ── v4.39 (owner request): the home page's background on the tickets pages ──
   The tickets pages sat on plain pale colour and looked empty next to
   the home page. They now get the home hero's own treatment (see
   home-redesign.css .is-home .home-top): /hero.jpg across the top,
   melting into the page colour #f4f7fc with the same fade. Scoped to
   .tk-page, so nothing outside the tickets area changes. */
.tk-page{position:relative;background-color:#f4f7fc}
.tk-page::before{content:"";position:absolute;left:0;right:0;top:0;height:460px;pointer-events:none;background:linear-gradient(180deg,rgba(244,247,252,0) 50%,rgba(244,247,252,.38) 74%,#f4f7fc 100%),url("/hero.jpg") 50% 30%/cover no-repeat #8fe2e6}
.tk-page>*{position:relative;z-index:1}
@media (max-width:767px){.tk-page::before{height:350px}}
/* v4.39 follow-up: the page title sits on the photo now, so it takes the
   home hero's own text treatment — white with the hero's soft shadow —
   or the subtitle disappears into the sky. */
.tk-page .tk-h1{color:#fff;text-shadow:0 1px 3px rgba(0,25,55,.55),0 3px 16px rgba(0,25,55,.40)}
.tk-page .tk-sub{color:rgba(255,255,255,.92);text-shadow:0 1px 3px rgba(0,25,55,.5)}

/* ── v4.40: GoZayaan-style airport picker panels (flight From/To on the
   tickets hub and the /flights page; owner request). Rows: city +
   airport name on the left, IATA code chip on the right; the panel is
   scrollable so EVERY airport shows — no 10-row cap. ── */
.tk-port{width:300px;max-height:336px;overflow-y:auto;padding:6px}
.tk-port-r{left:auto;right:0}
.tk-port-h{padding:8px 10px 4px;font-size:10.5px;font-weight:800;letter-spacing:.08em;text-transform:uppercase;color:#6b7a99}
.tk-port-it{display:flex;align-items:center;gap:10px}
.tk-port-tx{display:flex;flex-direction:column;min-width:0;flex:1}
.tk-port-tx b{font-size:14px;font-weight:700;color:#0f1d4d;line-height:1.25}
.tk-port-tx small{font-size:11.5px;color:#6b7a99;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.tk-port-code{flex:none;font-size:12px;font-weight:800;letter-spacing:.04em;color:#1d63f0;background:#eef3fd;border-radius:8px;padding:3px 8px}
.fl-portw{display:block;position:relative}

/* ── v4.41: multi-city legs (owner request, GoZayaan-style): each extra
   flight gets its own From/To + date block with a remove button, plus a
   dashed "Add another city" button. On the tickets page at desktop the
   legs span the full form width, route and date side by side. ── */
.tk-legs{display:block}
.tk-leg{margin-top:16px}
.tk-leg:first-child{margin-top:2px}
.tk-leg-h{display:flex;align-items:center;justify-content:space-between;margin-bottom:8px}
.tk-leg-t{font-size:12px;font-weight:800;letter-spacing:.06em;text-transform:uppercase;color:#6b7a99}
.tk-leg-x{width:26px;height:26px;border-radius:999px;border:1px solid #e1e8f5;background:#fff;color:#6b7a99;font-size:13px;line-height:1;display:flex;align-items:center;justify-content:center;cursor:pointer}
.tk-leg-x:hover{color:#dc2626;border-color:#fecaca}
.tk-addleg{margin-top:14px;display:inline-flex;align-items:center;gap:6px;border:1.5px dashed #b9cdf7;background:#f4f8ff;color:#1d63f0;font-weight:700;font-size:13.5px;border-radius:12px;padding:10px 16px;cursor:pointer}
.tk-addleg:hover{background:#e9f1fe}
.fl-leg{margin-top:10px}
@media(min-width:768px){
.tk-page .tk-legs{grid-column:1/-1}
.tk-page .tk-leg{display:grid;grid-template-columns:2fr 1fr;gap:8px 14px}
.tk-page .tk-leg-h{grid-column:1/-1;margin-bottom:0}
}

/* ── v4.42: flight status — the current step (usually "We check
   availability", where guests wait) feels alive: a soft pulsing halo on
   the step circle, bouncing dots beside the checking title and a small
   green live note. Same colours and shapes as the rest of the page. ── */
.fl-step-now{animation:flPulse 1.8s ease-out infinite}
@keyframes flPulse{0%{box-shadow:0 0 0 0 rgba(37,99,235,.35)}70%{box-shadow:0 0 0 10px rgba(37,99,235,0)}100%{box-shadow:0 0 0 0 rgba(37,99,235,0)}}
.fl-dots{display:inline-flex;gap:4px;margin-left:9px;vertical-align:middle}
.fl-dots i{width:6px;height:6px;border-radius:50%;background:#2563eb;display:block;animation:flDot 1.2s ease-in-out infinite}
.fl-dots i:nth-child(2){animation-delay:.15s}
.fl-dots i:nth-child(3){animation-delay:.3s}
@keyframes flDot{0%,60%,100%{transform:translateY(0);opacity:.4}30%{transform:translateY(-4px);opacity:1}}
.fl-live{display:flex;align-items:center;gap:7px;margin-top:10px;font-size:12.5px;color:#6b7a99}
.fl-live i{width:8px;height:8px;border-radius:50%;background:#22c55e;flex:none;animation:flPulseG 1.8s ease-out infinite}
@keyframes flPulseG{0%{box-shadow:0 0 0 0 rgba(34,197,94,.35)}70%{box-shadow:0 0 0 8px rgba(34,197,94,0)}100%{box-shadow:0 0 0 0 rgba(34,197,94,0)}}

/* ── v4.43: flight-request status page redesigned to the owner's mockups
   (Apple-like: airy sky gradient, white 22px cards, soft shadows, system
   font). Scoped to .fls — the flight status view only; the site header
   and every other page are untouched. ── */
.fls{background:linear-gradient(180deg,#e6effc 0,#f2f7fe 340px,#edf3fb 100%);color:#0b1f4d;font-family:-apple-system,BlinkMacSystemFont,"SF Pro Text","Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;padding:26px 16px 64px;min-height:82vh}
.fls-in{max-width:1080px;margin:0 auto}
.fls button{font-family:inherit}
.fls-back{display:inline-flex;align-items:center;gap:7px;background:none;border:0;color:#2563eb;font-size:14.5px;font-weight:600;cursor:pointer;padding:0}
.fls-back svg{width:17px;height:17px}
.fls-hero{position:relative;margin-top:16px;min-height:104px}
.fls-hero-tx{position:relative;z-index:1}
.fls-h1{font-size:40px;font-weight:800;letter-spacing:-.03em;color:#0a1c40;line-height:1.08}
.fls-ref{display:flex;align-items:center;gap:8px;color:#5b6b8c;font-size:15px;margin-top:7px}
.fls-ref b{color:#0a1c40;font-weight:700}
.fls-copy{display:inline-flex;align-items:center;justify-content:center;width:27px;height:27px;border-radius:8px;border:0;background:transparent;color:#2563eb;cursor:pointer;flex:none}
.fls-copy:hover{background:#e3edff}
.fls-copy svg{width:15px;height:15px}
.fls-new{position:absolute;right:0;top:10px;z-index:2;display:inline-flex;align-items:center;gap:6px;background:rgba(255,255,255,.85);backdrop-filter:blur(8px);border:1px solid #d8e6fa;color:#2563eb;font-size:14px;font-weight:700;border-radius:999px;padding:9px 17px;cursor:pointer;box-shadow:0 8px 20px -10px rgba(23,54,120,.25)}
.fls-new svg{width:15px;height:15px}
.fls-steps{position:relative;display:grid;grid-template-columns:repeat(4,1fr);margin:30px 0 4px}
.fls-line{position:absolute;left:12.5%;right:12.5%;top:20px;height:3px;background:#d9e5f5;border-radius:2px;overflow:hidden}
.fls-line-fill{height:100%;background:#2563eb;border-radius:2px;transition:width .5s ease}
.fls-step{position:relative;display:flex;flex-direction:column;align-items:center;text-align:center;gap:9px;padding:0 4px}
.fls-dot{width:40px;height:40px;border-radius:50%;background:#e9effa;color:#7c8db0;font-weight:800;font-size:15px;display:flex;align-items:center;justify-content:center;border:3px solid #fdfdff;box-shadow:0 3px 10px rgba(15,45,110,.10);z-index:1}
.fls-dot.fill{background:#2563eb;color:#fff}
.fls-step-lb{font-size:13.5px;color:#71809f;line-height:1.3}
.fls-step.on .fls-step-lb{color:#0a1c40;font-weight:700}
.fls-grid{display:grid;grid-template-columns:1.02fr .98fr;gap:22px;margin-top:22px;align-items:start}
.fls-card{background:#fff;border:1px solid #e2ebf7;border-radius:22px;box-shadow:0 16px 36px -20px rgba(23,54,120,.20);padding:24px}
.fls-card-h{display:flex;align-items:center;gap:12px}
.fls-card-h h2{font-size:20px;font-weight:800;letter-spacing:-.015em;color:#0a1c40}
.fls-ic{width:42px;height:42px;border-radius:12px;background:#e8f0fe;color:#2563eb;display:flex;align-items:center;justify-content:center;flex:none}
.fls-ic svg{width:21px;height:21px}
.fls-ic-lg{width:48px;height:48px;border-radius:14px;margin-bottom:14px}
.fls-ic-lg svg{width:24px;height:24px}
.fls-sub{color:#5b6b8c;font-size:13.5px;margin-top:3px;line-height:1.45}
.fls-rows{margin-top:10px}
.fls-row{display:flex;align-items:center;gap:12px;padding:11px 0;border-top:1px solid #eef3fa}
.fls-rows .fls-row:first-child{border-top:0}
.fls-row-ic{color:#8494b3;display:flex;flex:none}
.fls-row-ic svg{width:19px;height:19px}
.fls-row-lb{color:#5b6b8c;font-size:14.5px;width:104px;flex:none}
.fls-row-vl{font-weight:700;font-size:14.5px;color:#0a1c40;display:flex;align-items:center;gap:7px;min-width:0;flex-wrap:wrap}
.fls-pill{background:#e8f0fe;color:#2563eb;font-weight:700;font-size:12.5px;border-radius:999px;padding:3px 11px}
.fls-state-h{font-size:23px;font-weight:800;letter-spacing:-.02em;color:#0a1c40;line-height:1.2}
.fls-txt{color:#44577a;font-size:14.5px;line-height:1.55;margin-top:9px}
.fls-ticket{display:block;width:235px;max-width:72%;margin:0 auto 14px}
.fls-plane-m{display:none}
.fls-live{margin-top:16px;background:#e9f9ef;border:1px solid #d2f1dc;border-radius:14px;padding:12px 14px;display:flex;gap:10px;align-items:flex-start}
.fls-live i{width:10px;height:10px;border-radius:50%;background:#22c55e;flex:none;margin-top:5px;animation:flPulseG 1.8s ease-out infinite}
.fls-live p{font-size:14px;line-height:1.5;color:#1c4630}
.fls-live b{color:#16a34a}
.fls-price{font-size:31px;font-weight:800;letter-spacing:-.02em;color:#0a1c40;margin-top:8px}
.fls-badge{display:inline-block;background:#fef3c7;color:#b45309;font-size:11px;font-weight:800;letter-spacing:.07em;border-radius:999px;padding:4px 11px;margin-bottom:12px}
.fls-state-pay{background:#fffbeb;border-color:#fde9c0}
.fls-paybtn{margin-top:16px;height:47px;padding:0 26px;border:0;border-radius:13px;background:#2563eb;color:#fff;font-size:15px;font-weight:700;cursor:pointer;box-shadow:0 12px 22px -10px rgba(37,99,235,.55)}
.fls-contact{margin-top:22px}
.fls-contact-done{font-size:15.5px;font-weight:700;color:#0a1c40}
.fls-cform{display:grid;grid-template-columns:1fr 1.25fr 1.25fr auto;gap:12px;margin-top:18px}
.fls-field2{display:flex;align-items:center;gap:9px;border:1px solid #dbe6f5;border-radius:13px;padding:0 13px;height:50px;background:#fff;color:#8494b3}
.fls-field2 svg{width:18px;height:18px;flex:none}
.fls-field2 input{border:0;outline:0;flex:1;min-width:0;font-size:14.5px;background:none;color:#0a1c40;font-family:inherit}
.fls-field2:focus-within{border-color:#2563eb;box-shadow:0 0 0 3px rgba(37,99,235,.13)}
.fls-save{height:50px;padding:0 22px;border-radius:13px;background:#2563eb;color:#fff;font-weight:700;font-size:14.5px;display:inline-flex;align-items:center;justify-content:center;gap:8px;border:0;cursor:pointer;box-shadow:0 12px 22px -10px rgba(37,99,235,.55);white-space:nowrap}
.fls-save svg{width:17px;height:17px}
.fls-err{color:#dc2626;font-size:13.5px;margin-top:10px}
@media(max-width:900px){
.fls-cform{grid-template-columns:1fr 1fr}
.fls-save{grid-column:1/-1}
}
@media(max-width:767px){
.fls{padding:18px 12px 48px}
.fls-h1{font-size:31px}
.fls-hero{min-height:0}
.fls-new{top:2px;padding:8px 14px;font-size:13.5px}
.fls-steps{margin-top:24px}
.fls-line{top:18px}
.fls-dot{width:36px;height:36px;font-size:14px}
.fls-step-lb{font-size:12px}
.fls-grid{grid-template-columns:1fr;gap:16px;margin-top:18px}
.fls-card{padding:19px}
.fls-ticket{display:none}
.fls-plane-m{display:block;width:calc(100% + 38px);margin:-19px -19px 14px;height:128px;object-fit:cover;object-position:72% 32%;border-radius:22px 22px 0 0}
.fls-row-lb{width:92px;font-size:13.5px}
.fls-row-vl{font-size:13.5px}
.fls-cform{grid-template-columns:1fr}
.fls-state-h{font-size:21px}
}

/* ── v4.43 (2): on PC the Flight/Bus/Train/Ship tabs leave the form card
   and sit up top as a floating pill bar (owner request, from his
   mockups). The site header itself is NOT changed. Mobile unchanged. ── */
@media(min-width:768px){
.tk-page .tk-form{margin-top:72px}
.tk-page .tk-tabs{position:absolute;top:-64px;left:50%;transform:translateX(-50%);width:max-content;max-width:94%;background:rgba(255,255,255,.88);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);border:1px solid #e2ebf7;border-radius:999px;padding:6px;gap:4px;box-shadow:0 18px 36px -16px rgba(23,54,120,.30);overflow:visible;margin:0;z-index:40}
.tk-page .tk-tab{flex:none;flex-direction:row;align-items:center;gap:8px;padding:9px 20px;border:0;border-radius:999px;font-size:13.5px;min-width:0;color:#5b6b8c}
.tk-page .tk-tab.on{background:#e3edff;color:#1d4ed8;border:0}
.tk-page .tk-tab .tk-tab-ic{width:19px;height:19px}
.fl-unified .tk-tabs{background:rgba(255,255,255,.92);border:1px solid #e2ebf7;border-radius:999px;padding:6px;gap:4px;box-shadow:0 18px 36px -18px rgba(23,54,120,.25);width:max-content;max-width:100%;margin:2px auto 14px;overflow:visible}
.fl-unified .tk-tab{flex:none;flex-direction:row;align-items:center;gap:8px;padding:9px 20px;border:0;border-radius:999px;font-size:13.5px;min-width:0;color:#5b6b8c}
.fl-unified .tk-tab.on{background:#e3edff;color:#1d4ed8;border:0}
.fl-unified .tk-tab .tk-tab-ic{width:19px;height:19px}
}

/* v4.43 polish: headings on the status page use the same clean system
   sans as the rest of the page (the site's display font only sneaks in
   through the global h1/h2 rule), and the hero plane sits smaller and
   higher so it never washes over the step tracker. */
.fls h1,.fls h2,.fls h3{font-family:inherit}

/* v4.43 polish (2): the tabs' old underline bar must not leak into the
   new pill bar. */
@media(min-width:1024px){
.tk-page .tk-tab::after,.tk-page .tk-tab.on::after,.fl-unified .tk-tab::after,.fl-unified .tk-tab.on::after{display:none!important}
}

/* ── v4.44: mobile status page matched to the owner's mobile mockup —
   bigger tracker circles, darker row icons, chunkier cabin pill and
   dots, and the checking card's plane sits in the card's top-right
   corner as a soft sky (background art), not a photo strip. ── */
.fls-row-ic{color:#47607f}
.fls-row-ic svg{width:20px;height:20px}
.fls-pill{padding:5px 14px;font-size:13px}
.fls-dots i{width:7px;height:7px}
.fls-live i{width:12px;height:12px}
.fls-grid .fls-card:first-child .fls-ic svg{fill:currentColor}
.fls-contact .fls-card-h{align-items:flex-start}
.fls-contact .fls-ic{margin-top:2px}
@media(max-width:767px){
.fls{padding:20px 14px 48px}
.fls-h1{font-size:34px}
.fls-new{background:#e9f1fe;top:4px}
.fls-dot{width:44px;height:44px;font-size:16px}
.fls-line{top:22px}
.fls-step-lb{font-size:12.5px}
.fls-row-lb{width:104px}
.fls-plane-m{display:none}
.fls-state:has(.fls-ticket){background-image:linear-gradient(180deg,rgba(255,255,255,0) 30%,#fff 84%),linear-gradient(90deg,#fff 20%,rgba(255,255,255,.25) 52%,rgba(255,255,255,0) 78%),url("/fl-plane-side.png");background-size:100% 100%,100% 100%,288px auto;background-position:0 0,0 0,right -8px top -4px;background-repeat:no-repeat}
.fls-state:has(.fls-ticket) .fls-state-h{max-width:61%}
.fls-state:has(.fls-ticket) .fls-txt{max-width:64%;font-size:14px}
.fls-state:has(.fls-ticket) .fls-live{position:relative}
}

/* ── v4.45: bus/train/ship status pages join the .fls design ── */
.tk-art{display:block;width:215px;max-width:68%;margin:0 auto 14px}
.fls-actions{display:flex;gap:10px;justify-content:center;margin-top:22px}
.fls-actions button{background:rgba(255,255,255,.75);border:1px solid #d8e6fa;color:#33507e;font-size:13.5px;font-weight:700;border-radius:999px;padding:9px 18px;cursor:pointer}
@media(max-width:767px){.tk-art{width:180px}}

/* ── v4.46: the ticket art tears into two parts along its perforation
   and joins back, on a gentle loop (owner request). Two stacked copies
   of the same image, each clipped to one side of the tear line. ── */
.tk-tear{display:grid;position:relative}
.tk-tear::after{content:"";position:absolute;top:var(--sh,78%);left:50%;transform:translateX(-50%);width:70%;height:17px;background:radial-gradient(ellipse at center,rgba(23,43,84,.32),rgba(23,43,84,0) 68%);filter:blur(6px);z-index:0;pointer-events:none}
.tk-tear img{grid-area:1/1;width:100%;height:auto;display:block;position:relative;z-index:1}
.tk-tear .pc-a{clip-path:polygon(0 0,var(--ct,40%) 0,var(--cb,40%) 100%,0 100%);transform-origin:var(--cut,40%) 50%;animation:tkTearA 3.6s ease-in-out infinite}
.tk-tear .pc-b{clip-path:polygon(var(--ct,40%) 0,100% 0,100% 100%,var(--cb,40%) 100%);transform-origin:var(--cut,40%) 50%;animation:tkTearB 3.6s ease-in-out infinite}
@keyframes tkTearB{0%,16%{transform:translate(0,0) rotate(0deg)}36%,64%{transform:translate(13px,6px) rotate(3.4deg)}84%,100%{transform:translate(0,0) rotate(0deg)}}
@keyframes tkTearA{0%,16%{transform:translate(0,0) rotate(0deg)}36%,64%{transform:translate(-4px,-2px) rotate(-1deg)}84%,100%{transform:translate(0,0) rotate(0deg)}}
@media(prefers-reduced-motion:reduce){.tk-tear .pc-a,.tk-tear .pc-b{animation:none}}

/* ── v4.48: the air ticket renders at the same size as the others ── */
.fls-ticket.tk-tear{width:215px}

/* ── v4.49: the stays Payment Options list inside the ticket pay sheet ── */
.tkr-sh{max-height:92dvh;overflow-y:auto}
.tkr-pay3{gap:6px;margin:14px 0 2px;text-align:left}
.tkr-pay3 .pay3-opt{width:100%;height:56px;font:inherit}
.tkr-pay3 .pay3-ic{width:46px;height:40px;margin-right:13px}
.tkr-psh .pm-bd{margin:12px 0 4px;text-align:left}
.tkr-pay3 .pay3-t{align-items:flex-start;text-align:left}

/* ── v4.50: full payment page — options list, then the method's own
   details page, exactly like the stays booking flow ── */
.tkpay{position:fixed;inset:0;z-index:130;background:#f4f7fc;overflow-y:auto;animation:tkpayIn .25s ease both}
@keyframes tkpayIn{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:none}}
.tkpay-bar{position:sticky;top:0;z-index:2;display:flex;align-items:center;justify-content:space-between;padding:12px 16px;background:rgba(255,255,255,.92);backdrop-filter:blur(8px);border-bottom:1px solid #e3ebf7}
.tkpay-title{font-size:16.5px;font-weight:800;color:#0d213f}
.tkpay-back,.tkpay-x{width:38px;height:38px;border-radius:50%;border:1px solid #dbe6f5;background:#fff;color:#12325e;font-size:17px;cursor:pointer;display:flex;align-items:center;justify-content:center}
.tkpay-sp{width:38px}
.tkpay-in{max-width:640px;margin:0 auto;padding:22px 16px 44px;text-align:center}
.tkpay-in .pm-card{--u:calc(min(100vw,560px)/1024);width:100%;margin:16px 0 0;text-align:left}
.tkpay-h{display:block;font-size:23px;font-weight:800;color:#0d213f;margin-top:12px}
.tkpay-p{font-size:14px;color:#5b6b8c;margin-top:6px}
.tkpay-later{margin-top:18px;background:none;border:0;color:#5b6b8c;font-size:14.5px;font-weight:700;cursor:pointer}

/* ── v4.51: "How our system works" section fills the space under the form ── */
.tk-sys{padding:20px 22px 22px}
.tk-sys .tk-sys-h{padding:0;font-size:17px;font-weight:800;color:#10163f}
.tk-sys-sub{font-size:13px;color:#5d6a8a;margin-top:5px;max-width:660px;line-height:1.55}
.tk-sys-grid{display:grid;grid-template-columns:1fr;gap:12px;margin-top:16px}
@media (min-width:640px){.tk-sys-grid{grid-template-columns:1fr 1fr}}
@media (min-width:1024px){.tk-sys-grid{grid-template-columns:repeat(4,1fr)}}
.tk-sys-card{border:1px solid #e7eef9;border-radius:14px;padding:15px;background:#fbfdff}
.tk-sys-n{width:26px;height:26px;font-size:13px}
.tk-sys-card b{display:block;font-size:14px;color:#10163f;margin-top:10px}
.tk-sys-card p{font-size:12.5px;line-height:1.6;color:#5d6a8a;margin-top:4px}
.tk-sys-chips{display:flex;flex-wrap:wrap;gap:8px;margin-top:16px}
.tk-sys-chip{display:inline-flex;align-items:center;gap:7px;background:#eef7f1;color:#166534;font-size:12.5px;font-weight:600;border-radius:999px;padding:7px 12px}
.tk-sys-check{width:16px;height:16px;border-radius:50%;background:#22c55e;color:#fff;font-size:10px;font-weight:800;display:flex;align-items:center;justify-content:center;flex:none}

/* ── v4.52: compact status pages on MOBILE only (owner's order) — same design,
   tighter rhythm: smaller steps, slimmer cards/rows, more info per screen.
   Desktop (≥768px) is untouched. ── */
@media(max-width:767px){
.fls{padding:14px 10px 36px}
.fls-back{font-size:13.5px}
.fls-hero{margin-top:10px;min-height:0}
.fls-h1{font-size:26px}
.fls-ref{font-size:13.5px;margin-top:5px}
.fls-new{padding:7px 13px;font-size:13px}
.fls-steps{margin:18px 0 2px}
.fls-step{gap:6px;padding:0 2px}
.fls-dot{width:32px;height:32px;font-size:13px;border-width:2px}
.fls-line{top:16px;height:2.5px}
.fls-step-lb{font-size:11px;line-height:1.25}
.fls-grid{gap:12px;margin-top:14px}
.fls-card{padding:16px;border-radius:18px}
.fls-card-h h2{font-size:17.5px}
.fls-ic{width:36px;height:36px;border-radius:10px}
.fls-ic svg{width:18px;height:18px}
.fls-sub{font-size:12.5px}
.fls-rows{margin-top:6px}
.fls-row{padding:8px 0;gap:10px}
.fls-row-lb{width:86px;font-size:13px}
.fls-row-vl{font-size:13.5px}
.fls-state-h{font-size:19px}
.fls-txt{font-size:13.5px;line-height:1.5;margin-top:7px}
.fls-state:has(.fls-ticket){background-size:100% 100%,100% 100%,196px auto}
.fls-state:has(.fls-ticket) .fls-state-h{max-width:66%}
.fls-state:has(.fls-ticket) .fls-txt{max-width:70%;font-size:13.5px}
.fls-live{margin-top:12px;padding:10px 12px;border-radius:12px}
.fls-live p{font-size:13px}
.fls-price{font-size:26px}
.fls-paybtn{height:44px;margin-top:12px}
.fls-contact{margin-top:14px}
.fls-cform{gap:10px;margin-top:13px}
.fls-save{height:46px}
.fls-actions{margin-top:14px}
.fls-actions button{padding:8px 15px;font-size:12.5px}
.fls-dots i{width:6px;height:6px}
}

/* ── v4.53: ticket graphics are transparent now — give them back a soft
   ground shadow so they float cleanly on the card. ── */
.fls-ticket{filter:drop-shadow(0 16px 20px rgba(15,45,110,.16))}

/* ── v4.54 (owner's order 2026-11-07): DESKTOP compact pass on the shared
   .fls status design (flight/bus/train/ship) — on PC the page needed
   scrolling: steps area, buttons and cards ate too much height. Same design,
   tighter rhythm on desktop only, so the whole status view fits one screen.
   Mobile (<768px, v4.52) is untouched. ── */
@media(min-width:768px){
.fls{padding:12px 16px 14px}
.fls-back{font-size:13px}
.fls-hero{margin-top:6px;min-height:0}
.fls-h1{font-size:28px}
.fls-ref{font-size:13.5px;margin-top:4px}
.fls-new{padding:6px 12px;font-size:12.5px;top:2px}
.fls-steps{margin:10px 0 0}
.fls-step{gap:4px}
.fls-dot{width:28px;height:28px;font-size:12.5px;border-width:2px}
.fls-step-lb{font-size:11.5px}
.fls-line{top:14px}
.fls-grid{margin-top:10px;gap:14px;grid-template-columns:1fr 1fr;align-items:stretch}
.fls-card{padding:12px}
.fls-card-h h2{font-size:16.5px}
.fls-rows{margin-top:6px}
.fls-row{padding:4px 0;gap:10px}
.fls-row-lb{font-size:13px}
.fls-row-vl{font-size:13px}
.fls-ticket{width:120px;margin-bottom:6px}
.fls-ticket img{width:120px;height:auto}
.fls-state{display:flex;flex-direction:column}
.fls-state .tk-art{width:96px;margin-bottom:6px}
.fls-state .tk-art img{width:96px;height:auto}
.fls-state .fls-txt{margin-bottom:8px}
.fls-state .fls-live{margin-top:auto}
.fls-state-h{font-size:18px}
.fls-state p{font-size:13px;line-height:1.45}
.fls-live{margin-top:8px;padding:7px 10px;font-size:12.5px;line-height:1.35}
.fls-contact{margin-top:10px}
.fls-cform{margin-top:10px;gap:10px}
.fls-cform input{font-size:13px}
.fls-cform .fls-field2{height:40px}
.fls-save{height:38px;font-size:13px;padding:0 16px}
}

/* ── v4.56 (owner's order 2026-11-07): bus/train/ship state graphic (.tk-art, was 215px) shrunk to 96px on desktop so the state card matches the details card's height — the LEFT card's size — on all four services; the state card is a flex column with the Live box anchored to the bottom when stretched. ── */
/* ── v4.55 (owner's order 2026-11-07): (1) the two status cards are exactly
   one size on desktop — equal columns + stretch, set in the v4.54 block
   above. (2) Blend: under the status section the page showed a WHITE band
   before the footer, so the page and footer looked like two separate blocks
   with a line between them. Painting the page area behind the section in the
   section's own end colour makes it one continuous surface into the footer. ── */
main:has(.fls){background:#edf3fb}
main div:has(.fls){background:#edf3fb}

/* ── v4.57 (owner's order 2026-11-07): NO blue focus line on ticket-page
   fields — tapping or typing in a fill box must not paint a blue border or
   ring (his standing rule). Fields keep their normal resting border. ── */
.tk-wrap .sf-field:focus-within,.tk-page .sf-field:focus-within{border-color:#e6ebf3;box-shadow:none}
.tk-stack:focus-within{border-color:var(--tk-line);box-shadow:none}
.fls-field2:focus-within{border-color:#dbe6f5;box-shadow:none}
.tkr-pin:focus{border-color:#dbe6f5;box-shadow:none}

/* ── v4.58 (owner's order 2026-11-07): the desktop one-row form arrangement
   now starts at 900px instead of 1024px — laptops with Windows display
   scaling (150% on a 1366px screen ≈ 911px window) were falling back to the
   stacked phone-style form on PC. The five form blocks above carry the new
   breakpoint; phone widths are unchanged. ── */

/* ── v4.59 (owner's order 2026-11-07): his laptop window is narrower than
   900 CSS px (display scaling), so the desktop one-row form now starts at
   the same 768px boundary the status pages already use for desktop.
   Phone widths (<768px) keep the stacked design, unchanged. ── */
@media(min-width:768px) and (max-width:1023px){
  .tk-page .tk-stack>.tk-big{padding:10px 12px}
  .tk-page .tk-mainrow .sf-field{padding-left:10px;padding-right:10px}
}

/* ── v4.60 (owner's order 2026-11-07): the header service row docks on tickets
   pages too, the same way as the home page (assets/header-tiles-tickets.js) —
   it appears once the service tabs (form pages) or the progress steps (status
   pages) have scrolled behind the header. The shell CSS draws the row from
   1024px up; this band gives 768–1023px laptops the same row. ── */
.bhx-tr__svg{display:flex;align-items:center;justify-content:center;width:22px;height:22px}
.bhx-tr__svg svg{width:21px;height:21px}
@media(min-width:768px) and (max-width:1023px){
  .bhx-tilerow.tk-tilerow{display:flex;flex:0 0 0;width:0;overflow:hidden;min-width:0;align-items:center;justify-content:center;gap:0;margin:0;
    opacity:0;visibility:hidden;transform:translateY(-6px);pointer-events:none;
    transition:opacity .28s ease,transform .28s ease,visibility 0s linear .28s}
  .bhx-hdr.bhx-tiles-on .bhx-tilerow.tk-tilerow{flex:1 1 0;width:auto;margin:0 6px;opacity:1;visibility:visible;transform:none;pointer-events:auto;
    transition:opacity .28s ease .06s,transform .28s ease .06s,visibility 0s}
  .bhx-hdr.bhx-tiles-on .bhx-nav{opacity:0;visibility:hidden;position:absolute;pointer-events:none}
  .tk-tilerow .bhx-tr{display:flex;flex-direction:column;align-items:center;justify-content:flex-start;gap:0;flex:0 1 auto;min-width:0;
    height:52px;padding:8px 9px 0;border:0;border-radius:12px;background:transparent;color:#25304f;cursor:pointer;font:inherit}
  .tk-tilerow .bhx-tr:hover{background:#eef3fb}
  .tk-tilerow .bhx-tr[aria-pressed="true"]{background:#eef3fb;color:#10163f}
  .tk-tilerow .bhx-tr__tx{font-size:10.5px;line-height:12px;font-weight:500;white-space:nowrap;letter-spacing:-.005em}
}

/* ── v4.61 (owner's order 2026-11-07): the docked header row takes the SAME
   place and the SAME design as the service tabs pill in the form — centred on
   the page, directly above where the pill sits, as a white pill with the
   services in a row and the current one marked in blue with its underline. ── */
.bhx-hdr .bhx-bar{position:relative}
.bhx-hdr .bhx-tilerow.tk-tilerow{position:absolute;left:50%;top:50%;width:auto;flex:none;z-index:5;
  transform:translate(-50%,-46%);background:rgba(255,255,255,.92);-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);
  border:1px solid #e2ebf7;border-radius:999px;padding:5px;box-shadow:0 14px 30px -14px rgba(23,54,120,.28)}
.bhx-hdr.bhx-tiles-on .bhx-tilerow.tk-tilerow{transform:translate(-50%,-50%);margin:0}
.tk-tilerow .bhx-tr{flex-direction:row;align-items:center;justify-content:center;height:38px;padding:6px 11px;gap:7px;border-radius:999px}
.tk-tilerow .bhx-tr__svg{width:19px;height:19px}
.tk-tilerow .bhx-tr__svg svg{width:18px;height:18px}
.tk-tilerow .bhx-tr__tx{font-size:13px;line-height:1;font-weight:600}
.tk-tilerow .bhx-tr[aria-pressed="true"]{background:transparent;color:#2563eb;position:relative}
.tk-tilerow .bhx-tr[aria-pressed="true"]::after{content:'';position:absolute;left:13px;right:13px;bottom:3px;height:2.5px;border-radius:2px;background:#2563eb}
.tk-tilerow .bhx-tr:hover{background:#eef3fb}
.tk-tilerow .bhx-tr[aria-pressed="true"]:hover{background:transparent}

@media(min-width:768px) and (max-width:1023px){
  /* narrow laptops: icons only, like the home header row at 1024-1279px,
     so the centred pill never covers the header tools */
  .tk-tilerow .bhx-tr{padding:6px 12px;height:40px}
  .tk-tilerow .bhx-tr__tx{display:none}
  .tk-tilerow .bhx-tr[aria-pressed="true"]::after{left:10px;right:10px}
}
@media(min-width:768px) and (max-width:1023px){
  .bhx-hdr .bhx-tilerow.tk-tilerow{background:rgba(255,255,255,.98)}
}

/* ── v4.62 (owner's order 2026-11-07): the pill's buttons take the home service
   tiles' own style (tile-active.css) — near-black icons (#10163f), and the
   current service sits in the same soft grey pill with the pressed-in inset
   shadow; a tap squeezes it the same way. No blue. ── */
.tk-tilerow .bhx-tr{color:#10163f;transition:background-color .22s ease,box-shadow .22s ease,transform .16s cubic-bezier(.3,.8,.3,1)}
.tk-tilerow .bhx-tr__tx{color:#25304f}
.tk-tilerow .bhx-tr:hover{background:transparent}
.tk-tilerow .bhx-tr[aria-pressed="true"]{background:linear-gradient(180deg,#d6dbe6 0%,#e3e7ef 100%);color:#0b1233;
  box-shadow:inset 0 3px 7px rgba(16,22,63,.24),inset 0 1px 2px rgba(16,22,63,.14),inset 0 -1px 0 rgba(255,255,255,.95),0 1px 0 rgba(255,255,255,.95)}
.tk-tilerow .bhx-tr[aria-pressed="true"]:hover{background:linear-gradient(180deg,#d6dbe6 0%,#e3e7ef 100%)}
.tk-tilerow .bhx-tr[aria-pressed="true"]::after{display:none}
.tk-tilerow .bhx-tr[aria-pressed="true"] .bhx-tr__tx{color:#0b1233;font-weight:700}
.tk-tilerow .bhx-tr[aria-pressed="true"] .bhx-tr__svg{color:#050a24;filter:drop-shadow(0 1px 0 rgba(255,255,255,.85))}
.tk-tilerow .bhx-tr:active{background:linear-gradient(180deg,#d0d6e2 0%,#dfe4ed 100%);
  box-shadow:inset 0 3px 8px rgba(16,22,63,.29),inset 0 1px 2px rgba(16,22,63,.18),inset 0 -1px 0 rgba(255,255,255,.95);transform:scale(.93)}
@media (prefers-reduced-motion:reduce){.tk-tilerow .bhx-tr{transition:none}.tk-tilerow .bhx-tr:active{transform:none}}

/* ── v4.63 (owner's order 2026-11-07): no card around the docked icons — the
   white pill container is gone on tickets and home alike; the icons sit in the
   header directly, centred, with the selected one's own shadow pill. ── */
.bhx-hdr .bhx-tilerow.tk-tilerow{background:transparent;border-color:transparent;box-shadow:none;-webkit-backdrop-filter:none;backdrop-filter:none}

/* ── v4.64 (owner's order 2026-11-07): the form's own service tabs take the same
   home-tile style as the header rows — black icons, the current service in the
   soft grey pill with the pressed-in shadow, no blue. The round pill card
   around the tabs stays, as it is. ── */
.tk-page .tk-tab{color:#25304f;border-radius:16px;
  transition:background-color .22s ease,box-shadow .22s ease,transform .16s cubic-bezier(.3,.8,.3,1),color .2s ease}
.tk-page .tk-tab .tk-tab-ic{color:#10163f}
.tk-page .tk-tab.on{background:linear-gradient(180deg,#d6dbe6 0%,#e3e7ef 100%);color:#0b1233;font-weight:700;
  box-shadow:inset 0 3px 7px rgba(16,22,63,.24),inset 0 1px 2px rgba(16,22,63,.14),inset 0 -1px 0 rgba(255,255,255,.95),0 1px 0 rgba(255,255,255,.95)}
.tk-page .tk-tab.on::after{display:none}
.tk-page .tk-tab.on .tk-tab-ic{color:#050a24;filter:drop-shadow(0 1px 0 rgba(255,255,255,.85))}
.tk-page .tk-tab:active{background:linear-gradient(180deg,#d0d6e2 0%,#dfe4ed 100%);
  box-shadow:inset 0 3px 8px rgba(16,22,63,.29),inset 0 1px 2px rgba(16,22,63,.18),inset 0 -1px 0 rgba(255,255,255,.95);transform:scale(.93)}
@media (prefers-reduced-motion:reduce){.tk-page .tk-tab{transition:none}.tk-page .tk-tab:active{transform:none}}

/* ── v4.65 (owner's order 2026-11-07): the two header rows can never mix. The
   tickets row answers ONLY to its own header state (bhx-tk-on, set by
   header-tiles-tickets.js) — the home row's bhx-tiles-on can no longer show
   it — and off the home page the home row is hard-hidden, on the home page
   the tickets row is hard-hidden (responsive-desktop.css carries the twin
   rule). One page's row never appears on another page. ── */
.bhx-hdr.bhx-tiles-on .bhx-tilerow.tk-tilerow{flex:0 0 0;width:0;opacity:0;visibility:hidden;pointer-events:none;overflow:hidden}
.bhx-hdr.bhx-tk-on .bhx-tilerow.tk-tilerow{flex:none;width:auto;opacity:1;visibility:visible;pointer-events:auto;overflow:visible;transform:translate(-50%,-50%);margin:0;
  transition:opacity .28s ease .06s,transform .28s ease .06s,visibility 0s}
.bhx-hdr.bhx-tk-on .bhx-nav{opacity:0;visibility:hidden;position:absolute;pointer-events:none}
body:not(.is-home) .bhx-tilerow:not(.tk-tilerow){display:none!important}

/* ── v4.66 (owner's order 2026-11-07, from his mobile mockup): the request
   status pages go fully compact on phones — Modern Minimalist / glass /
   white premium cards, more information in less screen. The steps row goes
   (the state banner carries the status), the details become two compact
   columns with every detail kept, the state card becomes a slim tinted
   banner with no big graphic, and the contact card loses its paragraph.
   Desktop (≥768px) is untouched. ── */
@media(max-width:767px){
  /* back = the PC form's round white circle button, not the old text link */
  .fls-back{width:40px;height:40px;border-radius:50%;background:#fff;border:1.5px solid #cdd7e8;box-shadow:0 2px 8px rgba(15,23,42,.12);color:#10163f;justify-content:center;padding:0;font-size:0;gap:0}
  .fls-back svg{width:22px;height:22px;stroke-width:2.4}
  .fls-back:active{transform:scale(.94)}
  .fls-steps{display:none}
  .fls-grid{margin-top:10px;gap:10px}
  .fls-card{padding:14px;border-radius:20px}
  .fls-rows{display:grid;grid-template-columns:1fr 1fr;gap:0 16px;margin-top:4px}
  .fls-row{flex-wrap:wrap;gap:2px 7px;padding:7px 0;align-items:center}
  .fls-rows .fls-row:nth-child(2){border-top:0}
  .fls-row-lb{width:auto;font-size:12px}
  .fls-row-ic svg{width:16px;height:16px}
  .fls-row-vl{flex:1 1 100%;font-size:13.5px}
  .fls-ticket,.fls-plane-m,.fls-state .tk-art{display:none}
  .fls-state:has(.fls-ticket){background:#e9f0fe}
  .fls-state:has(.fls-ticket) .fls-state-h{max-width:100%}
  .fls-state:has(.fls-ticket) .fls-txt{max-width:100%}
  .fls-state-h{font-size:17px}
  .fls-txt{font-size:13px;margin-top:5px}
  .fls-live{margin-top:10px;padding:8px 12px;font-size:12.5px;line-height:1.4;border-radius:10px}
  .fls-contact .fls-sub{display:none}
  .fls-cform{gap:8px;margin-top:10px}
  .fls-field2{height:50px}
  .fls-save{height:50px;font-size:15px}
}

/* ── v4.67 (owner's order 2026-11-07, same mobile mockup): one-screen fit —
   the details rows go inline (icon · label · value on one line, like the
   mockup), spacing tightens a step further, and the type hierarchy follows
   the mockup: quiet grey labels, confident dark values, route pair a touch
   larger. Mobile only; desktop unchanged. ── */
@media(max-width:767px){
  .fls-hero{margin-top:6px}
  .fls-grid{margin-top:8px;gap:8px}
  .fls-card{padding:12px 14px}
  .fls-card-h{margin-bottom:4px}
  .fls-rows{margin-top:2px;gap:0 14px}
  .fls-row{flex-wrap:nowrap;gap:0 6px;padding:6px 0;align-items:baseline}
  .fls-row-lb{flex:none;font-size:12.5px}
  .fls-row-vl{flex:1 1 auto;min-width:0;font-size:14px;line-height:1.3}
  .fls-rows .fls-row:nth-child(3) .fls-row-vl,.fls-rows .fls-row:nth-child(4) .fls-row-vl{font-size:15px}
  .fls-state-h{font-size:18px}
  .fls-txt{font-size:13.5px;line-height:1.45;margin-top:3px}
  .fls-live{margin-top:8px;padding:7px 10px}
  .fls-cform{gap:7px;margin-top:8px}
  .fls-field2{height:48px}
  .fls-save{height:48px}
}

/* ── v4.68 (owner's order 2026-11-07, the same mockup, line by line): the
   hero gains the mockup's big title and a live status pill where the New
   request button sat; the flight details card is re-laid to the mockup's
   exact rows — one route line, Depart | Travellers, Oneway | Cabin (the
   reference lives in the hero, so its card row goes, and so does Airline);
   card headers carry the mockup's chevron; the checking banner gets its
   small vehicle glyph; contact fields return to the mockup's taller size.
   Mobile only; desktop unchanged. ── */
@media(max-width:767px){
  .fls-h1{font-size:33px;letter-spacing:-.02em}
  .fls-row-vl{text-align:left}
  .fls-card-h h2{font-size:18px}
  .fls-new{display:none}
  .fls:has(.fl-dots) .fls-new{display:inline-flex;align-items:center;gap:7px;background:#fff;border:1px solid #dbe6f5;box-shadow:0 2px 8px rgba(15,23,42,.08);color:#2563eb;font-size:0;padding:8px 13px;border-radius:999px}
  .fls:has(.fl-dots) .fls-new svg{display:none}
  .fls:has(.fl-dots) .fls-new::before{content:"";width:13px;height:13px;flex:none;border-radius:50%;border:2.5px dotted #2563eb;animation:fls-spin 1.6s linear infinite}
  .fls:has(.fl-dots) .fls-new::after{content:"Checking...";font-size:13.5px;font-weight:600}
  @keyframes fls-spin{to{transform:rotate(360deg)}}
  .fls-card-h{position:relative}
  .fls-grid .fls-card .fls-card-h::after,.fls-contact .fls-card-h::after{content:"";position:absolute;right:0;top:50%;width:18px;height:18px;transform:translateY(-50%);background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2394a3b8' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E") center/contain no-repeat}
  .fls-contact .fls-card-h::after{transform:translateY(-50%) rotate(180deg)}
  /* flight details — the mockup's rows (flight pages carry .fls-ticket) */
  .fls-flight .fls-row:nth-child(1),.fls-flight .fls-row:nth-child(6){display:none}
  .fls-flight .fls-row:nth-child(3){grid-column:1/-1;grid-row:1;border-top:0}
  .fls-flight .fls-row:nth-child(4){grid-column:1/-1;grid-row:1;justify-self:end;border-top:0}
  .fls-flight .fls-row:nth-child(5){grid-column:1;grid-row:2}
  .fls-flight .fls-row:nth-child(7){grid-column:2;grid-row:2;border-left:1px solid #edf1f7;padding-left:12px}
  .fls-flight .fls-row:nth-child(2){grid-column:1;grid-row:3;border-top:1px solid #eef3fa}
  .fls-flight .fls-row:nth-child(8){grid-column:2;grid-row:3;border-left:1px solid #edf1f7;padding-left:12px}
  .fls-flight .fls-row:nth-child(2) .fls-row-lb,
  .fls-flight .fls-row:nth-child(3) .fls-row-lb,
  .fls-flight .fls-row:nth-child(4) .fls-row-lb,
  .fls-flight .fls-row:nth-child(7) .fls-row-lb,
  .fls-flight .fls-row:nth-child(8) .fls-row-lb{display:none}
  .fls-flight .fls-row:nth-child(4) .fls-row-ic{display:none}
  .fls-flight .fls-row:nth-child(3) .fls-row-vl,
  .fls-flight .fls-row:nth-child(4) .fls-row-vl{font-size:16.5px;font-weight:700}
  .fls-flight .fls-row:nth-child(4) .fls-row-vl::before{content:"\2192";margin-right:9px;color:#94a3b8;font-weight:400}
  .fls-flight .fls-row:nth-child(3) .fls-row-ic svg{display:none}
  .fls-flight .fls-row:nth-child(3) .fls-row-ic{width:20px;height:20px;flex:none;background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%2364748b'%3E%3Cpath d='M6.99 11 3 15l3.99 4v-4H14v-2H6.99v-2zM21 7l-3.99-4v4.01H10v2h7.01v3L21 7z'/%3E%3C/svg%3E") center/contain no-repeat}
  /* checking banner — small vehicle glyph beside the heading */
  .fls-state:has(.fl-dots){display:flex;flex-wrap:wrap;align-items:flex-start}
  .fls-state:has(.fl-dots) .fls-state-h{flex:1 1 calc(100% - 46px)}
  .fls-state:has(.fl-dots) .fls-txt{flex:1 1 calc(100% - 46px);margin-left:auto}
  .fls-state:has(.fl-dots) .fls-live{flex:1 1 100%}
  .fls-flight .fls-state:has(.fl-dots)::before{content:"";width:30px;height:30px;flex:none;margin-right:10px;background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%232563eb'%3E%3Cpath d='M21 16v-2l-8-5V3.5a1.5 1.5 0 0 0-3 0V9l-8 5v2l8-2.5V19l-2 1.5V22l3.5-1 3.5 1v-1.5L13 19v-5.5l8 2.5z'/%3E%3C/svg%3E") center/contain no-repeat}
  .fls-field2{height:52px}
  .fls-save{height:52px}
}
@media(max-width:767px) and (prefers-reduced-motion: reduce){
  .fls:has(.fl-dots) .fls-new::before{animation:none}
}

/* ── v4.69 (owner's order 2026-11-07): bus, train and ship get the flight
   page's exact treatment, so all four status pages share one design — the
   reference row goes (it lives in the hero), the route fuses into one
   line, Journey | Persons and the remaining rows pair up with the same
   divider, labels quiet down to the date only, and each checking banner
   carries its own vehicle glyph (the site's own icons). Scoped by the
   per-service class now on the status root. Mobile only. ── */
@media(max-width:767px){
  /* — bus + train (rows: Ref, Trip, From, To, Journey, Persons, extras…) — */
  .fls-bus .fls-row:nth-child(1),.fls-train .fls-row:nth-child(1){display:none}
  .fls-bus .fls-row:nth-child(3),.fls-train .fls-row:nth-child(3){grid-column:1/-1;grid-row:1;border-top:0}
  .fls-bus .fls-row:nth-child(4),.fls-train .fls-row:nth-child(4){grid-column:1/-1;grid-row:1;justify-self:end;border-top:0}
  .fls-bus .fls-row:nth-child(5),.fls-train .fls-row:nth-child(5){grid-column:1;grid-row:2}
  .fls-bus .fls-row:nth-child(6),.fls-train .fls-row:nth-child(6){grid-column:2;grid-row:2;border-left:1px solid #edf1f7;padding-left:12px}
  .fls-bus .fls-row:nth-child(2),.fls-train .fls-row:nth-child(2){grid-column:1;grid-row:3;border-top:1px solid #eef3fa}
  .fls-bus .fls-row:nth-child(7),.fls-train .fls-row:nth-child(7){grid-column:2;grid-row:3;border-left:1px solid #edf1f7;padding-left:12px}
  .fls-bus .fls-row:nth-child(8),.fls-train .fls-row:nth-child(8){grid-column:1;grid-row:4}
  .fls-bus .fls-row:nth-child(9),.fls-train .fls-row:nth-child(9){grid-column:2;grid-row:4;border-left:1px solid #edf1f7;padding-left:12px}
  .fls-bus .fls-row:nth-child(2) .fls-row-lb,.fls-train .fls-row:nth-child(2) .fls-row-lb,
  .fls-bus .fls-row:nth-child(3) .fls-row-lb,.fls-train .fls-row:nth-child(3) .fls-row-lb,
  .fls-bus .fls-row:nth-child(4) .fls-row-lb,.fls-train .fls-row:nth-child(4) .fls-row-lb,
  .fls-bus .fls-row:nth-child(6) .fls-row-lb,.fls-train .fls-row:nth-child(6) .fls-row-lb{display:none}
  .fls-bus .fls-row:nth-child(4) .fls-row-ic,.fls-train .fls-row:nth-child(4) .fls-row-ic{display:none}
  .fls-bus .fls-row:nth-child(3) .fls-row-vl,.fls-train .fls-row:nth-child(3) .fls-row-vl,
  .fls-bus .fls-row:nth-child(4) .fls-row-vl,.fls-train .fls-row:nth-child(4) .fls-row-vl{font-size:16.5px;font-weight:700}
  .fls-bus .fls-row:nth-child(4) .fls-row-vl::before,.fls-train .fls-row:nth-child(4) .fls-row-vl::before{content:"\2192";margin-right:9px;color:#94a3b8;font-weight:400}
  .fls-bus .fls-row:nth-child(3) .fls-row-ic svg,.fls-train .fls-row:nth-child(3) .fls-row-ic svg{display:none}
  .fls-bus .fls-row:nth-child(3) .fls-row-ic,.fls-train .fls-row:nth-child(3) .fls-row-ic{width:20px;height:20px;flex:none;background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%2364748b'%3E%3Cpath d='M6.99 11 3 15l3.99 4v-4H14v-2H6.99v-2zM21 7l-3.99-4v4.01H10v2h7.01v3L21 7z'/%3E%3C/svg%3E") center/contain no-repeat}
  /* — ship (rows: Ref, From, To, Journey, then Return/Time/Persons…) — */
  .fls-launch .fls-row:nth-child(1){display:none}
  .fls-launch .fls-row:nth-child(2){grid-column:1/-1;grid-row:1;border-top:0}
  .fls-launch .fls-row:nth-child(3){grid-column:1/-1;grid-row:1;justify-self:end;border-top:0}
  .fls-launch .fls-row:nth-child(4){grid-column:1;grid-row:2}
  .fls-launch .fls-row:nth-child(5){grid-column:2;grid-row:2;border-left:1px solid #edf1f7;padding-left:12px}
  .fls-launch .fls-row:nth-child(6){grid-column:1;grid-row:3}
  .fls-launch .fls-row:nth-child(7){grid-column:2;grid-row:3;border-left:1px solid #edf1f7;padding-left:12px}
  .fls-launch .fls-row:nth-child(8){grid-column:1;grid-row:4}
  .fls-launch .fls-row:nth-child(2) .fls-row-lb,
  .fls-launch .fls-row:nth-child(3) .fls-row-lb{display:none}
  .fls-launch .fls-row:nth-child(3) .fls-row-ic{display:none}
  .fls-launch .fls-row:nth-child(2) .fls-row-vl,
  .fls-launch .fls-row:nth-child(3) .fls-row-vl{font-size:16.5px;font-weight:700}
  .fls-launch .fls-row:nth-child(3) .fls-row-vl::before{content:"\2192";margin-right:9px;color:#94a3b8;font-weight:400}
  .fls-launch .fls-row:nth-child(2) .fls-row-ic svg{display:none}
  .fls-launch .fls-row:nth-child(2) .fls-row-ic{width:20px;height:20px;flex:none;background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%2364748b'%3E%3Cpath d='M6.99 11 3 15l3.99 4v-4H14v-2H6.99v-2zM21 7l-3.99-4v4.01H10v2h7.01v3L21 7z'/%3E%3C/svg%3E") center/contain no-repeat}
  /* — checking banners: each service's own glyph — */
  .fls-bus .fls-state:has(.fl-dots)::before{content:"";width:30px;height:30px;flex:none;margin-right:10px;background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%232563eb' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M8 6v6'/%3E%3Cpath d='M16 6v6'/%3E%3Cpath d='M2 12h19.6'/%3E%3Cpath d='M18 18h3s.5-1.7.8-2.8c.1-.4.2-.8.2-1.2 0-.4-.1-.8-.2-1.2l-1.4-5C20.1 6.8 19.1 6 18 6H4a2 2 0 0 0-2 2v10h3'/%3E%3Ccircle cx='7' cy='18' r='2'/%3E%3Cpath d='M9 18h5'/%3E%3Ccircle cx='16' cy='18' r='2'/%3E%3C/svg%3E") center/contain no-repeat}
  .fls-train .fls-state:has(.fl-dots)::before{content:"";width:30px;height:30px;flex:none;margin-right:10px;background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%232563eb' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='4' y='3' width='16' height='16' rx='2'/%3E%3Cpath d='M4 11h16'/%3E%3Cpath d='M12 3v8'/%3E%3Cpath d='m8 19-2 3'/%3E%3Cpath d='m18 22-2-3'/%3E%3Cpath d='M8 15h.01'/%3E%3Cpath d='M16 15h.01'/%3E%3C/svg%3E") center/contain no-repeat}
  .fls-launch .fls-state:has(.fl-dots)::before{content:"";width:30px;height:30px;flex:none;margin-right:10px;background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%232563eb' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M2 21c.6.5 1.2 1 2.5 1 2.5 0 2.5-2 5-2 1.3 0 1.9.5 2.5 1 .6.5 1.2 1 2.5 1 2.5 0 2.5-2 5-2 1.3 0 1.9.5 2.5 1'/%3E%3Cpath d='M19.4 18.1l1.6-6.2a1 1 0 0 0-.6-1.2L12 8 3.6 10.7a1 1 0 0 0-.6 1.2l1.6 6.2'/%3E%3Cpath d='M12 8V3'/%3E%3Cpath d='M8 6h8'/%3E%3Cpath d='M6 12.5 12 11l6 1.5'/%3E%3C/svg%3E") center/contain no-repeat}
}

/* ── v4.70 (owner, 2026-11-07: "put the demo and yours side by side and
   match every part"): the route returns to the demo's packed two columns
   (From, then the arrow and To right beside it — not spread to the edges);
   every row gains its full-width hairline; the date label takes its colon;
   and the checking banner is rebuilt as the demo draws it — a white card
   holding a light-blue box (small vehicle glyph, one-line heading, the
   short text) with the green Live strip on the white below it. The glyph
   moves from the card to the heading so the box can bleed to the card's
   edges at any height. Mobile only. ── */
@media(max-width:767px){
  /* route: packed columns again */
  .fls-flight .fls-row:nth-child(3){grid-column:1}
  .fls-flight .fls-row:nth-child(4){grid-column:2;justify-self:stretch;border-left:0;padding-left:0}
  .fls-bus .fls-row:nth-child(3),.fls-train .fls-row:nth-child(3){grid-column:1}
  .fls-bus .fls-row:nth-child(4),.fls-train .fls-row:nth-child(4){grid-column:2;justify-self:stretch;border-left:0;padding-left:0}
  .fls-launch .fls-row:nth-child(2){grid-column:1}
  .fls-launch .fls-row:nth-child(3){grid-column:2;justify-self:stretch;border-left:0;padding-left:0}
  .fls-flight .fls-row:nth-child(3) .fls-row-vl,.fls-flight .fls-row:nth-child(4) .fls-row-vl,
  .fls-bus .fls-row:nth-child(3) .fls-row-vl,.fls-bus .fls-row:nth-child(4) .fls-row-vl,
  .fls-train .fls-row:nth-child(3) .fls-row-vl,.fls-train .fls-row:nth-child(4) .fls-row-vl,
  .fls-launch .fls-row:nth-child(2) .fls-row-vl,.fls-launch .fls-row:nth-child(3) .fls-row-vl{font-size:15.5px}
  /* full-width hairlines under every row */
  .fls-flight .fls-row:nth-child(5),.fls-flight .fls-row:nth-child(7),.fls-flight .fls-row:nth-child(8),
  .fls-bus .fls-row:nth-child(5),.fls-bus .fls-row:nth-child(6),.fls-bus .fls-row:nth-child(7),.fls-bus .fls-row:nth-child(8),.fls-bus .fls-row:nth-child(9),
  .fls-train .fls-row:nth-child(5),.fls-train .fls-row:nth-child(6),.fls-train .fls-row:nth-child(7),.fls-train .fls-row:nth-child(8),.fls-train .fls-row:nth-child(9),
  .fls-launch .fls-row:nth-child(4),.fls-launch .fls-row:nth-child(5),.fls-launch .fls-row:nth-child(6),.fls-launch .fls-row:nth-child(7),.fls-launch .fls-row:nth-child(8){border-top:1px solid #eef3fa}
  /* the date label carries its colon, as drawn */
  .fls-flight .fls-row:nth-child(5) .fls-row-lb::after,
  .fls-bus .fls-row:nth-child(5) .fls-row-lb::after,.fls-train .fls-row:nth-child(5) .fls-row-lb::after,
  .fls-launch .fls-row:nth-child(4) .fls-row-lb::after{content:":"}
  /* checking banner: white card, blue inner box, Live strip on the white */
  .fls-state:has(.fl-dots){display:block;background:#fff;padding:12px}
  .fls-state:has(.fl-dots)::before{content:none}
  .fls-state:has(.fl-dots) .fls-state-h{background:#e9f0fe;margin:-11px -11px 0;padding:12px 13px 2px;border-radius:15px 15px 0 0;font-size:18.5px;letter-spacing:-.015em;line-height:1.25}
  .fls-state:has(.fl-dots) .fls-txt{background:#e9f0fe;margin:0 -11px;padding:0 13px 12px 47px;border-radius:0 0 15px 15px}
  .fls-state:has(.fl-dots) .fls-live{margin-top:10px}
  .fls-state:has(.fl-dots) .fls-state-h::before{content:"";display:inline-block;width:24px;height:24px;margin-right:10px;vertical-align:-6px;background:center/contain no-repeat}
  .fls-flight .fls-state:has(.fl-dots) .fls-state-h::before{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%232563eb'%3E%3Cpath d='M21 16v-2l-8-5V3.5a1.5 1.5 0 0 0-3 0V9l-8 5v2l8-2.5V19l-2 1.5V22l3.5-1 3.5 1v-1.5L13 19v-5.5l8 2.5z'/%3E%3C/svg%3E")}
  .fls-bus .fls-state:has(.fl-dots) .fls-state-h::before{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%232563eb' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M8 6v6'/%3E%3Cpath d='M16 6v6'/%3E%3Cpath d='M2 12h19.6'/%3E%3Cpath d='M18 18h3s.5-1.7.8-2.8c.1-.4.2-.8.2-1.2 0-.4-.1-.8-.2-1.2l-1.4-5C20.1 6.8 19.1 6 18 6H4a2 2 0 0 0-2 2v10h3'/%3E%3Ccircle cx='7' cy='18' r='2'/%3E%3Cpath d='M9 18h5'/%3E%3Ccircle cx='16' cy='18' r='2'/%3E%3C/svg%3E")}
  .fls-train .fls-state:has(.fl-dots) .fls-state-h::before{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%232563eb' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='4' y='3' width='16' height='16' rx='2'/%3E%3Cpath d='M4 11h16'/%3E%3Cpath d='M12 3v8'/%3E%3Cpath d='m8 19-2 3'/%3E%3Cpath d='m18 22-2-3'/%3E%3Cpath d='M8 15h.01'/%3E%3Cpath d='M16 15h.01'/%3E%3C/svg%3E")}
  .fls-launch .fls-state:has(.fl-dots) .fls-state-h::before{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%232563eb' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M2 21c.6.5 1.2 1 2.5 1 2.5 0 2.5-2 5-2 1.3 0 1.9.5 2.5 1 .6.5 1.2 1 2.5 1 2.5 0 2.5-2 5-2 1.3 0 1.9.5 2.5 1'/%3E%3Cpath d='M19.4 18.1l1.6-6.2a1 1 0 0 0-.6-1.2L12 8 3.6 10.7a1 1 0 0 0-.6 1.2l1.6 6.2'/%3E%3Cpath d='M12 8V3'/%3E%3Cpath d='M8 6h8'/%3E%3Cpath d='M6 12.5 12 11l6 1.5'/%3E%3C/svg%3E")}
}
@media(max-width:380px){
  .fls-state:has(.fl-dots) .fls-state-h{font-size:17.5px}
  .fls-state:has(.fl-dots) .fls-state-h .fl-dots{display:none}
}

@media(max-width:380px){
  .fls-grid .fls-card{padding-left:12px;padding-right:12px}
  .fls-flight .fls-row:nth-child(3) .fls-row-vl,.fls-flight .fls-row:nth-child(4) .fls-row-vl,
  .fls-bus .fls-row:nth-child(3) .fls-row-vl,.fls-bus .fls-row:nth-child(4) .fls-row-vl,
  .fls-train .fls-row:nth-child(3) .fls-row-vl,.fls-train .fls-row:nth-child(4) .fls-row-vl,
  .fls-launch .fls-row:nth-child(2) .fls-row-vl,.fls-launch .fls-row:nth-child(3) .fls-row-vl{font-size:14.5px;letter-spacing:-.01em}
  .fls-flight .fls-row:nth-child(4) .fls-row-vl::before,
  .fls-bus .fls-row:nth-child(4) .fls-row-vl::before,.fls-train .fls-row:nth-child(4) .fls-row-vl::before,
  .fls-launch .fls-row:nth-child(3) .fls-row-vl::before{margin-right:5px}
}

/* route values are flex boxes in the base sheet, which wraps the city name
   under its own arrow on narrow phones — lay them out as plain text */
@media(max-width:767px){
  .fls-flight .fls-row:nth-child(3) .fls-row-vl,.fls-flight .fls-row:nth-child(4) .fls-row-vl,
  .fls-bus .fls-row:nth-child(3) .fls-row-vl,.fls-bus .fls-row:nth-child(4) .fls-row-vl,
  .fls-train .fls-row:nth-child(3) .fls-row-vl,.fls-train .fls-row:nth-child(4) .fls-row-vl,
  .fls-launch .fls-row:nth-child(2) .fls-row-vl,.fls-launch .fls-row:nth-child(3) .fls-row-vl{display:block}
}

/* ── v4.71 (owner, 2026-11-07, circled on the live site): the blue line is
   GONE from every fill box. v4.57 calmed the field wrappers, but the input
   inside still took the prebuilt bundle's bare :focus-visible ring (a 2px
   pale + 4px blue shadow) — the same ring the site's own input-focus-fix.css
   (v053) strips from other pages' inner inputs, a list the ticket fields
   were never added to. Same remedy, ticket surfaces: no outline, no shadow,
   no blue border shift — on the form pages, the status pages and the
   payment sheets of all four services, at every width. ── */
.tk-wrap input,.tk-wrap textarea,.tk-wrap select,
.tk-page input,.tk-page textarea,.tk-page select,
.fls input,.fls textarea,.fls select,
.tkpay input,.tkpay textarea,.tkpay select{
  outline:none!important;box-shadow:none!important;-webkit-tap-highlight-color:transparent}
.tk-wrap input:focus,.tk-page input:focus,.fls input:focus,.tkpay input:focus,
.tk-wrap textarea:focus,.tk-page textarea:focus,.fls textarea:focus,.tkpay textarea:focus{
  border-color:inherit}

/* ── v4.72 (owner, 2026-11-07, three headings circled on the live site):
   the status pages' big texts were oversized next to the login page's
   calm scale — so they take the login page's own sizes: the hero title
   becomes the Sign In title (26px, 800, -.01em), the card titles settle
   to 17px, and the checking banner's heading to 17px (16.5px on the
   narrowest phones, where its dots already rest). Mobile only; the
   desktop headings are the site's original sizes. ── */
@media(max-width:767px){
  .fls-h1{font-size:26px;letter-spacing:-.01em}
  .fls-card-h h2{font-size:17px}
  .fls-state:has(.fl-dots) .fls-state-h{font-size:17px}
}
@media(max-width:380px){
  .fls-state:has(.fl-dots) .fls-state-h{font-size:16.5px}
}

/* ── v4.73 (2026-11-07): the transport catalogue under the ticket forms —
   partner cards with their priced options, drawn in the site's own card
   language (white, soft border, ink headings, site blue). The data comes
   from the admin catalogue (Admin > Services > Ticket catalogue); when it
   is empty the section renders nothing at all. ── */
.txp{margin-top:30px}
.txp-h{font-size:19px;font-weight:800;color:#10163f;letter-spacing:-.01em}
.txp-sub{font-size:13.5px;color:#66738f;margin-top:3px;line-height:1.5}
.txp-list{margin-top:6px}
.txp-card{background:#fff;border:1px solid #e3eaf6;border-radius:18px;padding:16px;box-shadow:0 10px 30px rgba(16,35,80,.06);margin-top:14px}
.txp-ph{display:flex;flex-wrap:wrap;gap:12px;align-items:flex-start}
.txp-img{width:56px;height:56px;border-radius:12px;object-fit:cover;border:1px solid #e3eaf6}
.txp-ptx{flex:1;min-width:180px}
.txp-name{font-size:16.5px;font-weight:800;color:#10163f}
.txp-tag{font-size:13px;color:#66738f;margin-top:1px}
.txp-desc{flex-basis:100%;font-size:13.5px;color:#66738f;line-height:1.55}
.txp-opts{margin-top:8px}
.txp-opt{display:flex;justify-content:space-between;align-items:flex-start;gap:14px;padding:12px 0;border-top:1px solid #eef3fa;flex-wrap:wrap}
.txp-otx{flex:1;min-width:220px}
.txp-route{font-size:15px;font-weight:700;color:#10163f;display:flex;align-items:center;gap:7px;flex-wrap:wrap}
.txp-arrow{color:#98a5bd;font-weight:400}
.txp-otitle{font-size:12.5px;font-weight:600;color:#2563eb;background:#eef4ff;border-radius:999px;padding:2px 9px}
.txp-meta{font-size:12.5px;color:#66738f;margin-top:4px}
.txp-feat{display:inline-block;background:#f2f6fd;border:1px solid #e3eaf6;border-radius:999px;padding:1px 8px;margin-left:5px;font-size:11.5px;color:#44506a}
.txp-odesc{font-size:13px;color:#66738f;margin-top:4px;line-height:1.5}
.txp-buy{display:flex;flex-direction:column;align-items:flex-end;gap:7px}
.txp-price{font-size:17px;font-weight:800;color:#10163f;white-space:nowrap}
.txp-old{font-size:12.5px;color:#98a5bd;font-weight:400;margin-right:6px}
.txp-req{font-size:13.5px;font-weight:600;color:#66738f;white-space:nowrap}
.txp-btn{background:#2563eb;color:#fff;border:none;border-radius:999px;padding:8px 16px;font-size:13.5px;font-weight:700;cursor:pointer;white-space:nowrap}
.txp-btn:hover{background:#1d4fd0}
@media(max-width:767px){
  .txp-h{font-size:17px}
  .txp-buy{flex-direction:row;align-items:center;width:100%;justify-content:space-between}
}

/* ── v4.74 (2026-11-07): the catalogue becomes a compact operator GRID —
   three cards to a row on a phone, more on a wide screen — and each card
   opens the operator's own page: header, routes with a price per seat
   category, seat types with photos, gallery, about. Site card language
   throughout. (.txp-card/.txp-opt from v4.73 are retired by the grid.) ── */
.txp-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:10px;margin-top:14px}
@media(min-width:768px){.txp-grid{grid-template-columns:repeat(auto-fill,minmax(215px,1fr));gap:14px}}
.txp-c2{display:flex;flex-direction:column;text-align:left;background:#fff;border:1px solid #e3eaf6;border-radius:16px;padding:0 0 10px;overflow:hidden;cursor:pointer;box-shadow:0 8px 22px rgba(16,35,80,.05);font:inherit;color:inherit;position:relative}
.txp-c2:active{transform:scale(.98)}
.txp-c2-ph{display:block;aspect-ratio:16/10;background:#eef3fa;overflow:hidden}
.txp-c2-ph img{width:100%;height:100%;object-fit:cover;display:block}
.txp-c2-noph{display:flex;align-items:center;justify-content:center}
.txp-c2-noph span{font-size:34px;font-weight:800;color:#2563eb}
.txp-c2-tx{display:flex;flex-direction:column;gap:3px;padding:9px 10px 0}
.txp-c2-nm{display:flex;align-items:center;gap:5px;min-width:0}
.txp-c2-logo{width:16px;height:16px;border-radius:4px;object-fit:cover;flex:none}
.txp-c2-name{font-size:13px;font-weight:800;color:#10163f;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
@media(min-width:768px){.txp-c2-name{font-size:15px}}
.tx-vtick{width:14px;height:14px;flex:none}
.txp-c2-rt{font-size:12px;font-weight:700;color:#10163f}
.txp-star{color:#f5a623}
.txp-c2-rc{color:#98a5bd;font-weight:400}
.txp-c2-chips{display:flex;flex-wrap:wrap;gap:4px;margin-top:2px}
.txp-c2-chip{font-size:10.5px;font-weight:600;color:#44506a;background:#f2f6fd;border:1px solid #e3eaf6;border-radius:999px;padding:1px 7px;white-space:nowrap}
@media(min-width:768px){.txp-c2-chip{font-size:11.5px}}
.txp-c2-ar{position:absolute;right:8px;bottom:6px;font-size:18px;color:#98a5bd;line-height:1}
/* ── the operator page ── */
.txd{max-width:880px;margin:0 auto;padding:14px 14px 40px}
.txd-top{display:flex;align-items:center;gap:12px;margin-bottom:12px}
.txd-back{width:40px;height:40px;border-radius:50%;background:#fff;border:1px solid #cdd7e8;box-shadow:0 4px 14px rgba(16,35,80,.08);color:#10163f;font-size:17px;cursor:pointer;flex:none}
.txd-kind{font-size:13px;font-weight:700;color:#66738f;text-transform:uppercase;letter-spacing:.06em}
.txd-card{background:#fff;border:1px solid #e3eaf6;border-radius:18px;padding:16px;box-shadow:0 10px 30px rgba(16,35,80,.06);margin-bottom:14px}
.txd-head{padding-top:0;overflow:hidden}
.txd-cover{margin:0 -16px 12px;aspect-ratio:16/7;overflow:hidden;background:#eef3fa}
.txd-cover img{width:100%;height:100%;object-fit:cover;display:block}
.txd-hrow{display:flex;gap:12px;align-items:flex-start}
.txd-logo{width:52px;height:52px;border-radius:14px;object-fit:cover;border:1px solid #e3eaf6;flex:none;background:#fff}
.txd-logo-init{display:flex;align-items:center;justify-content:center;font-size:24px;font-weight:800;color:#2563eb;background:#eef4ff}
.txd-htx{flex:1;min-width:0}
.txd-h1{font-size:21px;font-weight:800;color:#10163f;letter-spacing:-.01em;display:flex;align-items:center;gap:7px;flex-wrap:wrap}
.txd-h1 .tx-vtick{width:18px;height:18px}
.txd-sub{font-size:13.5px;color:#66738f;margin-top:2px}
.txd-rt{font-size:13.5px;font-weight:700;color:#10163f;margin-top:3px}
.txd-rc{color:#98a5bd;font-weight:400}
.txd-chips{display:flex;flex-wrap:wrap;gap:6px;margin-top:12px}
.txd-chip{font-size:12px;font-weight:600;color:#44506a;background:#f2f6fd;border:1px solid #e3eaf6;border-radius:999px;padding:4px 10px}
.txd-desc{font-size:14px;color:#44506a;line-height:1.6;margin-top:10px}
.txd-h2{font-size:17px;font-weight:800;color:#10163f;margin-bottom:8px}
.txd-routes{display:flex;flex-direction:column}
.txd-route{padding:13px 0;border-top:1px solid #eef3fa}
.txd-route:first-child{border-top:none;padding-top:4px}
.txd-rline{display:flex;align-items:center;gap:10px;flex-wrap:wrap}
.txd-rname{font-size:15.5px;font-weight:800;color:#10163f;display:flex;align-items:center;gap:7px}
.txd-dur{font-size:12.5px;color:#66738f}
.txd-cats{display:flex;flex-wrap:wrap;gap:8px;margin-top:10px;align-items:stretch}
.txd-cat{display:flex;flex-direction:column;align-items:flex-start;gap:1px;background:#f7fafd;border:1.5px solid #e3eaf6;border-radius:12px;padding:8px 12px;cursor:pointer;font:inherit;text-align:left}
.txd-cat-t{font-size:12px;font-weight:600;color:#66738f}
.txd-cat-p{font-size:15.5px;font-weight:800;color:#10163f;white-space:nowrap}
.txd-cat-req{font-size:13.5px;color:#66738f}
.txd-cat-on{background:#eef4ff;border-color:#2563eb}
.txd-cat-on .txd-cat-t{color:#2563eb}
.txd-book{margin-left:auto;background:#2563eb;color:#fff;border:none;border-radius:12px;padding:10px 22px;font-size:14.5px;font-weight:700;cursor:pointer;align-self:center}
.txd-book:hover{background:#1d4fd0}
.txd-types{display:grid;grid-template-columns:1fr;gap:12px}
@media(min-width:640px){.txd-types{grid-template-columns:repeat(3,1fr)}}
.txd-type{border:1px solid #eef3fa;border-radius:14px;overflow:hidden;background:#fbfcfe}
.txd-type-ph{width:100%;aspect-ratio:16/10;object-fit:cover;display:block}
.txd-type-tx{padding:10px 12px}
.txd-type-h{font-size:14.5px;font-weight:800;color:#10163f}
.txd-type-s{font-size:12.5px;color:#66738f;margin-top:1px}
.txd-type-d{font-size:13px;color:#44506a;line-height:1.5;margin-top:4px}
.txd-photos{display:grid;grid-template-columns:repeat(3,1fr);gap:8px}
.txd-photos img{width:100%;aspect-ratio:1/1;object-fit:cover;border-radius:12px;display:block}
.txd-msg{text-align:left}
@media(max-width:767px){
  .txd-h1{font-size:19px}
  .txd-book{margin-left:0;width:100%;padding:12px}
  .txd-cat{flex:1;align-items:center}
}

/* ── v4.75 (2026-11-07): the catalogue follows the owner's mockup flow —
   the operator cards appear AFTER a search, on the status page, filtered
   to the searched route; the operator page gains its tab bar, amenity
   icons, tinted category chips (grey / blue / lavender) and the amenities
   tiles beside the seat types. ── */
.tx-amen-ic{width:14px;height:14px;flex:none}
.txp-c2-chip{display:inline-flex;align-items:center;gap:3px}
.txp-c2-chip .tx-amen-ic{width:11px;height:11px;color:#2563eb}
.txp-c2-ar{width:26px;height:26px;border-radius:50%;background:#fff;border:1px solid #e3eaf6;box-shadow:0 3px 10px rgba(16,35,80,.10);display:flex;align-items:center;justify-content:center;font-size:15px;color:#10163f;right:7px;bottom:7px}
.txd-tabs{display:flex;gap:6px;overflow-x:auto;background:#eef3fa;border-radius:999px;padding:5px;margin-bottom:14px;scrollbar-width:none}
.txd-tabs::-webkit-scrollbar{display:none}
.txd-tab{flex:1;white-space:nowrap;background:transparent;border:none;border-radius:999px;padding:8px 14px;font-size:13.5px;font-weight:600;color:#44506a;cursor:pointer;font-family:inherit}
.txd-tab-on{background:#2563eb;color:#fff;box-shadow:0 4px 12px rgba(37,99,235,.35)}
.txd-card{scroll-margin-top:86px}
.txd-ic{width:16px;height:16px;color:#2563eb;flex:none}
.txd-dur{display:inline-flex;align-items:center;gap:4px}
.txd-dur .txd-ic{width:14px;height:14px;color:#98a5bd}
.txd-cat-blue{background:#e8f1fe;border-color:#c9ddfb}
.txd-cat-lav{background:#f0eafd;border-color:#ddd0fa}
.txd-cat-on{border-color:#2563eb!important;box-shadow:0 0 0 1.5px #2563eb inset}
.txd-chip{display:inline-flex;align-items:center;gap:5px}
.txd-chip .tx-amen-ic{color:#2563eb}
.txd-types-wrap{display:grid;grid-template-columns:1fr;gap:16px}
@media(min-width:820px){.txd-types-wrap{grid-template-columns:1.9fr 1fr}}
.txd-amen-h{font-size:14.5px;font-weight:800;color:#10163f;margin-bottom:8px}
.txd-amen-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:8px}
.txd-amen-tile{display:flex;flex-direction:column;align-items:center;gap:5px;background:#f7fafd;border:1px solid #eef3fa;border-radius:12px;padding:10px 6px;font-size:11.5px;font-weight:600;color:#44506a;text-align:center}
.txd-amen-tile .tx-amen-ic{width:19px;height:19px;color:#2563eb}

/* ── v4.76 (2026-11-07): the mockup, part by part — the section header
   carries the blue vehicle glyph; card photos sit on white; the operator
   header becomes the mockup's split banner on a wide screen (words left,
   the vehicle photo right); tabs and headings carry their icons; seat
   cards put their words first and the photo below. ── */
.txp-hrow{display:flex;gap:12px;align-items:flex-start}
.txp-hic{color:#2563eb;flex:none;margin-top:2px}
.tx-glyph{width:32px;height:32px;display:block}
.txp-hrow .txp-h{margin:0}
.txp-hrow .txp-sub{margin-top:2px}
.txp-c2-ph{background:#fff}
.txd-h2g{display:flex;align-items:center;gap:9px}
.txd-h2g .tx-glyph{width:23px;height:23px;color:#2563eb}
.txd-tab{display:inline-flex;align-items:center;justify-content:center;gap:6px}
.txd-tab-ic{width:15px;height:15px;flex:none}
@media(min-width:820px){
  .txd-head{position:relative}
  .txd-head:has(.txd-cover){padding-right:47%;min-height:196px}
  .txd-cover{position:absolute;top:0;right:0;bottom:0;width:45%;margin:0;aspect-ratio:auto;border-radius:0}
}

/* ── v4.77 (2026-11-07): the search RESULTS view — the owner's flow: form
   first, then the operator cards; the request (and its checking page) is
   filed only when the guest picks an operator or sends a general
   request. A summary card of the search, then the grid, then the
   general-request card so an empty catalogue never dead-ends. ── */
.tkrs{max-width:880px;margin:0 auto;padding:14px 14px 40px}
.tkrs-top{display:flex;align-items:center;gap:12px;margin-bottom:12px}
.tkrs-sum{background:#fff;border:1px solid #e3eaf6;border-radius:18px;padding:16px;box-shadow:0 10px 30px rgba(16,35,80,.06)}
.tkrs-route{display:flex;align-items:center;gap:9px;flex-wrap:wrap;font-size:19px;font-weight:800;color:#10163f;letter-spacing:-.01em}
.tkrs-meta{font-size:13.5px;color:#66738f;margin-top:4px}
.tkrs .txp{margin-top:22px}
.tkrs-fb{background:#fff;border:1px solid #e3eaf6;border-radius:18px;padding:16px;box-shadow:0 10px 30px rgba(16,35,80,.06);margin-top:14px;text-align:center}
.tkrs-fb-h{font-size:16px;font-weight:800;color:#10163f}
.tkrs-fb-p{font-size:13.5px;color:#66738f;margin:5px auto 12px;max-width:420px;line-height:1.55}
.tkrs-fb-b{background:#2563eb;color:#fff;border:none;border-radius:12px;padding:11px 26px;font-size:14.5px;font-weight:700;cursor:pointer;font-family:inherit}
.tkrs-fb-b:hover{background:#1d4fd0}

/* ═══ v4.78 — the grid, tightened to his mockup part by part: the photo
   sits INSET on the white card (margin + its own rounding, like the
   mockup's product-shot cards), a logo initial tile stands in the name
   row when no logo is set, and the operator page's Reviews section gets
   its empty state. Site design language unchanged. ═══ */
.txp-c2-ph{margin:9px 9px 0;border-radius:13px}
.txp-c2-ini{flex:0 0 auto;width:30px;height:30px;border-radius:9px;background:#e7eefc;color:#1b4ff1;font-size:15px;font-weight:800;display:inline-flex;align-items:center;justify-content:center}
.txd-rev-empty{text-align:center;padding:18px 10px 20px}
.txd-rev-star{display:inline-flex;width:46px;height:46px;border-radius:50%;background:#fff7e8;color:#f5a623;font-size:24px;align-items:center;justify-content:center}
.txd-rev-t{margin:10px 0 0;font-size:15px;font-weight:800;color:#10163f}
.txd-rev-s{margin:4px auto 0;max-width:340px;font-size:13px;line-height:1.55;color:#5b6b8c}

/* ═══ v4.79 — the operator page, tightened to his detail mockup part by
   part: the banner photo fades softly into the white (no hard edge), the
   logo tile and name take the mockup's scale, each route becomes its own
   tinted card with route · duration · price chips · Book on ONE line on
   desktop, and Types / Amenities stand as two separate cards. ═══ */
.txd-route{background:#f5f8fd;border:1px solid #e8effa;border-radius:14px;padding:12px 14px;margin-top:10px}
.txd-routes>.txd-route:first-child{margin-top:2px}
.txd-type-tx{text-align:center}
.txd-types-card,.txd-amen-card{margin-top:0}
@media(min-width:820px){
  .txd-logo{width:76px;height:76px;border-radius:18px}
  .txd-logo-init{font-size:34px}
  .txd-h1{font-size:27px}
  .txd-cover{-webkit-mask-image:linear-gradient(to right,transparent 0,#000 15%);mask-image:linear-gradient(to right,transparent 0,#000 15%)}
  .txd-route{display:flex;align-items:center;gap:16px;padding:13px 16px}
  .txd-rline{flex:1 1 auto;min-width:0}
  .txd-cats{margin:0;flex:none}
  .txd-book{width:auto;flex:none;margin:0;padding:10px 26px}
}
.txd-type{display:flex;flex-direction:column}
.txd-type-ph{margin-top:auto}

/* ═══ v4.81 — the PHONE version of the operator pages (owner's order:
   adapt the desktop mockup design for phones, judged on the phone
   itself): the grid goes two-across so names, ratings and photos stay
   readable instead of truncating in three narrow columns; the route
   line holds one line at 360px; the tab bar fades at its right edge to
   show it scrolls; seat types sit two-across with clamped text. ═══ */
@media(max-width:767px){
  .txp-grid{grid-template-columns:repeat(2,1fr);gap:12px}
  .txd-tabs{-webkit-mask-image:linear-gradient(to right,#000 90%,transparent 100%);mask-image:linear-gradient(to right,#000 90%,transparent 100%)}
  .txd-types{grid-template-columns:repeat(2,1fr);gap:10px}
  .txd-type-d{display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden}
  .txd-type-ph{aspect-ratio:4/3;object-fit:cover;width:100%}
}
@media(max-width:380px){
  .txd-rline{flex-wrap:nowrap}
  .txd-rname{font-size:14.5px;white-space:nowrap}
  .txd-route{padding:11px 12px}
}
@media(max-width:767px){
  .txp-c2-name{white-space:normal;overflow:visible;text-overflow:clip}
}
@media(max-width:380px){
  .txd-dur{white-space:nowrap;flex:none}
}
@media(max-width:767px){
  .txp-c2-name{font-size:14.5px;line-height:1.25}
}

/* ═══ v4.83 — the phone polish (owner's order: on mobile only, slightly
   smaller type, a more compact, modern rhythm — the site's Modern
   Minimalist / subtle-glass / premium-card language, tightened; PC is
   untouched). Layout and spacing carry the compactness, sizes step down
   only a touch. ═══ */
@media(max-width:767px){
  .txp-h{font-size:17px}
  .txp-sub{font-size:12.5px}
  .txp-grid{gap:10px}
  .txp-c2{border-radius:15px;box-shadow:0 6px 18px rgba(16,35,80,.05)}
  .txp-c2-ph{margin:7px 7px 0;border-radius:11px}
  .txp-c2-name{font-size:13.5px}
  .txp-c2-rt{font-size:11.5px}
  .txp-c2-logo,.txp-c2-ini{width:26px;height:26px;border-radius:8px;font-size:13px}
  .tkrs-sum{padding:13px 14px;border-radius:16px}
  .txd-card{border-radius:16px;box-shadow:0 6px 18px rgba(16,35,80,.05)}
  .txd-h1{font-size:19px}
  .txd-logo{width:46px;height:46px;border-radius:12px}
  .txd-sub{font-size:12.5px}
  .txd-rt{font-size:12.5px}
  .txd-chip{font-size:11px;padding:3.5px 9px}
  .txd-tab{font-size:12.5px;padding:7px 12px}
  .txd-h2{font-size:15.5px}
  .txd-rname{font-size:14.5px}
  .txd-cat-t{font-size:11px}
  .txd-cat-p{font-size:14px}
  .txd-type-h{font-size:13.5px}
  .txd-type-s{font-size:11.5px}
  .txd-type-d{font-size:11.5px}
  .txd-amen-tile{font-size:10.5px;padding:8px 4px}
  .txd-rev-t{font-size:14px}
  .txd-rev-s{font-size:12px}
}
@media(max-width:767px){
  .tkrs-route{font-size:17px}
  .tkrs-meta{font-size:12.5px}
  .tkrs-fb-h{font-size:15px}
  .tkrs-fb-p{font-size:12.5px}
}

/* ═══ v4.84 — wide screens fill out (owner: "side giye onek screen khali
   dekha jacche"): on desktop the results view and the operator page take
   a 1180px column like his mockups instead of the narrow 880px, and the
   operator grid settles at three large cards across. Phone and tablet
   keep their widths. ═══ */
@media(min-width:1024px){
  .tkrs{max-width:1180px}
  .txd{max-width:1180px}
  .txp-grid{grid-template-columns:repeat(3,1fr);gap:16px}
}

/* ── v4.85 (2026-11-10): operator reviews — list, write-a-review form ── */
.txd-rev-sum{margin:2px 0 8px;font-size:15px;font-weight:800;color:#10163f}
.txd-rev-list{display:flex;flex-direction:column}
.txd-rev-item{padding:11px 0;border-top:1px solid #eef3fa}
.txd-rev-item:first-child{border-top:0;padding-top:2px}
.txd-rev-hd{display:flex;align-items:baseline;gap:8px;flex-wrap:wrap}
.txd-rev-hd b{font-size:14px;color:#10163f}
.txd-rev-stars{color:#f5a623;font-size:13px;letter-spacing:1px}
.txd-rev-date{margin-left:auto;font-size:12px;color:#8494b3}
.txd-rev-body{margin:4px 0 0;font-size:13.5px;line-height:1.55;color:#33456e}
.txd-rev-form{margin-top:14px;padding-top:14px;border-top:1px solid #eef3fa;display:flex;flex-direction:column;gap:9px}
.txd-rev-ft{margin:0;font-size:14px;font-weight:800;color:#10163f}
.txd-rev-in{width:100%;box-sizing:border-box;border:1px solid #dbe6f5;border-radius:11px;padding:11px 13px;font-size:14px;color:#10163f;background:#fff;font-family:inherit}
.txd-rev-in::placeholder{color:#93a5c4}
textarea.txd-rev-in{resize:vertical}
.txd-rev-pick{display:flex;align-items:center;gap:2px}
.txd-rev-pickb{border:0;background:none;padding:2px 3px;font-size:26px;line-height:1;color:#d5deee;cursor:pointer}
.txd-rev-pickb.on{color:#f5a623}
.txd-rev-pickn{margin-left:6px;font-size:13px;font-weight:700;color:#5b6b8c}
.txd-rev-err{margin:0;font-size:13px;color:#d43d2a}
.txd-rev-thanks{margin:12px 0 0;padding:11px 13px;border-radius:11px;background:#e9f9ef;color:#177245;font-size:13.5px;font-weight:600}
.txd-rev-submit{align-self:flex-start;border:0;border-radius:999px;background:#2563eb;color:#fff;font-size:14px;font-weight:700;padding:11px 22px;cursor:pointer}
.txd-rev-submit:disabled{opacity:.55;cursor:default}
/* The v4.71 no-blue-focus rule, extended to the operator page (.txd). */
.txd input,.txd textarea,.txd select{outline:none!important;box-shadow:none!important;-webkit-tap-highlight-color:transparent}
.txd input:focus,.txd textarea:focus,.txd select:focus{border-color:inherit}

/* Payment return page (/payment/return) — the guest lands here after a gateway payment. */
.gwret{min-height:100svh;display:flex;align-items:center;justify-content:center;padding:24px 16px;background:#f6f9ff}
.gwret-card{background:#fff;border:1px solid #e3ebf7;border-radius:20px;box-shadow:0 12px 32px rgba(16,42,90,.08);max-width:420px;width:100%;padding:36px 28px;text-align:center}
.gwret-card h1{font-size:22px;font-weight:800;color:#0d1b33;margin:14px 0 8px}
.gwret-card p{font-size:14.5px;line-height:1.55;color:#5a6b87;margin:0 0 6px}
.gwret-ic{width:58px;height:58px;margin:0 auto;border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:27px;font-weight:800}
.gwret-ic.ok{background:#e5f7ec;color:#128a43}
.gwret-ic.no{background:#fdf0e3;color:#b96a00}
.gwret-spin{width:42px;height:42px;margin:6px auto 4px;border-radius:50%;border:4px solid #dbe7fb;border-top-color:#2563eb;animation:gwretsp 0.9s linear infinite}
@keyframes gwretsp{to{transform:rotate(360deg)}}
.gwret-btn{display:inline-block;margin-top:16px;background:#2563eb;color:#fff;font-size:15px;font-weight:700;padding:12px 26px;border-radius:999px;text-decoration:none}