/* For-webmasters iframe embed styles.
   Self-contained, light-only. Mirrors the SPA's stacked Moneyway and
   Dropping-Odds cell design (mw-odds-stack / do-cell) but compact:
   tighter padding, smaller font, no theme variables. Designed to look
   clean inside any third-party host page. */

:root {
    --fw-bg:        #ffffff;
    --fw-fg:        #1f2937;
    --fw-muted:     #64748b;
    --fw-border:    #e5e7eb;
    --fw-row-alt:   #f8fafc;
    --fw-row-hover: #eff6ff;
    --fw-head-bg:   #f1f5f9;
    --fw-link:      #2563eb;
    --fw-fav:       rgb(0, 162, 232);
    --fw-mw-odds-bg: rgba(127, 127, 127, 0.12);
}

* { box-sizing: border-box; }

html, body {
    margin: 0;
    padding: 0;
    background: var(--fw-bg);
    color: var(--fw-fg);
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
                 Helvetica, Arial, sans-serif;
    font-size: 13px;
    line-height: 1.35;
}

a { color: var(--fw-link); text-decoration: none; }
a:hover { text-decoration: underline; }

.fw-wrap { padding: 6px 8px 12px; }

.fw-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 8px;
    margin-bottom: 6px;
}
.fw-brand {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    text-decoration: none;
    color: inherit;
    font-weight: 600;
}
.fw-brand img { height: 26px; width: auto; display: block; }
.fw-controls { display: inline-flex; gap: 6px; flex-wrap: wrap; }
.fw-controls select {
    padding: 3px 6px;
    font-size: 12px;
    border: 1px solid var(--fw-border);
    border-radius: 4px;
    background: #fff;
    color: var(--fw-fg);
}

.fw-table-wrap { overflow-x: auto; -webkit-overflow-scrolling: touch; }

table.fw-tbl {
    width: 100%;
    border-collapse: collapse;
    font-size: 12px;
    min-width: 560px;
}
.fw-tbl th, .fw-tbl td {
    padding: 3px 6px;
    border-bottom: 1px solid var(--fw-border);
    text-align: left;
    vertical-align: middle;
}
.fw-tbl thead th {
    background: var(--fw-head-bg);
    font-weight: 600;
    color: #334155;
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: 0.03em;
}
.fw-tbl tbody tr:nth-child(even) { background: var(--fw-row-alt); }
.fw-tbl tbody tr:hover           { background: var(--fw-row-hover); }

/* ============================================================
   EVENT CELL — date + flag + league on top, "home — away" below.
   width:1% on desktop so it shrinks to content and odds sit right
   next to it; left-justified content inside.
   ============================================================ */
.fw-event { white-space: nowrap; max-width: 320px; }
.fw-event .ev-stack  { display: flex; flex-direction: column; gap: 1px; line-height: 1.2; min-width: 0; }
.fw-event .ev-top    { display: flex; align-items: center; gap: 5px; font-size: 10px; color: var(--fw-muted); min-width: 0; }
.fw-event .ev-date   { font-weight: 500; flex-shrink: 0; }
.fw-event .ev-top img { flex-shrink: 0; border-radius: 2px; }
.fw-event .ev-league { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0; flex: 1; }
.fw-event .ev-match  { font-size: 12px; color: var(--fw-fg); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0; font-weight: 600; }
.fw-event .ev-dash   { color: var(--fw-muted); font-weight: 400; margin: 0 2px; }

@media (min-width: 600px) {
    .fw-event { width: 1%; }
}

/* ============================================================
   MONEYWAY two-line cell — odds box on top, share box below.
   Mirrors the SPA's .mw-odds-stack / .mw-odds / .mw-share design.
   ============================================================ */
.fw-mw-td { padding: 2px 3px !important; min-width: 60px; }
.fw-mw-stack { display: flex; flex-direction: column; gap: 1px; min-width: 60px; }

