/* Saudi Material Prices · clean data edition.
   Intentional flat surfaces, crisp blue accents and stable accessible contrast.
   Loaded after the foundational site and market-design CSS on every AR/EN route.
   No new font service, asset dependency, fake price or advertisement. */
:root{
  --bg:#f8fafc;--paper:#fff;--ink:#0f172a;--muted:#475569;
  --line:#e2e8f0;--steel:#193552;--steel2:#334155;
  --sand:#2563eb;--sand2:#dbeafe;--up:#047857;--down:#b42318;
  --shadow:0 9px 28px rgba(15,23,42,.055);--radius:18px;
}
html{background:#f8fafc}
body{background:#f8fafc;color:#0f172a;font-family:system-ui,-apple-system,"Segoe UI",Tahoma,Arial,sans-serif}
html[dir="rtl"] body{font-family:"Segoe UI",Tahoma,Arial,sans-serif}
main{background:#f8fafc}
a:focus-visible,button:focus-visible,input:focus-visible,select:focus-visible,summary:focus-visible{
  outline:3px solid #2563eb;outline-offset:3px;
}
.topbar{background:#f8fafc;color:#475569;border-bottom:1px solid #e2e8f0}
.topbar span{color:#475569;font-size:13px}
.topbar span:first-child:before{background:#2563eb}
.site-header{background:#fff;border-bottom:1px solid #e2e8f0;box-shadow:none;backdrop-filter:none;-webkit-backdrop-filter:none}
.site-header .nav{min-height:70px;padding:8px 0;gap:14px}
.brand,.site-header .brand{color:#15253d;font-size:16px;letter-spacing:0}
.brand:hover{color:#1d4ed8}
.brand-mark{
  width:42px;height:42px;flex-basis:42px;
  background:#1d4ed8;color:#fff;border-radius:12px;
  box-shadow:none;font-size:22px;
}
.site-header .nav-links{gap:2px;font-size:14px}
.site-header .nav-links a{
  color:#334155;border-radius:9px;padding:9px 12px;
  font-weight:700;transition:background-color .32s ease,color .32s ease;
}
.site-header .nav-links a:hover,.site-header .nav-links a:focus-visible{background:#eff6ff;color:#1d4ed8}
.site-header .nav-links a[aria-current="page"]{background:#eff6ff;color:#1d4ed8}
.site-header .nav-links a[href*="/compare/"]{
  background:#2563eb;color:#fff;border:1px solid #2563eb;border-radius:10px;
  padding-inline:15px;
}
.site-header .nav-links a[href*="/compare/"]:hover,
.site-header .nav-links a[href*="/compare/"]:focus-visible{
  background:#1d4ed8;color:#fff;border-color:#1d4ed8;box-shadow:none;
}
/* Only the context-preserving top-right dropdown displays language choices.
   The original source link is removed by the first-response Worker. */
.site-header .nav-links a.lang-switch{display:none!important}
.lang-picker{color:#1e293b}
.lang-picker summary{
  min-height:44px;min-width:76px;background:#fff;color:#1e293b;
  border:1px solid #cbd5e1;border-radius:10px;box-shadow:none;
}
.lang-picker summary:hover,.lang-picker[open] summary{background:#eff6ff;border-color:#93c5fd}
.lang-picker summary svg{color:#2563eb}
.language-menu{
  border:1px solid #e2e8f0;border-radius:14px;background:#fff;
  box-shadow:0 16px 32px rgba(15,23,42,.13);
}
.lang-option{color:#1e293b}
.lang-option:hover{background:#eff6ff;color:#1d4ed8}

.hero{
  background:#f8fafc;border-bottom:1px solid #e2e8f0;
  padding:48px 0 44px;overflow:hidden;
}
.hero:after{display:none}
.hero-grid{
  grid-template-columns:minmax(0,1.14fr) minmax(320px,.86fr);
  gap:clamp(24px,3.4vw,52px);align-items:center;
}
.eyebrow{
  background:#fff;color:#1d4ed8;border:1px solid #dbeafe;
  border-radius:8px;font-size:13px;padding:7px 11px;
}
.hero h1{
  font-size:clamp(31px,3.35vw,48px);
  line-height:1.19;letter-spacing:-.033em;color:#0f172a;
  margin:17px 0 18px;font-weight:800;
}
html[dir="rtl"] .hero h1{
  font-size:clamp(30px,3.05vw,44px);
  letter-spacing:0;line-height:1.38;
}
.hero p{color:#475569;font-size:16px;line-height:1.8;margin-bottom:14px}
.hero-actions{margin-top:22px;gap:10px}
.btn{
  background:#2563eb;border-color:#2563eb;color:#fff;
  border-radius:10px;box-shadow:none;min-height:46px;
  transition:background-color .32s ease,color .32s ease,border-color .32s ease,transform .32s ease;
}
.btn:hover{background:#1d4ed8;border-color:#1d4ed8;color:#fff;box-shadow:none;transform:translateY(-1px)}
.btn.secondary{background:#fff;color:#1e3a5f;border-color:#cbd5e1;box-shadow:none}
.btn.secondary:hover{background:#eff6ff;color:#1d4ed8;border-color:#93c5fd}
.hero-card{
  background:#172940;color:#f8fafc;border:1px solid #243d58;
  border-radius:20px;padding:clamp(25px,2.8vw,34px);
  box-shadow:0 20px 38px -27px rgba(15,23,42,.45);
  align-items:stretch;text-align:start;min-width:0;
}
.hero-card:after{display:none}
.hero-card:hover{
  background:#172940;box-shadow:0 24px 43px -27px rgba(15,23,42,.47);
  transform:translateY(-2px);
}
.hero-card .label{color:#d4e3f4;font-size:14px;font-weight:650}
.hero-card .hero-price{
  color:#fff;font-size:clamp(30px,3.35vw,44px);
  line-height:1.16;letter-spacing:-.025em;
  margin:17px 0 18px;font-weight:850;
  font-variant-numeric:tabular-nums;overflow-wrap:anywhere;
}
.hero-card .hero-price small{color:#e2e8f0;font-size:15px;letter-spacing:0}
.hero-card p{color:#d2deeb;font-size:14px;line-height:1.75;margin:14px 0 0}
.hero-card .delta.up{background:#134536;color:#c6f6df;border:1px solid #24614c}
.hero-card .delta.down{background:#4b2530;color:#fecdd3;border:1px solid #693843}
.hero-card .delta{font-size:13px}
.freshness-status,.hero .freshness-status,.material-hero .freshness-status{
  background:#fff;color:#334155;border:1px solid #dbe3ee;
  box-shadow:none;border-radius:10px;
}

.section{padding:44px 0}
.section h2{font-size:clamp(23px,2.2vw,32px);color:#17283f;line-height:1.32;letter-spacing:-.018em}
html[dir="rtl"] .section h2{letter-spacing:0;line-height:1.46}
.section-head{gap:18px;margin-bottom:20px}
.section-head>a{color:#1d4ed8;border-bottom-color:#bfdbfe}
.section-head>a:hover{color:#1e40af;border-bottom-color:#1e40af}
.lead{color:#475569;line-height:1.75}
[data-home-market-pulse] .wrap{
  background:#fff;border:1px solid #e2e8f0;border-radius:18px;
  padding:clamp(22px,2.8vw,34px);box-shadow:none;
}
[data-home-market-pulse] p{color:#475569}
[data-home-market-pulse] strong{color:#1e3a5f}
[data-home-market-pulse] a{color:#1d4ed8}
.grid{gap:15px}
.card{
  background:#fff;border:1px solid #e2e8f0;border-radius:17px;
  box-shadow:0 6px 18px rgba(15,23,42,.045);
  padding:clamp(19px,2vw,25px);
}
a.card:hover{
  background:#fff;border-color:#bfdbfe;
  box-shadow:0 12px 24px rgba(15,23,42,.075);
  transform:translateY(-2px);
}
.card .kicker{color:#64748b;font-size:14px}
.card h3{color:#17283f;font-size:clamp(16px,1.35vw,19px);margin:14px 0 8px}
.card .price{
  color:#10243d;font-size:clamp(23px,2.3vw,31px);
  font-variant-numeric:tabular-nums;
}
.card .price small{color:#64748b;font-size:14px}
.card .muted,.muted{color:#64748b}
.delta{border-radius:8px;font-size:13px}
.delta.up{background:#ecfdf5;color:#047857;border-color:#a7f3d0}
.delta.down{background:#fef2f2;color:#b42318;border-color:#fecaca}
.category-grid{gap:14px}
.category{
  min-height:128px;background:#fff;border:1px solid #e2e8f0;
  border-radius:17px;box-shadow:0 6px 18px rgba(15,23,42,.035);
  padding:21px;
}
.category:before{display:none}
.category b{color:#17283f;font-size:17px}
.category span{display:block;color:#64748b;font-size:14px;line-height:1.65;margin-top:8px}
a.category:hover{background:#fff;border-color:#bfdbfe;box-shadow:0 12px 24px rgba(15,23,42,.07);transform:translateY(-2px)}

.material-hero{background:#fff;border-bottom:1px solid #e2e8f0;padding:26px 0 39px}
.material-hero h1{color:#0f172a;font-size:clamp(29px,3.1vw,43px);line-height:1.27}
html[dir="rtl"] .material-hero h1{line-height:1.4}
.material-hero .lead{font-size:16px;color:#475569}
.breadcrumbs,.breadcrumbs a{color:#64748b}
.breadcrumbs a:hover{color:#1d4ed8}
.metrics{gap:14px;margin:22px 0}
.metric{
  min-height:110px;background:#fff;border:1px solid #e2e8f0;
  border-top:2px solid #bfdbfe;border-radius:16px;padding:19px 21px;
  box-shadow:none;
}
.metric span{color:#475569;font-size:14px}
.metric b{color:#17283f;font-size:clamp(20px,1.9vw,26px);font-variant-numeric:tabular-nums}
.metric small{color:#64748b}
.chart-wrap{background:#fff;border:1px solid #e2e8f0;border-radius:18px;box-shadow:none}
.chart .line{stroke:#2563eb;stroke-width:3.25}
.chart .dot{fill:#2563eb}
.chart .gridline{stroke:#e2e8f0}

.data-table{
  background:#fff;border:1px solid #e2e8f0;
  border-radius:15px;box-shadow:none;
}
.data-table th,.data-table td{
  border-bottom:1px solid #e2e8f0;color:#334155;
  padding:14px 16px;font-size:14px;
}
.data-table thead th{
  background:#f1f5f9;color:#334155;
  border-bottom:1px solid #cbd5e1;font-weight:800;
}
.data-table tbody th{color:#1e293b}
.data-table tbody tr:nth-child(even){background:#fbfcfe}
.data-table tbody tr:hover{background:#eff6ff}
.data-table a{color:#1d4ed8}
.data-table a:hover{color:#1e40af}

.notice,.source-box{
  background:#f8fafc;color:#334155;
  border:1px solid #e2e8f0;border-inline-start:3px solid #60a5fa;
  border-radius:12px;box-shadow:none;
}
html[dir="rtl"] .notice{border-right:3px solid #60a5fa;border-left:1px solid #e2e8f0}
html[dir="ltr"] .notice{border-left:3px solid #60a5fa;border-right:1px solid #e2e8f0}
.notice a,.source-box a{color:#1d4ed8}
.guide-context{
  background:#fff;border:1px solid #e2e8f0;
  border-inline-start:3px solid #bfdbfe;
  border-radius:17px;box-shadow:none;max-width:980px;
}
.guide-context h2{color:#17283f}
.guide-context h3{color:#1e3a5f}
.guide-context p,.guide-context li{color:#475569}
.guide-context strong{color:#17283f}
.guide-context a{color:#1d4ed8}
.price-topic-nav{background:#fff;border-color:#e2e8f0;border-radius:14px}
.price-topic-label{color:#334155}
.price-topic-links a{
  background:#f8fafc;color:#1d4ed8;border:1px solid #dbeafe;border-radius:9px;
}
.price-topic-links a:hover{background:#eff6ff}
.cta-strip{background:#eff6ff;border:1px solid #dbeafe;border-radius:16px}
.cta-strip h2{color:#17283f}
.cta-strip p{color:#475569}

.tool{
  background:#fff;border:1px solid #e2e8f0;
  border-radius:20px;padding:clamp(22px,3vw,34px);
  box-shadow:0 8px 24px rgba(15,23,42,.045);
}
.tool p{color:#475569}
.tool .field label{color:#334155;font-size:15px;font-weight:750}
.field input,.field select{
  background:#fff;color:#0f172a;border:1px solid #cbd5e1;
  border-radius:10px;font-size:16px;min-height:50px;
}
.field select:focus,.field input:focus{border-color:#2563eb;box-shadow:0 0 0 3px #dbeafe}
.field input[aria-invalid="true"]{border-color:#dc2626;box-shadow:0 0 0 3px #fee2e2}
.tool .quantity-unit-note{color:#475569!important}
.tool .quote-submit,.tool .quote-submit:hover,.tool .quote-submit:focus-visible{
  color:#fff;background:#2563eb;border-color:#2563eb;
  min-height:48px;box-shadow:none;
}
.tool .quote-submit:hover{background:#1d4ed8;border-color:#1d4ed8}
.tool .quote-submit:focus-visible{outline:3px solid #2563eb;outline-offset:3px}
.result,.tool .result{
  background:#172940;border:1px solid #243d58;
  border-radius:17px;color:#fff;
}
.result .price,.result b,.tool .result .price,.tool .result b{color:#fff}
.result .muted,.quote-stat span,.tool .result p,.tool .result .muted{
  color:#dbe6f3!important;
}
.quote-stat{background:#223851;border:1px solid #3c5570;border-radius:11px}
.tool .result .quote-note{color:#dbe6f3!important}
.quote-share{background:#fff;border-color:#e2e8f0;box-shadow:none}
.quote-share p{color:#475569}

.search{
  background:#fff;border:1px solid #cbd5e1;border-radius:11px;
  box-shadow:none;color:#0f172a;
}
.search:focus{border-color:#2563eb;box-shadow:0 0 0 3px #dbeafe}
.material-search-result{border-color:#e2e8f0;color:#17283f;background:#fff}
.material-search-result:hover{background:#eff6ff;border-color:#bfdbfe}
.material-search-price{color:#475569}
.search-status,.material-search-more{color:#64748b}
.faq details{background:#fff;border:1px solid #e2e8f0;border-radius:13px}
.faq details[open],.faq details:hover{background:#f8fafc;border-color:#bfdbfe}
.faq summary{color:#17283f}
.pill{background:#eff6ff;color:#1e40af}
.ad-slot{background:#f8fafc;border-color:#e2e8f0;color:#64748b}

.footer{
  background:#0f172a;color:#cbd5e1;
  border-top:1px solid #1e293b;margin-top:48px;padding:45px 0 35px;
}
.footer h3{color:#fff}
.footer a{color:#dbeafe}
.footer a:hover{color:#fff}
.footer p{color:#cbd5e1}
@media(max-width:1130px){
  .site-header .nav{min-height:0}
}
@media(max-width:850px){
  .hero-grid,.tool{grid-template-columns:minmax(0,1fr)}
  .hero{padding:38px 0 36px}
  .hero-card{max-width:none}
}
@media(max-width:560px){
  .hero{padding:28px 0 32px}
  .hero h1{font-size:clamp(29px,7.4vw,38px)}
  html[dir="rtl"] .hero h1{font-size:clamp(28px,7vw,36px)}
  .hero-card{padding:22px}
  .hero-card .hero-price{font-size:clamp(28px,7vw,37px)}
  .category{padding:19px;min-height:auto}
  .section{padding:32px 0}
  .site-header .nav{gap:5px 10px}
  .brand-mark{width:38px;height:38px;flex-basis:38px}
  .material-hero{padding:22px 0 32px}
}
@media(prefers-reduced-motion:reduce){
  .card,.category,.hero-card,.btn,.site-header .nav-links a{transition:none}
  .card:hover,.category:hover,.hero-card:hover,.btn:hover{transform:none}
}

/* White calculator surfaces need strong error-state contrast.
   The legacy quote-feedback sheet was designed for the former dark form.
   Keep both quantity/offer error messages and focus indicators readable. */
.tool .quote-field-error{
  color:#b42318;font-size:15px;font-weight:700;line-height:1.55;
}
.tool .quote-field-error[hidden]{display:none}
.tool #quote-result:focus{outline:3px solid #2563eb;outline-offset:4px}
a.hero-card:hover{outline:2px solid #93c5fd;outline-offset:2px}
a.hero-card:focus-visible{outline:3px solid #2563eb;outline-offset:4px}