/* TIRBON Deals -- shared stylesheet
Extends the existing TIRBON Content OS visual identity (dark, minimal, system-ui).
Works for both [dir="rtl"] (Arabic) and [dir="ltr"] (English) documents. */

:root{
--bg:#0b0d17;
--panel:#11142330;
--panel-solid:#111423;
--line:#22263a;
--fg:#e6e8f0;
--muted:#98a0b8;
--accent:#6366f1;
--accent-soft:#6366f11a;
--warn:#eab30820;
--warn-fg:#eab308;
--ok:#22c55e;
}
*{box-sizing:border-box}
html,body{margin:0;padding:0}
body{
background:var(--bg);
color:var(--fg);
font:16px/1.7 system-ui,-apple-system,"Segoe UI",Roboto,"Tajawal",sans-serif;
}
.wrap{max-width:72rem;margin:0 auto;padding:0 1.25rem}
a{color:var(--fg);text-decoration:none}
img{max-width:100%}

/* Header / nav (matches root site) */
header.site{border-bottom:1px solid var(--line)}
header.site nav{display:flex;gap:1.25rem;align-items:center;padding:1.1rem 0;flex-wrap:wrap}
header.site .brand{font-weight:700;letter-spacing:.01em}
[dir="rtl"] header.site .brand{margin-inline-start:auto}
[dir="ltr"] header.site .brand{margin-inline-end:auto}
header.site nav a:not(.brand){color:var(--muted);font-size:.95rem}
header.site nav a:hover{color:var(--fg)}
.lang-switch{border:1px solid var(--line);border-radius:999px;padding:.3rem .8rem;font-size:.85rem;color:var(--muted)}
.lang-switch:hover{color:var(--fg);border-color:var(--accent)}

/* Hero */
.hero{padding:3.5rem 0 2.5rem;border-bottom:1px solid var(--line)}
.hero h1{font-size:clamp(1.9rem,4vw,2.8rem);line-height:1.25;margin:0 0 .9rem}
.hero p.lead{font-size:1.1rem;color:var(--fg);opacity:.85;max-width:52ch;margin:0 0 1.6rem}
.hero .badge{display:inline-block;font-size:.78rem;color:var(--accent);background:var(--accent-soft);border:1px solid var(--accent);border-radius:999px;padding:.25rem .75rem;margin-bottom:1rem}

.search-box{display:flex;gap:.6rem;max-width:34rem;margin-top:1rem}
.search-box input{flex:1;background:var(--panel-solid);border:1px solid var(--line);border-radius:10px;color:var(--fg);padding:.75rem 1rem;font-size:.95rem}
.search-box button{background:var(--accent);border:none;color:#fff;border-radius:10px;padding:.75rem 1.3rem;font-size:.95rem;cursor:pointer}
.search-note{font-size:.82rem;color:var(--muted);margin-top:.5rem}

section{padding:2.8rem 0}
section + section{border-top:1px solid var(--line)}
.section-head{display:flex;align-items:baseline;justify-content:space-between;gap:1rem;margin-bottom:1.4rem;flex-wrap:wrap}
.section-head h2{font-size:1.4rem;margin:0}
.section-head .sub{color:var(--muted);font-size:.92rem}

.grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(15.5rem,1fr));gap:1rem}
.card{border:1px solid var(--line);border-radius:14px;padding:1.2rem 1.3rem;background:var(--panel)}
.card h3{margin:0 0 .4rem;font-size:1.02rem}
.card p{margin:0;color:var(--muted);font-size:.9rem}
.card .tag{display:inline-block;font-size:.72rem;color:var(--muted);border:1px solid var(--line);border-radius:6px;padding:.1rem .5rem;margin-top:.7rem}

.empty-state{border:1px dashed var(--line);border-radius:14px;padding:2rem 1.5rem;text-align:center;color:var(--muted)}
.empty-state strong{color:var(--fg);display:block;margin-bottom:.4rem;font-size:1.02rem}

