/* Match rows of the Sports (Highlights) and In-Play pages, measured from the reference (EventInfoItem / EventRelatedIcons):
   icon artwork = the reference's own SVGs; sizes in reference px x --u (screen width / 375), fixed px on desktop. */

/* ---- icons: Live stream, Low liquidity, Fancy, Bookmaker, Premium (Sportsbook). "in-play": the wide version with the green clock ---- */
.ev-ico{flex:0 0 auto;display:block;width:15px;height:15px;margin-right:3px;background:no-repeat center/contain}
.ev-low{width:25px}
.ev-fancy.in-play,.ev-bookmaker.in-play{width:30px}
.ev-streaming{background-image:url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='15' height='15' fill='none'%3E%3Crect width='15' height='15' fill='%231876B2' rx='4'/%3E%3Cpath fill='%234AA2DB' d='M7.5 13.5a6 6 0 1 0 0-12 6 6 0 0 0 0 12'/%3E%3Cpath fill='%23fff' fill-rule='evenodd' d='M7.5 1.5a6 6 0 1 1 0 12 6 6 0 0 1 0-12m0 1a5 5 0 1 0 0 10 5 5 0 0 0 0-10' clip-rule='evenodd'/%3E%3Cpath fill='%23fff' fill-rule='evenodd' d='M5.5 4.5v6l5-3z' clip-rule='evenodd'/%3E%3C/svg%3E")}
.ev-low{background-image:url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='26' height='15' fill='none'%3E%3Crect width='25' height='15' x='.501' fill='%23D0021B' rx='3'/%3E%3Cpath fill='%23fff' d='M8.106 11H3.253V3.73h1.826v5.883h3.027zm6.036-2.74q0 1.353-.743 2.135-.737.776-2.09.776-1.342 0-2.09-.776-.741-.782-.741-2.134 0-1.368.742-2.139.746-.777 2.09-.776 1.347 0 2.09.78.741.778.742 2.135m-1.753.01a3.3 3.3 0 0 0-.083-.81 1.5 1.5 0 0 0-.22-.522.8.8 0 0 0-.342-.284 1.1 1.1 0 0 0-.434-.083q-.23 0-.415.074a.8.8 0 0 0-.342.268 1.5 1.5 0 0 0-.235.523 3.3 3.3 0 0 0-.088.835q0 .503.083.815.083.308.215.493.136.19.342.278.205.088.454.088.205 0 .415-.088a.77.77 0 0 0 .342-.263q.152-.21.23-.503.078-.298.078-.82m10.83-2.753L21.617 11h-1.816l-.962-3.545L17.872 11h-1.816l-1.587-5.483h1.797l.84 3.628 1.04-3.628h1.508l.982 3.628.825-3.628z'/%3E%3C/svg%3E")}
.ev-fancy{background-image:url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='15' height='15' fill='none'%3E%3Crect width='15' height='15' fill='%230A92A5' rx='4'/%3E%3Cpath fill='%23C5F6EE' d='m6.26 12.5.907-4.377h2.849l.255-1.246H7.422l.652-3.116h3.67L12 2.5H6.6q-.68 0-1.19.428-.51.427-.667 1.137L3 12.5z'/%3E%3C/svg%3E")}
.ev-fancy.in-play{background-image:url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='30' height='15' fill='none'%3E%3Cpath fill='%2360BA1E' d='M0 4a4 4 0 0 1 4-4h11v15H4a4 4 0 0 1-4-4z'/%3E%3Cpath fill='%23C5F6C7' fill-rule='evenodd' d='M7.5 11.923q1.601 0 2.724-1.128a3.71 3.71 0 0 0 1.123-2.718q0-1.59-1.123-2.705Q9.102 4.256 7.5 4.256q-1.601 0-2.724 1.116-1.124 1.115-1.123 2.705 0 1.59 1.123 2.718T7.5 11.923m0-8.77q2.066.001 3.512 1.45 1.446 1.447 1.446 3.474 0 2.026-1.446 3.474T7.5 13t-3.512-1.449q-1.446-1.448-1.446-3.474t1.446-3.474Q5.434 3.154 7.5 3.154m.284 2.206v2.872l2.195 1.282-.413.666-2.608-1.538V5.359zM5.229 2.82 2.697 4.923 2 4.103 4.53 2zM13 4.103l-.697.846-2.53-2.129.696-.82z' clip-rule='evenodd'/%3E%3Cpath fill='%230A92A5' d='M15 0h11a4 4 0 0 1 4 4v7a4 4 0 0 1-4 4H15z'/%3E%3Cpath fill='%23C5F6EE' d='m21.26 12.5.907-4.377h2.849l.255-1.246h-2.849l.652-3.116h3.67L27 2.5h-5.4q-.68 0-1.19.428-.51.427-.667 1.137L18 12.5z'/%3E%3C/svg%3E")}
.ev-bookmaker{background-image:url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='15' height='15' fill='none'%3E%3Crect width='15' height='15' fill='%23226BC3' rx='4'/%3E%3Cpath fill='%23CAFCFF' d='M9.29 12q.657 0 1.15-.385.492-.384.643-1.023l.493-2.244a.65.65 0 0 0-.061-.496.86.86 0 0 0-.35-.352q.275-.104.5-.339.226-.234.294-.496l.493-2.256q.15-.639-.17-1.024Q11.958 3 11.288 3h-6.79L2.5 12zM8.742 6.94H6.771l.63-2.804h1.971zm-.876 3.94H5.895l.63-2.818h1.971z'/%3E%3C/svg%3E")}
.ev-bookmaker.in-play{background-image:url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='30' height='15' fill='none'%3E%3Cpath fill='%2360BA1E' d='M0 4a4 4 0 0 1 4-4h11v15H4a4 4 0 0 1-4-4z'/%3E%3Cpath fill='%23C5F6C7' fill-rule='evenodd' d='M7.5 11.923q1.601 0 2.724-1.128a3.71 3.71 0 0 0 1.123-2.718q0-1.59-1.123-2.705Q9.102 4.256 7.5 4.256q-1.601 0-2.724 1.116-1.124 1.115-1.123 2.705 0 1.59 1.123 2.718T7.5 11.923m0-8.77q2.066.001 3.512 1.45 1.446 1.447 1.446 3.474 0 2.026-1.446 3.474T7.5 13t-3.512-1.449q-1.446-1.448-1.446-3.474t1.446-3.474Q5.434 3.154 7.5 3.154m.284 2.206v2.872l2.195 1.282-.413.666-2.608-1.538V5.359zM5.229 2.82 2.697 4.923 2 4.103 4.53 2zM13 4.103l-.697.846-2.53-2.129.696-.82z' clip-rule='evenodd'/%3E%3Cpath fill='%23226BC3' d='M15 0h11a4 4 0 0 1 4 4v7a4 4 0 0 1-4 4H15z'/%3E%3Cpath fill='%23CAFCFF' d='M24.29 12q.657 0 1.15-.385.492-.384.643-1.023l.493-2.244a.65.65 0 0 0-.061-.496.86.86 0 0 0-.35-.352q.275-.104.5-.339.226-.234.294-.496l.493-2.256q.15-.639-.17-1.024Q26.958 3 26.288 3h-6.79L17.5 12zm-.548-5.061h-1.97l.63-2.804h1.97zm-.876 3.94h-1.971l.63-2.818h1.971z'/%3E%3C/svg%3E")}
.ev-premium{background-image:url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='15' height='15' fill='none'%3E%3Crect width='15' height='15' fill='%23E4550F' rx='4'/%3E%3Cpath fill='%23FCEDC0' d='m5.649 12.084.63-2.87 3.627.013q.657 0 1.15-.392a1.8 1.8 0 0 0 .643-1.042l.753-3.441q.15-.651-.17-1.043-.323-.392-.993-.392h-6.79L2.5 12.084zm2.847-4.012H6.525L7.4 4.073h1.971z'/%3E%3C/svg%3E")}

/* ---- "E" tag (simulated / e-sport event): dark blue slanted box with the E glyph + the sport name ---- */
.virtual-tag{display:flex;align-items:center;justify-content:center;height:15px;margin-right:3px;padding:0;border:1px solid #1f5172;border-radius:3px;overflow:hidden;background:none;color:#1f5172;font-size:9px;font-weight:700;line-height:120%}
.virtual-tag b{display:flex;align-items:center;justify-content:center;align-self:stretch;width:20px;margin:0;padding:0;background:#1f5172;clip-path:polygon(-100% -100%,100% 0,79% 100%,0 100%)}
.virtual-tag b svg{width:8px;height:8px;margin:-1px 0 0 -3px;fill:#fff}
.virtual-tag span{padding-right:2px}

/* ---- pin (Multi Markets): thin grey-blue ring with the pin glyph ---- */
.row-pin{width:25px;height:25px;padding:2px;border:1px solid #7e97a7;background:none;color:#7e97a7}
.row-pin svg{width:18px;height:18px;fill:currentColor}
.row-pin.pinned{background:#2789ce;border-color:#2789ce;color:#fff}
.row-pin.pinned svg{fill:#fff}

/* ---- score / "v" between the team names: part of the name (same colour and weight), like the reference ---- */
.match-name .score{margin:0;color:inherit;font-weight:inherit}

/* ---- desktop rows keep their odds columns; only the status line uses the new icons ---- */
.match-meta{gap:0}
.match-status{margin:0 3px 0 0}

/* ---- phones: the reference row (white, 6px padding, dot at the left of the name, 1px #eee line between rows) ---- */
@media(max-width:700px){
    .ev-ico{width:calc(15 * var(--u));height:calc(15 * var(--u));margin-right:calc(3 * var(--u))}
    .ev-low{width:calc(25 * var(--u))}
    .ev-fancy.in-play,.ev-bookmaker.in-play{width:calc(30 * var(--u))}
    .match-list{background:#eee}
    .match-row{display:flex;align-items:center;justify-content:center;min-height:0;margin-bottom:calc(1 * var(--u));padding:calc(6 * var(--u));border:0;background:#fff}
    .match-row:hover{background:#fff}
    .match-info{position:relative;display:block;flex:1 1 0%;min-width:0;padding:0 calc(6 * var(--u)) 0 calc(17 * var(--u))}
    .match-meta{display:flex;align-items:center;height:calc(15 * var(--u));min-height:0;margin-bottom:calc(5 * var(--u));padding:0;gap:0;overflow:visible;font-size:calc(12 * var(--u));line-height:120%}
    .match-status,.match-status.live{margin:0 calc(3 * var(--u)) 0 0;color:#787878;font-size:calc(12 * var(--u));font-weight:500;line-height:120%;white-space:nowrap}
    .match-name{display:block;margin:0 0 0 calc(1 * var(--u))}
    .match-name strong{display:block;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;color:#2789ce;font-size:calc(15 * var(--u));font-weight:700;line-height:130%}
    .match-info:hover .match-name strong{text-decoration:none}
    .dot,.dot.live{position:absolute;left:0;bottom:9%;width:calc(11 * var(--u));height:calc(11 * var(--u));border:0;border-radius:9999px;background:#c5d0d8;box-shadow:inset 0 0 0 calc(1 * var(--u)) rgba(0,0,0,.25)}
    .dot.live{background:#6bbd11}
    .virtual-tag{height:calc(15 * var(--u));margin-right:calc(3 * var(--u));border-radius:calc(3 * var(--u));font-size:calc(9 * var(--u))}
    .virtual-tag b{width:calc(20 * var(--u))}
    .virtual-tag b svg{width:calc(8 * var(--u));height:calc(8 * var(--u));margin:calc(-1 * var(--u)) 0 0 calc(-3 * var(--u))}
    .virtual-tag span{padding-right:calc(2 * var(--u))}
    .row-pin{flex:0 0 auto;width:calc(25 * var(--u));height:calc(25 * var(--u));padding:calc(2 * var(--u));border-width:1px}
    .row-pin svg{width:calc(18 * var(--u));height:calc(18 * var(--u))}
}
/* ---- sport strip icons: the reference's glyphs (cricket, soccer, tennis, e-soccer, basketball), 23px on phones ---- */
.sport-icon{display:inline-flex;flex:0 0 auto}
.sport-icon svg{display:block;width:100%;height:100%;fill:currentColor}
@media(max-width:700px){.sport-icon{width:calc(23 * var(--u));height:calc(23 * var(--u));margin-right:calc(3 * var(--u))}}

/* ---- desktop rows (reference desktop list): time text first (green + bold when In-Play), then the E tag, then the
   icons at 16px; 8px dot with a thin ring; small 16px pin; collapse button on each sport bar ---- */
@media(min-width:701px){
    .ev-ico{width:16px;height:16px;margin-right:4px}
    .ev-low{width:25px}
    .ev-fancy.in-play,.ev-bookmaker.in-play{width:30px}
    .match-meta{height:16px;min-height:16px;padding-left:13px;line-height:120%}
    .match-status{order:-2;margin:0 4px 0 0;color:#777;font-size:12px;font-weight:400;line-height:120%}
    .match-status.live{color:#508d0e;font-weight:700}
    .virtual-tag{order:-1;height:16px;margin-right:4px;font-weight:400}
    .match-name{margin:0 0 2px;gap:5px}
    .match-name strong{font-size:12px;font-weight:700;line-height:120%;color:#2789ce}
    .dot,.dot.live{width:8px;height:8px;border:1px solid rgba(51,51,51,.4);background:#c5d0d7}
    .dot.live{background:#6bbd11}
    .row-pin{width:16px;height:16px;padding:2px 1px 1px;border:1px solid #c5d0d7;background:none;color:#7e97a7}
    .row-pin svg{width:12px;height:12px}
    .row-pin:hover{border-color:#c5d0d7;color:#8eea2a}
    .row-pin.pinned,.row-pin.pinned:hover{background:#2789ce;border-color:#2789ce;color:#fff}
    .list-title{position:relative}
    .list-collapse{position:absolute;right:10px;top:50%;width:11px;height:11px;margin-top:-6px;padding:0;border:1px solid #fff;border-radius:1px;background:none;cursor:pointer}
    .list-collapse::before{content:'';position:absolute;left:2px;right:2px;top:50%;height:1px;margin-top:-.5px;background:#fff}
    .list-collapse[aria-expanded="false"]::after{content:'';position:absolute;top:2px;bottom:2px;left:50%;width:1px;margin-left:-.5px;background:#fff}
    .match-list.collapsed>:not(.list-title){display:none}
}
@media(max-width:700px){.list-collapse{display:none}}

/* ================= Match page: Fancy Bet / Premium header + filter bar, from the reference's full-market page =================
   Active tab: gradient (Fancy teal 0deg #097c8c -> #0b90a3, Premium orange 0deg #e4550f -> #ee6a29), 14px bold white,
   followed by the lighter 40px (i) block: diagonal left boundary, slanted right edge with a rounded top corner.
   Inactive tab: #243a48, white 80%, slanted round-topped edges on both sides. Filter bar: #097e8e / #e65812, 12px bold,
   white 40% dividers, the selected item a white pill (text #546774 / #a34005). #markets raises these over the older rules. */
#markets .fm-sb{margin-top:0;padding-top:calc(20 * var(--u))}
#markets .fm-sb-tabs{position:relative;display:flex;align-items:stretch;height:calc(30 * var(--u));background:none}

/* pin block: dark, the pin in a 22px circle, diagonal right edge into the first tab */
#markets .fm-sb-tabs .fm-sb-pin{position:relative;z-index:2;flex:0 0 calc(37 * var(--u));justify-content:flex-start;margin:0;padding-left:calc(6 * var(--u));border-radius:0;background:#243a48;clip-path:polygon(0 0,calc(29 * var(--u)) 0,calc(37 * var(--u)) 100%,0 100%)}
#markets .fm-sb-tabs .fm-sb-pin svg{width:calc(22 * var(--u));height:calc(22 * var(--u));padding:calc(2 * var(--u));border-radius:50%;background:#3b5160;fill:#c5d0d7}

/* tabs */
#markets .fm-sb-tabs .fm-sb-tab{position:relative;display:flex;align-items:stretch;height:100%;margin:0;font-size:calc(14 * var(--u));font-weight:700;line-height:1;color:#fff}
#markets .fm-sb-tabs .fm-sb-tab span{display:flex;align-items:center;gap:calc(4 * var(--u));margin:0;padding:0 calc(8 * var(--u)) 0 calc(7 * var(--u));border-radius:0;clip-path:none;background:#243a48;white-space:nowrap}
#markets .fm-sb-tabs.has-fancy .fm-sb-tab.fancy{margin-left:calc(-8 * var(--u))}
#markets .fm-sb-tabs.has-fancy .fm-sb-tab.fancy span{padding-left:calc(15 * var(--u))}
#markets .fm-sb-tabs:not(.has-fancy) .fm-sb-tab.premium span{padding-left:calc(7 * var(--u));border-top-left-radius:calc(5 * var(--u))}
#markets .fm-sb-tabs .fm-sb-tab.fancy.active span{background:linear-gradient(0deg,#097c8c,#0b90a3)}
#markets .fm-sb-tabs .fm-sb-tab.premium.active span{background:linear-gradient(0deg,#e4550f,#ee6a29)}
#markets .fm-sb-tabs .fm-sb-clock{width:calc(18 * var(--u));height:calc(18 * var(--u));border-radius:calc(4 * var(--u))}
#markets .fm-sb-tabs .fm-sb-clock svg{width:calc(13 * var(--u));height:calc(13 * var(--u))}

/* the lighter (i) block of the active tab */
#markets .fm-sb-tabs .fm-sb-tab i{display:none}
#markets .fm-sb-tabs .fm-sb-tab.active i{position:relative;display:flex;align-items:center;justify-content:center;width:calc(40 * var(--u));margin-left:calc(-5 * var(--u));padding:0;clip-path:none;background:linear-gradient(0deg,#097c8c,#0b90a3) no-repeat left/22% 100%}
#markets .fm-sb-tabs .fm-sb-tab.premium.active i{background:linear-gradient(0deg,#e4550f,#ee6a29) no-repeat left/22% 100%}
#markets .fm-sb-tabs .fm-sb-tab.active i::before{content:'';position:absolute;inset:0;background:linear-gradient(180deg,#0cadb2,#0d9fa7);clip-path:polygon(9% 0,68% 0,74% 3%,77% 8%,79% 14%,100% 100%,19% 100%)}
#markets .fm-sb-tabs .fm-sb-tab.premium.active i::before{background:linear-gradient(180deg,#f59a39,#ee791d)}
#markets .fm-sb-tabs .fm-sb-tab.active i svg{position:relative;width:calc(15 * var(--u));height:calc(15 * var(--u));margin-left:calc(2 * var(--u));color:#fff}

/* the inactive tab: slanted, round-topped edges (18px each side), tucked 7px under the active one */
#markets .fm-sb-tabs.has-fancy .fm-sb-tab:not(.active){margin-left:calc(-7 * var(--u));color:rgba(255,255,255,.8)}
#markets .fm-sb-tabs.has-fancy .fm-sb-tab.fancy:not(.active){margin-left:calc(-8 * var(--u))}
#markets .fm-sb-tabs.has-fancy .fm-sb-tab:not(.active) span{padding:0 calc(18 * var(--u));background:#243a48;
    clip-path:polygon(0 100%,calc(9 * var(--u)) 16%,calc(11 * var(--u)) 6%,calc(14 * var(--u)) 1%,calc(18 * var(--u)) 0,calc(100% - 18 * var(--u)) 0,calc(100% - 14 * var(--u)) 1%,calc(100% - 11 * var(--u)) 6%,calc(100% - 9 * var(--u)) 16%,100% 100%)}
#markets .fm-sb-tabs .fm-new{right:calc(-5 * var(--u));top:calc(-9 * var(--u))}

/* filter bar */
#markets .fm-sb-filter{display:flex;align-items:center;height:auto;gap:0;padding:calc(4 * var(--u));background:#e65812;line-height:1}
#markets .fm-sb-filter.fancy{background:#097e8e}
#markets .fm-sb-filter button{flex:0 0 auto;height:auto;margin:0;padding:calc(6 * var(--u)) calc(10 * var(--u));border:0;border-right:1px solid rgba(255,255,255,.4);border-radius:0;background:none;color:#fff;font-size:calc(12 * var(--u));font-weight:700;line-height:1;white-space:nowrap}
#markets .fm-sb-filter button.active{margin-right:1px;border-right:0;border-radius:calc(5 * var(--u));background:#fff;color:#a34005}
#markets .fm-sb-filter.fancy button.active{color:#546774}

/* Match page with no open market: no empty pill strip; the Premium header sits 20px under the scoreboard like the reference. */
.fm-pills[hidden]{display:none}