/* Shared bilingual market strips. Price arrows are semantic market indicators. */
:root{--oil-strip-height:130px}
body{padding-bottom:var(--oil-strip-height)}
.market-news-ticker{background:#1b1a17;border-bottom:1px solid #635436;color:#f5f5f7;font-size:13px}
.ticker-row{display:flex;align-items:center;gap:16px;min-height:44px}
.ticker-label{flex-shrink:0;font-weight:bold;color:#dfbf80;padding-block:10px;white-space:nowrap}
.ticker-window{flex:1;min-width:0;overflow:hidden;position:relative}
.ticker-track{display:flex;width:max-content;direction:ltr;animation:market-headlines 45s linear infinite;animation-play-state:paused}
.ticker-track.is-ready{animation-play-state:running}
.ticker-group{display:flex;align-items:center;flex-shrink:0;gap:32px;padding-inline-end:32px;white-space:nowrap}
.ticker-group a{display:inline-flex;align-items:center;min-height:40px;gap:12px}
.ticker-group a:before{content:'';width:4px;height:4px;border-radius:50%;background:#dfbf80;flex-shrink:0}
.ticker-group a:hover{color:#dfbf80}
.ticker-row:hover .ticker-track,.ticker-row:focus-within .ticker-track,.ticker-track.is-paused{animation-play-state:paused}
.ticker-pause{flex-shrink:0;color:#dfbf80;background:transparent;border:1px solid #635436;border-radius:6px;padding:6px 10px;min-height:34px;font:inherit;cursor:pointer;white-space:nowrap}
.market-news-ticker.is-manual .ticker-window{overflow-x:auto}
.market-news-ticker.is-manual .ticker-track{animation:none}
.market-news-ticker.is-manual .ticker-copy{display:none}
@keyframes market-headlines{to{transform:translateX(-50%)}}
.ticker-window{direction:ltr}.ticker-track{animation-duration:32s}
.oil-price-ticker{position:fixed;bottom:0;inset-inline:0;z-index:50;background:rgba(15,16,17,.98);border-top:1px solid #80704d;box-shadow:0 -5px 22px #0005;padding:10px 0 calc(10px + env(safe-area-inset-bottom,0px));color:#f5f5f7;backdrop-filter:blur(16px)}
.oil-ticker-inner{display:flex;align-items:center;gap:26px}
.oil-ticker-heading{display:flex;flex-direction:column;gap:2px;max-width:220px;flex-shrink:0}
.oil-ticker-heading strong{color:#dfbf80;font-size:14px}
.oil-ticker-heading>span{font-size:11px;color:#b5b5b9;line-height:1.5}
.oil-quotes{display:flex;flex:1;gap:24px;min-width:0}
.oil-quote{display:grid;grid-template-columns:auto auto;align-items:baseline;gap:2px 14px;flex:1;min-width:0;border-inline-start:1px solid #343438;padding-inline-start:22px;font-variant-numeric:tabular-nums}
.quote-name{font-size:12px;color:#e4dfd5}.quote-value{font-size:20px;font-weight:bold;white-space:nowrap;text-align:end}.quote-value small{font-size:10px;font-weight:normal;color:#b5b5b9}.quote-change{font-size:12px;font-weight:bold;text-align:end}.quote-time{grid-column:1/-1;color:#a9aaae;font-size:10px;white-space:nowrap}.quote-up .quote-change{color:#7bd5ac}.quote-down .quote-change{color:#ff9d9d}.quote-flat .quote-change{color:#d3c8af}.oil-quote:hover .quote-name{text-decoration:underline}.price-freshness{color:#dfbf80;font-size:11px;margin:0}.price-freshness[hidden]{display:none}
.oil-price-ticker.is-stale{border-top-color:#a47137}
@media(max-width:900px){.oil-ticker-inner{flex-wrap:wrap;gap:6px}.oil-ticker-heading{max-width:none;flex-direction:row;align-items:baseline;gap:12px;width:100%}.oil-quotes{gap:14px;flex-basis:100%}.oil-quote{padding-inline-start:12px;gap:2px 8px}.quote-value{font-size:18px}.price-freshness{flex-basis:100%}}
@media(max-width:600px){:root{--oil-strip-height:150px}.ticker-row{gap:10px}.ticker-label{font-size:12px}.ticker-pause{font-size:11px;padding:5px 7px}.market-news-ticker{font-size:12px}.quote-name{grid-column:1/-1;font-size:11px}.quote-value{font-size:17px;text-align:start}.quote-value small{font-size:9px}.quote-change{font-size:11px}.quote-time{font-size:9px;white-space:normal}.oil-ticker-heading strong{font-size:12px}.oil-ticker-heading>span{font-size:10px}.oil-quotes{gap:8px}.oil-quote{padding-inline-start:8px}.oil-ticker-heading{gap:8px}}
@media(prefers-reduced-motion:reduce){.ticker-track{animation:none!important}.ticker-window{overflow-x:auto}.ticker-copy{display:none}}
/* Continuous price motion; each repeated group has exactly the same width. */
.oil-motion-window{flex:1;min-width:0;overflow:hidden;direction:ltr}
.oil-motion-track{display:flex;width:max-content;animation:market-headlines 28s linear infinite}
.oil-motion-track .oil-quotes{flex:none;width:max-content;box-sizing:border-box;padding-inline-end:24px;gap:24px}
.oil-motion-track .oil-quote{flex:1;min-width:280px;box-sizing:border-box}
html[lang="ar"] .oil-motion-track .oil-quote{direction:rtl}
.oil-motion-window:hover .oil-motion-track,.oil-motion-window:focus-within .oil-motion-track{animation-play-state:paused}
.oil-price-ticker.is-manual .oil-motion-track{animation:none}
.oil-price-ticker.is-manual .oil-copy{display:none}
.oil-price-ticker.is-manual .oil-motion-window{overflow-x:auto}
@media(max-width:900px){.oil-ticker-heading{width:auto;flex:1}.oil-motion-window{flex-basis:100%}.oil-motion-track .oil-quotes{flex-basis:auto}.oil-motion-track .oil-quote{min-width:280px}}
@media(prefers-reduced-motion:reduce){.oil-motion-track{animation:none!important}.oil-copy{display:none}.oil-motion-window{overflow-x:auto}}