/*
 * Price board — shared by the home page section (.pb--embed) and the full-screen TV page (.pb--tv).
 *
 * Every size is a multiple of --u, one 160th of a 16:9 canvas. A browser only knows the screen's
 * resolution, not its inches, so the board scales with the screen: on a 30" or a 100" TV it fills the
 * same share of the picture, and viewers sit further from a bigger screen.
 * --k shrinks the rows when more products are added than the design's seven per column.
 */
@font-face { font-family: pb-sans; font-weight: 300; src: url('../fonts/Vazirmatn-300.woff2') format('woff2'); font-display: swap; }
@font-face { font-family: pb-sans; font-weight: 500; src: url('../fonts/Vazirmatn-500.woff2') format('woff2'); font-display: swap; }
@font-face { font-family: pb-sans; font-weight: 800; src: url('../fonts/Vazirmatn-800.woff2') format('woff2'); font-display: swap; }

.pb {
    --malachite: #0A2A26;
    --lacquer: #0D3D35;
    --ivory: #F5EBDD;
    --ivory-soft: #B9C7BC;
    --gold: #FAC682;
    --gold-light: #FFEBC8;
    --gold-deep: #C8924F;
    --up: #63DBA6;
    --down: #FF9385;
    --rule: rgba(250, 198, 130, .2);
    --u: .625vw;
    --k: 1;

    position: relative;
    overflow: hidden;
    box-sizing: border-box;
    color: var(--ivory);
    background: radial-gradient(ellipse 75% 70% at 50% 0, #15564A 0, var(--lacquer) 45%, var(--malachite) 100%);
    font-family: pb-sans, iransans, sans-serif;
    font-weight: 500;
    line-height: 1.3;
    text-align: right;
}
.pb *, .pb *::before, .pb *::after { box-sizing: border-box; }
.pb h2, .pb p, .pb table, .pb th, .pb td { margin: 0; padding: 0; }

/* ---------- Head ---------- */
.pb-head {
    display: grid;
    grid-template-columns: 1fr auto 1fr;
    align-items: center;
    column-gap: calc(var(--u) * 4);
}
.pb-brand { display: flex; align-items: center; gap: calc(var(--u) * 2.5); }
.pb-brand__logo { display: block; width: calc(var(--u) * 19); height: auto; }
.pb-title {
    padding-right: calc(var(--u) * 2.5);
    border-right: 1px solid var(--rule);
    color: var(--ivory);
    font-family: lalezar, pb-sans, sans-serif;
    font-size: calc(var(--u) * 3.4);
    font-weight: 400;
    line-height: 1.2;
    white-space: nowrap;
}
.pb-raw { text-align: center; }
.pb-raw__label { color: var(--ivory); font-size: calc(var(--u) * 2.2); }
.pb-raw__value {
    display: flex;
    align-items: baseline;
    justify-content: center;
    gap: calc(var(--u) * 1.4);
    margin-top: calc(var(--u) * .5);
    line-height: 1.15;
}
.pb-raw__number {
    color: var(--gold);
    background: linear-gradient(180deg, var(--gold-light) 12%, var(--gold) 52%, var(--gold-deep) 92%);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    font-size: calc(var(--u) * 9);
    font-weight: 800;
    white-space: nowrap;
}
.pb-raw__unit { color: var(--gold); font-size: calc(var(--u) * 2.2); }

.pb-now { text-align: left; }
.pb-clock {
    display: block;
    color: var(--ivory);
    font-size: calc(var(--u) * 5.2);
    font-weight: 300;
    line-height: 1.1;
    direction: ltr;
    white-space: nowrap;
    font-feature-settings: "tnum";
    letter-spacing: -.08em;
}
.pb-now__line {
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-end;
    align-items: center;
    gap: calc(var(--u) * 1.5);
    min-height: calc(var(--u) * 2.6);
    margin-top: calc(var(--u) * .4);
    color: var(--ivory-soft);
    font-size: calc(var(--u) * 1.8);
}
.pb-status { display: none; align-items: center; gap: .5em; }
.pb-status::before { content: ""; width: .6em; height: .6em; border-radius: 50%; background: currentColor; }
.pb[data-market="open"] .pb-status { display: inline-flex; color: var(--up); }
.pb[data-market="closed"] .pb-status { display: inline-flex; color: var(--down); }

/* ---------- Tables ---------- */
.pb-tables {
    display: grid;
    grid-template-columns: 1fr 1fr;
    column-gap: calc(var(--u) * 6);
    min-height: 0;
}
.pb-table {
    width: 100%;
    border-collapse: collapse;
    table-layout: fixed;
}
.pb-table thead th {
    height: calc(var(--u) * 4.4);
    border-bottom: 2px solid var(--gold-deep);
    color: var(--gold);
    font-size: calc(var(--u) * 1.9);
    font-weight: 500;
    text-align: left;
    vertical-align: middle;
}
.pb-table thead th:first-child { width: 32%; font-weight: 800; text-align: right; }
.pb-table thead small { color: var(--ivory-soft); font-size: .72em; font-weight: 300; }
.pb-table tbody tr + tr > * { border-top: 1px solid var(--rule); }
.pb-table tbody th {
    padding-left: calc(var(--u) * 1.5);
    font-weight: 500;
    text-align: right;
    vertical-align: middle;
}
.pb-table tbody td { vertical-align: middle; }
/* Replaces the site-wide light hover from style.css, which hid the prices on this dark ground. */
.pb-table tbody tr:hover > * { background: rgba(250, 198, 130, .08) !important; scale: none; }
.item-title { display: block; font-size: calc(var(--u) * 2.3 * var(--k)); line-height: 1.25; }
.item-title__note { display: block; color: var(--ivory-soft); font-size: .74em; font-weight: 300; }

.item-buyPrice, .item-sellPrice {
    color: var(--ivory);
    font-size: calc(var(--u) * 3.3 * var(--k));
    font-weight: 800;
    text-align: left;
    direction: ltr;
    white-space: nowrap;
    /* Fixed-width digits so the columns line up, drawn closer because this font spaces them wide. */
    font-feature-settings: "tnum";
    letter-spacing: -.1em;
    transition: color 1.2s ease-out, opacity .4s;
}
.item-sellPrice { color: var(--gold); }

/* The arrow stays until the next change, so someone glancing up still sees the direction. */
.item-buyPrice::after, .item-sellPrice::after {
    content: "";
    display: inline-block;
    width: .46em;
    height: .4em;
    margin-left: .3em;
    vertical-align: .12em;
    opacity: 0;
}
[data-dir="up"]::after {
    opacity: 1;
    background: var(--up);
    clip-path: polygon(50% 0, 100% 100%, 0 100%);
}
[data-dir="down"]::after {
    opacity: 1;
    background: var(--down);
    clip-path: polygon(0 0, 100% 0, 50% 100%);
}
.item-buyPrice.is-up, .item-sellPrice.is-up { color: var(--up); transition-duration: .15s; }
.item-buyPrice.is-down, .item-sellPrice.is-down { color: var(--down); transition-duration: .15s; }

.item-closed { display: none; text-align: center; vertical-align: middle; font-size: calc(var(--u) * 2.2 * var(--k)); }
tr.price-closed > .item-buyPrice, tr.price-closed > .item-sellPrice { display: none; }
tr.price-closed > .item-closed { display: table-cell; }
.pb .price-closed-badge { font-size: 1em; }

.pb-range { display: none; }

/* ---------- Foot ---------- */
.pb-foot {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: calc(var(--u) * 3);
    color: var(--ivory-soft);
    font-size: calc(var(--u) * 1.7);
}
.pb-foot__alert { display: none; color: var(--down); font-weight: 800; }
.pb.is-stale .pb-foot__alert { display: inline; }
.pb.is-stale .pb-foot__updated { display: none; }
.pb.is-stale .item-buyPrice, .pb.is-stale .item-sellPrice, .pb.is-stale .pb-raw__value { opacity: .4; }
.pb-foot__meta { display: flex; align-items: center; gap: calc(var(--u) * 3); white-space: nowrap; }
.pb-tvlink { display: none; color: var(--gold); text-decoration: underline; text-underline-offset: .25em; }
.pb-tvlink:hover, .pb-tvlink:focus-visible { color: var(--gold-light); }
.pb-tvlink:focus-visible { outline: 2px solid var(--gold); outline-offset: 3px; }

/* ---------- Full-screen TV page ---------- */
html.pb-page, html.pb-page body { height: 100%; margin: 0; overflow: hidden; background: var(--pb-bg, #0A2A26); }

.pb--tv {
    --u: min(calc(100vw / 160), calc(100vh / 90));
    --k: min(1, calc(7 / var(--rows-wide, 7)));
    display: grid;
    grid-template-rows: auto minmax(0, 1fr) auto;
    row-gap: calc(var(--u) * 2.8);
    width: 100vw;
    height: 100vh;
    padding: calc(var(--u) * 2.8) calc(var(--u) * 4.5) calc(var(--u) * 2.2);
}
.pb--tv .pb-table { height: 100%; }
/* The way back to the site shows while the pointer or remote is in use and fades out when idle. */
.pb--tv .pb-backlink { display: inline; transition: opacity .3s; }
html.pb-idle .pb--tv .pb-backlink { opacity: 0; pointer-events: none; }

/* Portrait screens (a TV hung vertically, a shop-window display). */
@media (max-aspect-ratio: 1/1) {
    .pb--tv {
        --u: min(calc(100vw / 90), calc(100vh / 160));
        --k: min(1, calc(14 / var(--rows-tall, 14)));
        padding: calc(var(--u) * 3.5);
    }
    .pb--tv .pb-head { grid-template-columns: 1fr 1fr; row-gap: calc(var(--u) * 2.5); }
    .pb--tv .pb-raw { grid-column: 1 / -1; grid-row: 2; }
    .pb--tv .pb-raw__label { font-size: calc(var(--u) * 2.7); }
    .pb--tv .pb-tables { grid-template-columns: 1fr; grid-template-rows: auto auto; row-gap: calc(var(--u) * 2.5); }
    .pb--tv .pb-table { height: auto; }
    .pb--tv tbody tr { height: calc(var(--u) * 7.6 * var(--k)); }
    .pb--tv .pb-table thead th:first-child { width: 34%; }
}

/* ---------- Home page section ---------- */
.pb--embed {
    --u: max(5.2px, calc(100vw / 90));
    margin-top: 6rem;
    padding: calc(var(--u) * 6) calc(var(--u) * 3.2) calc(var(--u) * 3.5);
    scroll-margin-top: 4rem;
}
.pb--embed .pb-head { grid-template-columns: 1fr 1fr; row-gap: calc(var(--u) * 3); }
.pb--embed .pb-raw { grid-column: 1 / -1; grid-row: 2; }
.pb--embed .pb-raw__label { font-size: calc(var(--u) * 2.9); }
.pb--embed .pb-brand__logo { display: none; }
.pb--embed .pb-title { padding-right: 0; border-right: 0; font-size: calc(var(--u) * 4.6); }
.pb--embed .pb-tables {
    grid-template-columns: 1fr;
    row-gap: calc(var(--u) * 4);
    margin-top: calc(var(--u) * 4);
}
.pb--embed .pb-table tbody tr { height: calc(var(--u) * 9); }
.pb--embed .pb-table tbody th { padding-top: calc(var(--u) * 1.2); padding-bottom: calc(var(--u) * 1.2); }
.pb--embed .pb-table thead th { font-size: calc(var(--u) * 2.5); }
.pb--embed .pb-table thead th:first-child { width: 38%; }
.pb--embed .item-title { font-size: calc(var(--u) * 2.6); }
.pb--embed .item-buyPrice, .pb--embed .item-sellPrice { font-size: calc(var(--u) * 3); }
.pb--embed .pb-foot { flex-wrap: wrap; margin-top: calc(var(--u) * 3); font-size: max(12px, calc(var(--u) * 2)); }
.pb--embed .pb-tvlink { display: none; }
.pb--embed .pb-range {
    display: block;
    color: var(--ivory-soft);
    font-size: max(10.5px, calc(var(--u) * 1.8));
    font-weight: 300;
}
.pb--embed .pb-range b { font-weight: 500; }
.pb--embed .item-title + .pb-range { margin-top: .3em; }

/* Wide enough for the TV layout: two columns, same proportions. */
@media (min-width: 1100px) {
    .pb--embed {
        --u: calc(100vw / 160);
        margin-top: 7rem;
        padding: calc(var(--u) * 4.5) calc(var(--u) * 6) calc(var(--u) * 3);
    }
    .pb--embed .pb-head { grid-template-columns: 1fr auto 1fr; }
    .pb--embed .pb-raw { grid-column: auto; grid-row: auto; }
    .pb--embed .pb-raw__label { font-size: calc(var(--u) * 2.2); }
    .pb--embed .pb-title { font-size: calc(var(--u) * 4.2); }
    .pb--embed .pb-tables { grid-template-columns: 1fr 1fr; margin-top: calc(var(--u) * 3); }
    .pb--embed .pb-table tbody tr { height: calc(var(--u) * 6.6); }
    .pb--embed .pb-table thead th { font-size: calc(var(--u) * 1.8); }
    .pb--embed .pb-table thead th:first-child { width: 32%; }
    .pb--embed .item-title { font-size: calc(var(--u) * 2); }
    .pb--embed .item-buyPrice, .pb--embed .item-sellPrice { font-size: calc(var(--u) * 2.7); }
    .pb--embed .pb-range { display: none; }
    .pb--embed .pb-foot { margin-top: calc(var(--u) * 2.2); font-size: calc(var(--u) * 1.5); }
    .pb--embed .pb-tvlink { display: inline; }
}

/* TV browsers without min()/max() (roughly before 2020). */
@supports not (width: min(1px, 2px)) {
    .pb--tv, .pb--embed { --u: .625vw; }
}

@media (prefers-reduced-motion: reduce) {
    .item-buyPrice, .item-sellPrice { transition: none; }
}