/* Bet slip, "Please Confirm Your Bet", loading box and result bar — the SkyFair application (application/public/css/theme.css).
   Sizes use --u (1/375 of the phone width, max 1.2px; 1px on desktop). */
.fm-slip, .fm-confirm, .fm-result, .page-loading, .fm-proj { --u: min(calc(100vw / 375), 1.2px); --font-mobile: Tahoma, Helvetica, sans-serif; line-height: 1.2; }
.is-desktop .fm-slip, .is-desktop .fm-confirm, .is-desktop .fm-result, .is-desktop .page-loading, .is-desktop .fm-proj { --u: 1px; --font-mobile: Tahoma, Helvetica, sans-serif; }
.fm-slip button, .fm-confirm button, .fm-result button { font-family: inherit; }
.fm-slip * { box-sizing: border-box; }
/* The slip sits under a runner row in a grid / flex parent: take the full width. */
.fm-slip { grid-column: 1 / -1; width: 100%; flex: 0 0 100%; }
[data-runner-name]:has(.fm-proj) .pos { display: none; }
.fmd-team:has(.fm-proj) { flex-wrap: wrap; }
.fmd-team .fm-proj { margin-left: auto; }
@keyframes rightToLeft { 0% { transform: translate(0); } to { transform: translate(-100%); } }
@keyframes leftToRight { 0% { transform: translate(0); } to { transform: translate(100%); } }
@keyframes fmResultIn { from { transform: translateY(-100%); opacity: 0; } to { transform: none; opacity: 1; } }
body.fm-placing .odd, body.fm-placing .xb, body.fm-placing .bm-btn { filter: brightness(.78); }