.fw-mw-odds {
    text-align: center;
    border-radius: 3px 3px 0 0;
    padding: 3px 4px;
    font-weight: 700;
    font-size: 12px;
    background: var(--fw-mw-odds-bg);
    color: var(--fw-fg);
    line-height: 1.15;
    font-variant-numeric: tabular-nums;
}
.fw-mw-odds.fw-mw-fav { background: var(--fw-fav); color: #fff; }

.fw-mw-share {
    text-align: center;
    border-radius: 0 0 3px 3px;
    padding: 1px 3px 2px;
    line-height: 1.1;
    color: #0f172a;
}
.fw-mw-share .fw-mw-pct { display: block; font-size: 10px; font-weight: 700; }
.fw-mw-share .fw-mw-vol { display: block; font-size: 9px; opacity: 0.85; }

/* Graduated buckets — same thresholds as the SPA. */
.fw-mw-extreme   { background: #d40000; color: #fff; }
.fw-mw-very-high { background: #ef2b2b; color: #fff; }
.fw-mw-high      { background: #f97316; color: #fff; }
.fw-mw-mid-high  { background: #fb923c; color: #1f2937; }
.fw-mw-mid       { background: #fbbf24; color: #1f2937; }
.fw-mw-mid-low   { background: #fde047; color: #1f2937; }
.fw-mw-low       { background: #fef08a; color: #1f2937; }
.fw-mw-very-low  { background: #fef9c3; color: #1f2937; }
.fw-mw-none      { background: transparent; color: var(--fw-fg); }
.fw-mw-extreme   .fw-mw-vol,
.fw-mw-very-high .fw-mw-vol,
.fw-mw-high      .fw-mw-vol { opacity: 1; }

/* ============================================================
   DROPPING-ODDS cell — arrow + (open over current) box.
   Mirrors the SPA's .do-cell / .do-odds design.
   ============================================================ */
.fw-do-td { padding: 2px 3px !important; min-width: 60px; }
.fw-do-cell {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 3px;
}
.fw-do-arrow {
    font-size: 12px;
    line-height: 1;
    width: 12px;
    text-align: center;
    flex-shrink: 0;
}
.fw-do-arrow.up   { color: #16a34a; }
.fw-do-arrow.down { color: #dc2626; }
.fw-do-arrow.eq   { color: var(--fw-muted); font-weight: 700; }

.fw-do-odds {
    text-align: center;
    border-radius: 3px;
    padding: 2px 5px;
    font-weight: 600;
    min-width: 48px;
    line-height: 1.1;
    color: #0f172a;
    font-variant-numeric: tabular-nums;
}
.fw-do-odds .fw-do-open {
    display: block;
    font-size: 9px;
    opacity: 0.75;
    text-decoration: line-through;
    font-weight: 500;
}
.fw-do-odds .fw-do-current {
    display: block;
    font-size: 12px;
    font-weight: 700;
}

/* Legacy-matching color buckets (drop = price went down). */
.fw-do-drop-high { background: #dc2626; color: #fff; }
.fw-do-drop-mid  { background: #f97316; color: #fff; }
.fw-do-drop-low  { background: #9ca3af; color: #fff; }
.fw-do-rise-high { background: #16a34a; color: #fff; }
.fw-do-rise-mid  { background: rgb(98, 245, 10); color: #0f172a; }
.fw-do-rise-low  { background: #bbf7a4; color: #0f172a; }
.fw-do-eq        { background: transparent; color: var(--fw-fg); border: 1px solid var(--fw-border); }

/* ============================================================
   VOLUME / LINKS cell — £ amount on top, chart + bet icons below.
   width:1% so leftover horizontal space sits to the right of the table.
   ============================================================ */
.fw-vl {
    text-align: center;
    width: 1%;
    white-space: nowrap;
    padding: 2px 8px;
}
.fw-vl-stack {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 1px;
    line-height: 1.1;
}
.fw-vl-vol {
    font-weight: 600;
    font-size: 11px;
    color: var(--fw-link);
    font-variant-numeric: tabular-nums;
}
.fw-vl-links { display: inline-flex; align-items: center; gap: 4px; }
.fw-vl-links a {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    line-height: 0;
    opacity: 0.85;
}
.fw-vl-links a:hover { opacity: 1; }
.fw-vl-links img { width: 13px; height: 13px; display: block; }

/* ============================================================
   FOOTER
   ============================================================ */
.fw-foot {
    margin-top: 8px;
    text-align: center;
    font-size: 11px;
    color: var(--fw-muted);
}
.fw-foot a { color: var(--fw-link); }

/* ============================================================
   MOBILE
   ============================================================ */
@media (max-width: 480px) {
    .fw-tbl { font-size: 11px; min-width: 420px; }
    .fw-tbl th, .fw-tbl td { padding: 2px 3px; }
    .fw-event .ev-match { font-size: 11px; }
    .fw-mw-odds { font-size: 11px; padding: 2px 3px; }
    .fw-do-odds { padding: 2px 3px; min-width: 42px; }
    .fw-do-odds .fw-do-current { font-size: 11px; }
}