/* Embeddable price widgets: the roadside sign, standalone, sized by the host page's frame. */
@font-face { font-family: 'Sign'; src: url(/assets/fonts/barlow-c-700.woff2) format('woff2'); font-weight: 700; font-display: swap; }
@font-face { font-family: 'Sign'; src: url(/assets/fonts/barlow-c-600.woff2) format('woff2'); font-weight: 600; font-display: swap; }
@font-face { font-family: 'Kufi'; src: url(/assets/fonts/kufi-ar.woff2) format('woff2'); font-weight: 600 700; font-display: swap; unicode-range: U+0600-06FF, U+0750-077F, U+08A0-08FF, U+FB50-FDFF, U+FE70-FEFF, U+200C-200F; }
@font-face { font-family: 'Text'; src: url(/assets/fonts/sans-ar.woff2) format('woff2'); font-weight: 400 600; font-display: swap; unicode-range: U+0600-06FF, U+0750-077F, U+08A0-08FF, U+FB50-FDFF, U+FE70-FEFF, U+200C-200F; }
@font-face { font-family: 'Text'; src: url(/assets/fonts/sans-lat.woff2) format('woff2'); font-weight: 400 600; font-display: swap; unicode-range: U+0000-00FF, U+2000-206F; }
:root {
  --sign: #141414; --panel: #1c1d1c; --sign-line: #2c2e2d; --sub: #b4b9b5; --brand: #c81f18; --ink: #151616; --ink-2: #4b504d; --link: #a3170f;
  --up-lit: #ff8277; --down-lit: #63d897; --line: #e6e8e5;
  --f-petrol: #0a7d3e; --f-premium: #c81f18; --f-diesel: #e8a500; --f-kerosene: #6a4aa5; --f-lpg: #1f5fbf; --f-cng: #0f7f86; --f-fueloil: #5b4636; --f-other: #5a605c; --f-crude: #2c2e2d;
  --f-text: 'Text', 'Segoe UI', Tahoma, sans-serif; --f-head: 'Kufi', 'Text', 'Segoe UI', Tahoma, sans-serif; --f-num: 'Sign', 'Arial Narrow', sans-serif;
}
* { box-sizing: border-box; }
html, body { margin: 0; background: transparent; }
body { font: 400 14px/1.5 var(--f-text); color: var(--ink); -webkit-text-size-adjust: 100%; }
::selection { background: var(--brand); color: #fff; }
.em { max-width: 640px; }
.em-sign { margin: 0; background: var(--sign); color: #fff; border-radius: 4px; overflow: hidden; }
.em-head { display: flex; align-items: center; gap: 8px; background: var(--brand); padding: 10px 14px; font: 700 17px/1.4 var(--f-head); }
.em-flag { width: 24px; height: 18px; border-radius: 2px; flex: none; }
.em-rows { list-style: none; margin: 0; padding: 8px; display: grid; gap: 8px; }
.em-rows li { display: grid; grid-template-columns: minmax(0, 40%) minmax(0, 1fr) auto; align-items: stretch; min-height: 56px; background: var(--panel); border: 1px solid var(--sign-line); border-radius: 3px; overflow: hidden; }
[data-fuel="petrol"] { --fc: var(--f-petrol); } [data-fuel="premium"] { --fc: var(--f-premium); } [data-fuel="diesel"] { --fc: var(--f-diesel); }
[data-fuel="kerosene"] { --fc: var(--f-kerosene); } [data-fuel="lpg"] { --fc: var(--f-lpg); } [data-fuel="cng"] { --fc: var(--f-cng); }
[data-fuel="fueloil"] { --fc: var(--f-fueloil); } [data-fuel="crude"] { --fc: var(--f-crude); }
.em-tag { display: flex; flex-direction: column; justify-content: center; padding: 6px 12px; background: var(--fc, var(--f-other)); font: 600 15px/1.35 var(--f-text); min-width: 0; overflow-wrap: anywhere; }
.em-tag small { font-weight: 400; font-size: 12px; opacity: .92; }
[data-fuel="diesel"] .em-tag { color: #1d1500; }
.em-win { display: flex; flex-direction: column; align-items: flex-end; justify-content: center; padding: 6px 12px; direction: ltr; text-align: right; min-width: 0; }
.em-win b { font: 700 36px/1 var(--f-num); font-variant-numeric: tabular-nums; letter-spacing: .01em; }
.em-win small { direction: rtl; font-size: 12px; color: var(--sub); line-height: 1.4; margin-top: 2px; }
.em-chg { display: flex; align-items: center; gap: 3px; padding: 0 12px 0 8px; font: 600 16px/1 var(--f-num); direction: ltr; white-space: nowrap; }
.em-chg svg { width: 10px; height: 10px; }
.em-up { color: var(--up-lit); } .em-down { color: var(--down-lit); } .em-flat { color: var(--sub); }
.em-meta, .em-credit { margin: 0; background: #fff; color: var(--ink-2); padding: 8px 14px; display: flex; flex-wrap: wrap; justify-content: space-between; gap: 2px 12px; }
.em-meta { border-top: 4px solid var(--brand); }
.em-sign { border-radius: 4px 4px 0 0; }
.em-credit { border-top: 1px solid var(--line); border-radius: 0 0 4px 4px; }
.em-credit a { color: var(--link); font-weight: 600; text-underline-offset: 3px; }
.em-credit a:hover { color: var(--ink); }
.em-credit a:focus-visible { outline: 2px solid var(--ink); outline-offset: 2px; }
/* the Arab table */
.em-scroll { max-height: 440px; overflow-y: auto; background: #fff; color: var(--ink); scrollbar-color: #b9beba transparent; }
.em-table table { width: 100%; border-collapse: collapse; font-size: 14px; }
.em-table th, .em-table td { padding: 6px 12px; text-align: start; border-bottom: 1px solid var(--line); white-space: nowrap; }
.em-table thead th { position: sticky; top: 0; background: #f7f8f6; color: var(--ink-2); font-weight: 600; z-index: 1; }
.em-table tbody th { font-weight: 600; display: flex; align-items: center; gap: 8px; }
.em-table td b { font: 700 20px/1.2 var(--f-num); font-variant-numeric: tabular-nums; }
.em-table td small { color: var(--ink-2); font-size: 12px; }
.em-usd { font: 600 18px/1.2 var(--f-num); font-variant-numeric: tabular-nums; direction: ltr; text-align: right !important; }
.em-table + .em-credit { border-top: 4px solid var(--brand); }
@media (max-width: 380px) {
  .em-rows li { grid-template-columns: minmax(0, 42%) minmax(0, 1fr); grid-template-areas: "t w" "t c"; }
  .em-tag { grid-area: t; } .em-win { grid-area: w; padding-bottom: 0; } .em-chg { grid-area: c; justify-content: flex-end; padding: 2px 12px 6px; font-size: 14px; }
  .em-win b { font-size: 28px; }
  .em-head { font-size: 15px; }
  .em-table th, .em-table td { padding: 6px 8px; }
}