.page-loading { position:fixed;inset:0;z-index:130;display:flex;align-items:center;justify-content:center;pointer-events:all;background:transparent }
.page-loading[hidden] { display:none }
.page-loading-wrap { display:flex;flex-direction:column;align-items:center;justify-content:center;width:calc(150 * var(--u));padding:calc(18 * var(--u)) 0;border-radius:calc(5 * var(--u));background:#fff;box-shadow:0 3px 10px rgba(0,0,0,.5) }
.page-loading-wrap>span { font-family:var(--font-mobile);font-size:calc(12 * var(--u));font-weight:400;line-height:1.2;color:#243a48 }
.loading-circle-anime { position:relative;overflow:hidden;width:calc(70 * var(--u));height:calc(35 * var(--u));margin-bottom:calc(19 * var(--u)) }
.loading-circle-anime::before,.loading-circle-anime::after { content:'';position:absolute;top:0;width:50%;height:100%;border-radius:9999px }
.loading-circle-anime::before { right:0;background:rgb(61,81,97);animation:rightToLeft .6s ease infinite }
.loading-circle-anime::after { left:0;background:rgb(255,184,12);animation:leftToRight .6s ease infinite }
.fm-slip { --slip-bg:#d2ecd0;--slip-foot:#c5ddc2;--slip-max:#b8ceb5;--slip-line:#849e8f;--slip-off:#d8e7d6;--slip-off-b:#c8d9c6;--slip-off-t:#b3bfb2; border-top:1px solid var(--slip-line);border-bottom:1px solid var(--slip-line);background:var(--slip-bg);color:#1e1e1e;font-family:var(--font-mobile) }
.fm-slip[hidden] { display:none }
.fm-slip.lay.type-match { --slip-bg:#d9eaee;--slip-foot:#c6dce2;--slip-max:#b3cbd2;--slip-line:#8aa3aa;--slip-off:#d5e4e8;--slip-off-b:#c3d6db;--slip-off-t:#a9bcc1 }
.fm-slip.back.type-bookmaker,.fm-slip.back.type-fancy { --slip-bg:#d4e6f3;--slip-foot:#bfd6e8;--slip-max:#a9c6dc;--slip-line:#7fa4bf;--slip-off:#d1e2ee;--slip-off-b:#bcd2e3;--slip-off-t:#a6bccc }
.fm-slip.lay.type-bookmaker,.fm-slip.lay.type-fancy { --slip-bg:#f6e1e6;--slip-foot:#ebccd4;--slip-max:#deb6c0;--slip-line:#c393a0;--slip-off:#f2dce2;--slip-off-b:#e5c8d0;--slip-off-t:#c9aab2 }
.fm-slip-min { display:grid;grid-template-columns:1fr 1fr;gap:calc(12 * var(--u));margin:0;padding:0 calc(10 * var(--u));height:calc(28 * var(--u));align-items:center;font-size:calc(11 * var(--u)) }
.fm-slip-min span:last-child { text-align:center }
.fm-slip-inputs { display:grid;grid-template-columns:1fr 1fr;gap:calc(12 * var(--u));padding:0 calc(10 * var(--u)) }
.fm-slip-odds { display:flex;align-items:center;justify-content:center;height:calc(38 * var(--u));border:1px solid #c5cdc4;border-radius:calc(5 * var(--u));background:#dcdcdc;color:#8d8d8d;font-size:calc(15 * var(--u));font-weight:700 }
.fm-slip-stake { display:flex;height:calc(38 * var(--u));border:1px solid #b2beb1;border-radius:calc(5 * var(--u));overflow:hidden;background:#fff }
.fm-slip-stake input { flex:1 1 0%;min-width:0;height:100%;margin:0;padding:0 calc(4 * var(--u));border:0;border-left:1px solid #bababa;border-right:1px solid #bfb9b3;border-radius:0;background:#fdedc7;box-shadow:inset 0 1px 1px rgba(0,0,0,.08);color:#1e1e1e;font-family:inherit;font-size:calc(15 * var(--u));font-weight:700;text-align:center;caret-color:#6e9196;outline:0 }
/* Match Odds / Bookmaker: the odds box can be changed; the box the keypad types into is cream, the other white. */
.fm-slip.type-match .fm-slip-odds,.fm-slip.type-bookmaker .fm-slip-odds,.fm-slip:not(.type-match):not(.type-bookmaker) .fm-slip-oddin { display:none }
.fm-slip-oddin input,.fm-slip.type-match .fm-slip-stakein:not(.on) input,.fm-slip.type-bookmaker .fm-slip-stakein:not(.on) input { background:#fff }
.fm-slip-oddin.on input { background:#fdedc7 }
.fm-step { flex:0 0 calc(38 * var(--u));display:flex;align-items:center;justify-content:center;margin:0;padding:0;border:0;background:linear-gradient(180deg,#fcfcfc,#f1f0f0);cursor:pointer }
.fm-step svg { width:calc(18 * var(--u));height:calc(18 * var(--u));fill:#1f72ac }
.fm-step:active { background:#e6e6e6 }
.fm-slip-quick { display:flex;height:calc(30 * var(--u));margin-top:calc(13 * var(--u));border-top:1px solid #80a7b5;background:linear-gradient(180deg,#315e7c,#2a526d 50%,#22475f) }
.fm-slip-quick button { flex:1 1 0%;min-width:0;margin:0;padding:0;border:0;border-left:1px solid rgba(255,255,255,.15);background:none;color:#fff;font-family:inherit;font-size:calc(13 * var(--u));cursor:pointer }
.fm-slip-quick button:first-child { border-left:0 }
.fm-slip-quick button:active { background:rgba(255,255,255,.12) }
.fm-slip-keys { display:grid;grid-template-columns:repeat(7,1fr);grid-template-rows:repeat(2,calc(39 * var(--u)));margin-top:calc(9 * var(--u));border-top:1px solid #c4d4c3;background:#fff }
.fm-slip-keys button { margin:0;padding:0;border:0;border-right:1px solid #dcdcdc;border-bottom:1px solid #dcdcdc;background:#fff;color:#131313;font-family:inherit;font-size:calc(14 * var(--u));cursor:pointer }
.fm-slip-keys button:nth-child(-n+6) { grid-row:1 }
.fm-slip-keys button:nth-child(n+7):nth-child(-n+12) { grid-row:2;border-bottom:0 }
.fm-slip-keys .fm-slip-back { grid-column:7;grid-row:1 / span 2;border-right:0;border-bottom:0;display:flex;align-items:center;justify-content:center }
.fm-slip-back svg { width:calc(20 * var(--u));height:calc(20 * var(--u));color:#111 }
.fm-slip-keys button:active { background:#eee }
.fm-slip-message { margin:0;padding:0 calc(10 * var(--u));font-size:calc(12 * var(--u)) }
.fm-slip-message:empty { display:none }
.fm-slip-message:not(:empty) { padding-top:calc(8 * var(--u)) }
.fm-slip-message.ok { color:#508d0e }
.fm-slip-message.error { color:#d0021b }
.fm-slip-actions { display:grid;grid-template-columns:1fr 1fr;gap:calc(9 * var(--u));padding:calc(11 * var(--u)) calc(10 * var(--u)) calc(13 * var(--u)) }
.fm-slip-actions button { height:calc(42 * var(--u));margin:0;border-radius:calc(5 * var(--u));font-family:inherit;font-size:calc(15 * var(--u));font-weight:700;cursor:pointer }
.fm-slip-cancel { border:1px solid #b0b8af;background:linear-gradient(180deg,#fefefe,#f6f6f6 50%,#efefee);color:#000 }
.fm-slip-place { border:1px solid #222;background:linear-gradient(180deg,#474747,#070707);color:#ffb200 }
.fm-slip-place:disabled { border-color:var(--slip-off-b);background:var(--slip-off);color:var(--slip-off-t);cursor:default }
.fm-slip-foot { display:flex;align-items:center;justify-content:space-between;height:calc(27 * var(--u));padding:0 calc(12 * var(--u)) 0 calc(8 * var(--u));background:var(--slip-foot) }
.fm-slip-accept { display:flex;align-items:center;gap:calc(9 * var(--u));font-size:calc(13 * var(--u));cursor:pointer }
.fm-slip-accept[hidden] { visibility:hidden;display:flex }
.fm-slip-accept input { appearance:none;-webkit-appearance:none;position:relative;width:calc(18 * var(--u));height:calc(18 * var(--u));margin:0;border:1px solid #bb8c00;border-radius:calc(2 * var(--u));background:#fff;cursor:pointer }
.fm-slip-accept input:checked { background:#ffb200 }
.fm-slip-accept input:checked::after { content:'';position:absolute;left:30%;top:10%;width:30%;height:55%;border:solid #000;border-width:0 2px 2px 0;transform:rotate(45deg) }
.fm-slip-max { height:calc(19 * var(--u));min-width:calc(41 * var(--u));margin:0;padding:0 calc(6 * var(--u));border:0;border-radius:calc(3 * var(--u));background:var(--slip-max);color:#0e1a0d;font-family:inherit;font-size:calc(13 * var(--u));font-weight:500;cursor:pointer }
.fm-proj { display:flex;align-items:center;gap:calc(2 * var(--u));margin-top:calc(2 * var(--u));color:#508d0e;font-size:calc(11 * var(--u));font-weight:400 }
.fm-proj svg { width:calc(11 * var(--u));height:calc(11 * var(--u));fill:currentColor }
.fm-proj.loss { color:#d0021b }
.fm-confirm { position:fixed;inset:0;z-index:140;display:flex;align-items:center;justify-content:center;padding:calc(15 * var(--u));background:rgba(0,0,0,.55) }
.fm-confirm-box { width:100%;max-width:420px;overflow:hidden;border-radius:calc(4 * var(--u));background:#fff;box-shadow:0 4px 16px rgba(0,0,0,.5) }
.fm-confirm-box h3 { margin:0;padding:calc(10 * var(--u)) calc(10 * var(--u));background:linear-gradient(180deg,#2f2f2f,#000);color:#ffb80c;font-size:calc(15 * var(--u));font-weight:700 }
.fm-confirm-sel { display:flex;align-items:center;gap:calc(10 * var(--u));margin:0;padding:calc(8 * var(--u)) calc(7 * var(--u));border-bottom:1px solid #e0e6e6;font-size:calc(14 * var(--u)) }
.fm-side { display:inline-flex;align-items:center;padding:calc(3 * var(--u)) calc(9 * var(--u));border-radius:calc(3 * var(--u));font-size:calc(14 * var(--u));line-height:1.3 }
.fm-side.back { background:#72bbef }
.fm-side.lay { background:#faa9ba }
.fm-confirm-box dl { display:grid;grid-template-columns:repeat(3,1fr);margin:0;border-bottom:1px solid #e0e6e6 }
.fm-confirm-box dl>div { padding:calc(6 * var(--u)) calc(8 * var(--u)) }
.fm-confirm-box dl>div+div { border-left:1px solid #e0e6e6 }
.fm-confirm-box dt { color:#1e1e1e;font-size:calc(13 * var(--u)) }
.fm-confirm-box dd { margin:calc(2 * var(--u)) 0 0;font-size:calc(15 * var(--u)) }
.fm-confirm-box dd.risk { color:#d0021b }
.fm-confirm-box dd.profit { color:#508d0e }
.fm-confirm-actions { display:grid;grid-template-columns:1fr 1fr;gap:calc(10 * var(--u));padding:calc(10 * var(--u)) calc(18 * var(--u)) calc(12 * var(--u)) }
.fm-confirm-actions button { height:calc(34 * var(--u));border-radius:calc(4 * var(--u));font-family:inherit;font-size:calc(14 * var(--u));cursor:pointer }
.fm-confirm-back { border:1px solid #bbb;background:linear-gradient(180deg,#fff,#eee);color:#1e1e1e }
.fm-confirm-ok { border:1px solid #222;background:linear-gradient(180deg,#474747,#070707);color:#ffb80c;font-weight:700 }
.fm-result { position:fixed;left:0;right:0;z-index:125;display:flex;align-items:stretch;background:#7cc41a;color:#1e1e1e;box-shadow:0 2px 6px rgba(0,0,0,.25);animation:fmResultIn .2s ease-out }
.fm-result>div { flex:1;min-width:0;padding:calc(6 * var(--u)) calc(8 * var(--u)) calc(7 * var(--u)) }
.fm-result b { display:block;font-size:calc(14 * var(--u));font-weight:400 }
.fm-result p { display:flex;align-items:center;gap:calc(8 * var(--u));margin:calc(5 * var(--u)) 0 0;font-size:calc(14 * var(--u)) }
.fm-result .fm-side { padding:calc(1 * var(--u)) calc(7 * var(--u));font-size:calc(13 * var(--u)) }
.fm-result .fm-side.lay { background:#ececec }
.fm-result .fm-side.back { background:#b7dbf6 }
.fm-result>button { flex:0 0 calc(34 * var(--u));margin:0;padding:0;border:0;border-left:1px solid rgba(0,0,0,.12);background:none;color:#1e1e1e;font-size:calc(22 * var(--u));line-height:1;cursor:pointer }
.fm-result.failed { background:#d0021b;color:#fff }
.fm-result.failed>button { color:#fff;border-left-color:rgba(255,255,255,.3) }
.fm-result.failed .fm-side { display:none }