.status-pill{display:inline-block;font-size:.72rem;font-weight:600;letter-spacing:.02em;border-radius:6px;padding:.15rem .5rem}
.status-unknown{background:var(--warn);color:var(--warn-fg)}
.status-needs-review{background:#f9731620;color:#f97316}

.opp-card{border:1px solid var(--line);border-radius:14px;padding:1.1rem 1.2rem;background:var(--panel);display:flex;flex-direction:column;gap:.5rem}
.opp-card h3{margin:0;font-size:1rem}
.opp-meta{display:flex;flex-wrap:wrap;gap:.4rem;font-size:.78rem;color:var(--muted)}
.opp-meta span{border:1px solid var(--line);border-radius:6px;padding:.05rem .45rem}
.opp-price{font-size:.85rem;color:var(--muted)}

.trust-box{border:1px solid var(--line);border-inline-start:3px solid var(--accent);border-radius:8px;padding:1rem 1.2rem;background:var(--panel)}
.trust-box p{margin:.3rem 0;color:var(--fg);opacity:.85;font-size:.92rem}

table.compare{width:100%;border-collapse:collapse;font-size:.9rem}
table.compare th,table.compare td{border:1px solid var(--line);padding:.6rem .8rem;text-align:start}
table.compare th{color:var(--muted);font-weight:600;background:var(--panel)}

footer.site{border-top:1px solid var(--line);margin-top:3rem;padding:1.5rem 0;color:var(--muted);font-size:.88rem}
footer.site a{text-decoration:underline}

/* accessible mobile navigation, market selector, search results, engine panel */
.nav-toggle{display:none;background:transparent;border:1px solid var(--line);border-radius:8px;color:var(--fg);font-size:1.1rem;padding:.3rem .7rem;cursor:pointer;line-height:1}
.nav-toggle:hover{border-color:var(--accent)}
.tirbon-market-select{background:var(--panel-solid);border:1px solid var(--line);border-radius:8px;color:var(--fg);font-size:.85rem;padding:.35rem .6rem}
.tirbon-search-results-wrap{margin-top:.6rem}
.tirbon-search-results{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:.4rem}
.tirbon-search-results li{border:1px solid var(--line);border-radius:8px;padding:.5rem .8rem;font-size:.85rem;color:var(--fg);background:var(--panel)}

@media (max-width:480px){
header.site nav{flex-wrap:nowrap;position:relative}
header.site nav .nav-links{display:none;flex-direction:column;align-items:flex-start;gap:.75rem;width:100%;order:3;padding-top:.75rem}
header.site nav .nav-links.open{display:flex}
.nav-toggle{display:inline-block;margin-inline-start:auto}
[dir="rtl"] .nav-toggle{margin-inline-start:auto;margin-inline-end:0}
}

/* per-offer and evidence status pills (exact lowercase class
names generated by status.toLowerCase() in deals.js, including the
underscore variant for NEEDS_VERIFICATION) */
.status-verified{background:#22c55e20;color:var(--ok)}
.status-derived{background:var(--accent-soft);color:var(--accent)}
.status-fresh{background:#22c55e20;color:var(--ok)}
.status-stale{background:#f9731620;color:#f97316}
.status-unavailable{background:#ef444420;color:#ef4444}
.status-needs_verification{background:var(--warn);color:var(--warn-fg)}

/* per-merchant tracked-price rows and separated evidence list
(used both in the live opportunities panel and inside the
Product Detail price-comparison table) */
.tirbon-offers-list,.tirbon-evidence-list{margin-top:.9rem;padding-top:.9rem;border-top:1px dashed var(--line)}
.tirbon-offers-list h4,.tirbon-evidence-list h4{margin:0 0 .6rem;font-size:.85rem;color:var(--muted);text-transform:uppercase;letter-spacing:.03em}
.tirbon-offer-row{border:1px solid var(--line);border-radius:10px;padding:.6rem .8rem;margin-bottom:.5rem;font-size:.85rem;background:var(--panel)}
.offer-head{display:flex;align-items:center;gap:.5rem;flex-wrap:wrap;margin-bottom:.3rem}
.offer-market{color:var(--muted);font-size:.78rem;border:1px solid var(--line);border-radius:6px;padding:.05rem .4rem}
.offer-price{font-weight:600}
.offer-shipping,.offer-checked{color:var(--muted);font-size:.8rem}
.offer-note{color:var(--muted);font-size:.78rem;margin-top:.3rem;font-style:italic}
.tirbon-evidence-list ul{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:.5rem}
.evidence-item{border:1px solid var(--line);border-radius:10px;padding:.6rem .8rem;font-size:.85rem;background:var(--panel)}
.evidence-item p{margin:.3rem 0 0}

/* reusable Product Detail experience */
.pd-breadcrumb{padding-top:1.4rem;font-size:.82rem;color:var(--muted)}
.pd-breadcrumb a{text-decoration:underline}
.pd-detail{padding:1.4rem 0 3rem}
.pd-header h1{font-size:clamp(1.5rem,3.4vw,2.1rem);margin:0 0 .7rem}
.pd-meta{display:flex;flex-wrap:wrap;gap:.5rem;align-items:center;margin-bottom:.9rem}
.pd-meta-item{font-size:.82rem;color:var(--muted);border:1px solid var(--line);border-radius:6px;padding:.15rem .55rem}
.pd-lead{color:var(--fg);opacity:.85;max-width:62ch;margin:0 0 1.2rem;font-size:.98rem}
.pd-section{padding:1.6rem 0;border-top:1px solid var(--line)}
.pd-section h2{font-size:1.2rem;margin:0 0 .6rem}
.pd-note{color:var(--muted);font-size:.85rem;margin:.3rem 0 1rem}
.pd-note-muted{font-style:italic}
.pd-empty{border:1px dashed var(--line);border-radius:12px;padding:1.4rem;text-align:center;color:var(--muted)}
.pd-refresh-banner{background:#f9731620;color:#f97316;border:1px solid #f9731650;border-radius:10px;padding:.7rem 1rem;font-weight:600;font-size:.9rem;margin-bottom:1rem}

/* Table wrapped for horizontal scroll on narrow viewports rather than ever
letting the page itself overflow horizontally */
.pd-table-wrap{overflow-x:auto}
table.pd-price-table{width:100%;border-collapse:collapse;font-size:.88rem;min-width:38rem}
table.pd-price-table caption{text-align:start;color:var(--muted);font-size:.8rem;padding-bottom:.5rem}
table.pd-price-table th,table.pd-price-table td{border:1px solid var(--line);padding:.6rem .7rem;text-align:start;vertical-align:top}
table.pd-price-table thead th{color:var(--muted);font-weight:600;background:var(--panel)}
table.pd-price-table tbody th{font-weight:600}

.pd-cta{display:inline-block;min-height:2.5rem;line-height:2.5rem;padding:0 1rem;border:1px solid var(--accent);border-radius:8px;color:var(--accent);font-size:.85rem;white-space:nowrap}
.pd-cta:hover{background:var(--accent-soft)}
.pd-cta-secondary{border-color:var(--line);color:var(--muted)}
.pd-cta-secondary:hover{border-color:var(--accent);color:var(--accent)}

.pd-intel{display:grid;grid-template-columns:max-content 1fr;gap:.3rem 1rem;margin:0 0 1rem}
.pd-intel dt{color:var(--muted);font-size:.85rem}
.pd-intel dd{margin:0;font-weight:600;font-size:.9rem}

.pd-evidence-list{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:.7rem}
.pd-evidence-item{border:1px solid var(--line);border-radius:12px;padding:.9rem 1rem;background:var(--panel)}
.pd-evidence-head{display:flex;gap:.6rem;align-items:center;margin-bottom:.5rem;flex-wrap:wrap}
.pd-evidence-type{font-size:.78rem;color:var(--muted);text-transform:uppercase;letter-spacing:.02em}
.pd-evidence-claim{margin:0;font-size:.92rem}
.pd-evidence-sources{margin:.4rem 0 0;font-size:.8rem}
.pd-evidence-sources a{text-decoration:underline}
.pd-evidence-note{margin:.4rem 0 0;color:var(--muted);font-size:.8rem;font-style:italic}

/* Search results: wraps product titles in a real <a> to the Product
Detail page -- keep the same list-item chrome, just make the link fill it */
.tirbon-search-results a{display:block;color:var(--fg)}
.tirbon-search-results a:hover{color:var(--accent)}

/* Visible focus for keyboard navigation across all new interactive elements */
a:focus-visible,button:focus-visible,input:focus-visible,select:focus-visible{
outline:2px solid var(--accent);outline-offset:2px;border-radius:4px
}

@media (max-width:480px){
.pd-meta{gap:.4rem}
.pd-cta{padding:0 .8rem;font-size:.82rem}
}