/*
 * Arzinja — in-article coin widget (Base\CoinWidget). Rendered inside
 * .entry-content, so margins/images are reset explicitly against the article
 * typography. Light and dark through its own tokens.
 */
.arz-cw {
    --cw-bg: #ffffff;
    --cw-bg-soft: rgb(242 244 250);
    --cw-border: rgb(211 214 227);
    --cw-title: rgb(31 34 48);
    --cw-muted: rgb(104 109 135);
    --cw-green: #00df9a;
    --cw-up: rgb(0 168 116);
    --cw-down: rgb(220 20 50);
    box-sizing: border-box;
    display: grid;
    grid-template-columns: auto 1fr;
    grid-template-areas: "icon head" "price price" "actions actions";
    gap: 10px 12px;
    align-items: center;
    margin: 28px 0;
    padding: 16px;
    border: 1px solid var(--cw-border);
    border-radius: 14px;
    background: linear-gradient(135deg, rgb(230 252 245 / .7), var(--cw-bg) 65%);
    color: var(--cw-title);
    clear: both;
}
html.dark-mode .arz-cw {
    --cw-bg: rgb(24 29 35);
    --cw-bg-soft: rgb(35 42 50);
    --cw-border: rgb(44 52 62);
    --cw-title: rgb(229 229 229);
    --cw-muted: rgb(163 163 163);
    --cw-up: rgb(84 234 187);
    --cw-down: rgb(255 120 136);
    background: linear-gradient(135deg, rgb(12 42 34 / .8), var(--cw-bg) 65%);
}
.arz-cw * { box-sizing: border-box; }
.arz-cw__icon {
    grid-area: icon;
    width: 44px; height: 44px;
    margin: 0 !important;
    padding: 0;
    border: 0;
    border-radius: 50%;
    box-shadow: none;
    object-fit: contain;
    background: var(--cw-bg);
}
.arz-cw__head { grid-area: head; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.arz-cw__name { margin: 0; font-size: 1.05rem; font-weight: 700; line-height: 1.5; color: var(--cw-title); }
.arz-cw__symbol { font-size: .8rem; color: var(--cw-muted); direction: ltr; unicode-bidi: isolate; text-align: start; }
.arz-cw__price-row {
    grid-area: price;
    display: flex;
    align-items: baseline;
    gap: 10px;
    flex-wrap: wrap;
    padding: 10px 12px;
    border-radius: 10px;
    background: var(--cw-bg-soft);
}
.arz-cw__label { font-size: .8rem; color: var(--cw-muted); }
.arz-cw__price { font-size: 1.15rem; font-weight: 700; color: var(--cw-title); unicode-bidi: plaintext; }
.arz-cw__change { font-size: .9rem; font-weight: 700; color: var(--cw-muted); unicode-bidi: plaintext; direction: ltr; }
.arz-cw__change.is-up { color: var(--cw-up); }
.arz-cw__change.is-down { color: var(--cw-down); }
.arz-cw--stale .arz-cw__price::after { content: " ≈"; color: var(--cw-muted); font-weight: 400; }
.arz-cw__actions { grid-area: actions; display: flex; gap: 8px; flex-wrap: wrap; }
.arz-cw__btn {
    flex: 1 1 140px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 42px;
    padding: 0 14px;
    border-radius: 10px;
    border: 1px solid var(--cw-border);
    background: var(--cw-bg);
    color: var(--cw-title) !important;
    font-size: .95rem;
    font-weight: 700;
    text-decoration: none !important;
    box-shadow: none !important;
    transition: filter .2s;
}
.arz-cw__btn--buy { background: var(--cw-green); border-color: var(--cw-green); color: #fff !important; }
.arz-cw__btn:hover { filter: brightness(.95); }
.arz-cw__btn:focus-visible { outline: 2px solid var(--cw-title); outline-offset: 2px; }
.arz-cw__note { grid-column: 1 / -1; margin: 0; font-size: .72rem; color: var(--cw-muted); }
@media (min-width: 768px) {
    .arz-cw {
        grid-template-columns: auto minmax(0, 1fr) auto;
        grid-template-areas: "icon head price" "actions actions actions";
    }
    .arz-cw__actions { justify-content: flex-start; }
    .arz-cw__btn { flex: 0 1 auto; min-width: 150px; }
}