/* Big Mac Index Widget — mobile-first, self-contained, namespaced under .bmi-widget */ .bmi-widget { --bmi-fg: #1a1a1a; --bmi-muted: #6b7280; --bmi-border: #e5e7eb; --bmi-bg: #ffffff; --bmi-bg-alt: #f9fafb; --bmi-accent: #da291c; /* McDonald's red */ --bmi-over: #c0392b; /* more expensive than base country */ --bmi-over-bg: #fdecea; --bmi-under: #1e8449; /* cheaper than base country */ --bmi-under-bg: #e9f7ef; --bmi-radius: 12px; box-sizing: border-box; width: 100%; max-width: 100%; margin: 0 auto; color: var(--bmi-fg); font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 15px; line-height: 1.45; -webkit-text-size-adjust: 100%; } .bmi-widget *, .bmi-widget *::before, .bmi-widget *::after { box-sizing: border-box; } .bmi-loading, .bmi-error { padding: 24px 16px; text-align: center; color: var(--bmi-muted); border: 1px solid var(--bmi-border); border-radius: var(--bmi-radius); background: var(--bmi-bg-alt); } .bmi-error { color: var(--bmi-over); } .bmi-head { margin: 0 0 12px; } .bmi-title { margin: 0 0 2px; font-size: 1.35rem; font-weight: 800; letter-spacing: -0.01em; } .bmi-sub { margin: 0; font-size: 0.82rem; color: var(--bmi-muted); } /* Summary stat cards */ .bmi-stats { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; margin: 0 0 14px; } .bmi-stat { padding: 12px 10px; text-align: center; background: var(--bmi-bg-alt); border: 1px solid var(--bmi-border); border-radius: var(--bmi-radius); min-width: 0; } .bmi-stat-top { font-size: 0.85rem; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .bmi-stat-top .bmi-flag { font-size: 1rem; } .bmi-stat-value { margin: 4px 0 2px; font-size: 1.5rem; font-weight: 800; letter-spacing: -0.02em; color: var(--bmi-fg); } .bmi-stat-sub { font-size: 0.72rem; line-height: 1.3; color: var(--bmi-muted); } .bmi-stat-label { margin-top: 6px; font-size: 0.66rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.06em; color: var(--bmi-muted); } @media (max-width: 420px) { .bmi-stats { gap: 6px; } .bmi-stat { padding: 10px 6px; } .bmi-stat-value { font-size: 1.15rem; } .bmi-stat-top { font-size: 0.78rem; } } /* World map */ .bmi-map { margin: 0 0 16px; } .bmi-map-canvas { width: 100%; height: 440px; background: var(--bmi-bg-alt); border: 1px solid var(--bmi-border); border-radius: var(--bmi-radius); overflow: hidden; } .bmi-legend { display: flex; align-items: center; gap: 8px; margin-top: 8px; font-size: 0.72rem; color: var(--bmi-muted); } .bmi-legend-bar { flex: 1 1 auto; height: 10px; border-radius: 5px; background: linear-gradient(to right, rgb(183, 224, 160), rgb(247, 233, 162), rgb(240, 168, 160)); } .bmi-legend-min, .bmi-legend-max { font-weight: 600; color: var(--bmi-fg); } .bmi-legend-cap { text-transform: uppercase; letter-spacing: 0.05em; font-weight: 700; } @media (max-width: 640px) { .bmi-map-canvas { height: 300px; } .bmi-legend-cap { display: none; } } /* Map hover card — the jsVectorMap tooltip is appended to , so these bmi-prefixed selectors live outside the .bmi-widget namespace on purpose. */ .bmi-maptip-name { font-weight: 700; white-space: nowrap; } .bmi-maptip-price { margin-top: 2px; font-size: 1.15rem; font-weight: 800; } .bmi-maptip-cmp { margin-top: 1px; font-size: 0.78rem; opacity: 0.85; } /* Zoom buttons: bottom-left of the map, 2x the library's default size (15->30px) */ .bmi-widget .jvm-zoom-btn { width: 30px; height: 30px; padding: 0; line-height: 30px; text-align: center; font-size: 20px; left: 10px; } .bmi-widget .jvm-zoom-btn.jvm-zoomin { top: auto; bottom: 48px; } .bmi-widget .jvm-zoom-btn.jvm-zoomout { top: auto; bottom: 10px; } /* Controls */ .bmi-controls { display: flex; flex-wrap: wrap; gap: 8px; margin: 0 0 12px; } .bmi-controls > * { flex: 1 1 140px; min-width: 0; } .bmi-search, .bmi-select { width: 100%; padding: 10px 12px; font-size: 16px; /* >=16px stops iOS zoom-on-focus */ color: var(--bmi-fg); background: var(--bmi-bg); border: 1px solid var(--bmi-border); border-radius: 10px; appearance: none; -webkit-appearance: none; } .bmi-search:focus, .bmi-select:focus { outline: 2px solid var(--bmi-accent); outline-offset: 1px; } .bmi-select { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath fill='%236b7280' d='M1 1l5 5 5-5'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 12px center; padding-right: 32px; } .bmi-sort-mobile { display: none; } /* Table */ .bmi-table-wrap { width: 100%; } .bmi-table { width: 100%; border-collapse: collapse; font-variant-numeric: tabular-nums; } .bmi-table th, .bmi-table td { padding: 10px 12px; text-align: right; border-bottom: 1px solid var(--bmi-border); white-space: nowrap; } .bmi-table th:nth-child(1), .bmi-table td:nth-child(1) { text-align: center; width: 1%; color: var(--bmi-muted); } .bmi-table th:nth-child(2), .bmi-table td:nth-child(2) { text-align: left; white-space: normal; } .bmi-table thead th { position: sticky; top: 0; background: var(--bmi-bg); font-size: 0.72rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.03em; color: var(--bmi-muted); cursor: pointer; user-select: none; border-bottom: 2px solid var(--bmi-border); } .bmi-table thead th:hover { color: var(--bmi-fg); } .bmi-table thead th .bmi-arrow { font-size: 0.7em; opacity: 0; margin-left: 3px; } .bmi-table thead th[aria-sort="ascending"] .bmi-arrow, .bmi-table thead th[aria-sort="descending"] .bmi-arrow { opacity: 1; } .bmi-table thead th[aria-sort] { color: var(--bmi-fg); } .bmi-table tbody tr:nth-child(even) { background: var(--bmi-bg-alt); } .bmi-flag { margin-right: 7px; } .bmi-country { font-weight: 600; } .bmi-local { color: var(--bmi-muted); font-size: 0.85rem; } .bmi-val { display: inline-block; min-width: 64px; padding: 2px 8px; border-radius: 999px; font-weight: 700; font-size: 0.85rem; } .bmi-val.over { color: var(--bmi-over); background: var(--bmi-over-bg); } .bmi-val.under { color: var(--bmi-under); background: var(--bmi-under-bg); } .bmi-val.zero { color: var(--bmi-muted); background: var(--bmi-bg-alt); } .bmi-foot { margin: 10px 2px 0; font-size: 0.74rem; color: var(--bmi-muted); } .bmi-foot a { color: inherit; } .bmi-empty { padding: 20px; text-align: center; color: var(--bmi-muted); } /* ---- Mobile: collapse the table into cards (< 640px) ---- */ @media (max-width: 640px) { .bmi-sort-mobile { display: block; } .bmi-table thead { display: none; } .bmi-table, .bmi-table tbody, .bmi-table tr, .bmi-table td { display: block; width: 100%; } .bmi-table tr { position: relative; margin: 0 0 10px; padding: 12px 14px 12px 46px; border: 1px solid var(--bmi-border); border-radius: var(--bmi-radius); background: var(--bmi-bg) !important; } .bmi-table td { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; padding: 4px 0; border: 0; text-align: right; white-space: normal; } .bmi-table td::before { content: attr(data-label); font-size: 0.72rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.03em; color: var(--bmi-muted); text-align: left; } /* Rank: badge in the top-left corner of the card */ .bmi-table td:nth-child(1) { position: absolute; left: 12px; top: 14px; width: 26px; height: 26px; padding: 0; display: flex; align-items: center; justify-content: center; font-weight: 700; font-size: 0.8rem; color: #fff; background: var(--bmi-accent); border-radius: 50%; } .bmi-table td:nth-child(1)::before { content: ""; } /* Country name: full-width title, no label */ .bmi-table td:nth-child(2) { font-size: 1.05rem; padding-bottom: 8px; margin-bottom: 4px; border-bottom: 1px solid var(--bmi-border); } .bmi-table td:nth-child(2)::before { content: ""; } }