/*
 * trade-responsive.css
 * Fluid type & spacing for the trade desks: /trade (spot), /futures/trade, /cfd/trade.
 * Loaded only on those routes from layouts/frontend_tw.blade.php (after the
 * page-specific stylesheets, so equal-specificity rules here win).
 *
 * Why root scaling works here: typography on all three pages is almost entirely
 * rem-based (main.css .fs-* scale and .trading-* type; cfd-trading.css /
 * future-trading.css desks are ~95% rem). Scaling the root font-size therefore
 * scales fonts and all rem spacing proportionally with the viewport, while
 * px-based panel widths / chart heights keep their own breakpoint logic.
 *
 * Scale: 13px root at a 1200px viewport, growing linearly to 16px at 1920px,
 * then capped — >=1920px looks exactly as before. Below 1200px the stacked
 * tablet/mobile layouts keep the default 16px root they were tuned for.
 */

@media (min-width: 1200px) {
    html {
        font-size: clamp(13px, 0.41667vw + 8px, 16px);
    }
}

/* ============================================================
   Spot desk (main.css is px-based for spacing) — tighten the
   big paddings in the cramped 1200–1600 band so panels fit.
   ============================================================ */
@media (min-width: 1200px) and (max-width: 1599.98px) {
    .trading-section .trading-header {
        padding: 16px 12px;
        gap: 8px;
    }

    .trading-section .trading-left {
        padding: 12px;
    }

    .trading-section .trading-left__top {
        margin-bottom: 16px;
    }

    .trading-section .trading-bottom__header {
        padding: 10px 14px;
    }

    .trading-section .buy-sell__wrapper {
        padding: 10px 14px;
    }

    .trading-section .buy-sell__price {
        padding: 10px 14px 0 14px;
    }

    .trading-section .buy-sell__price-number {
        padding: 5px 14px;
    }

    .trading-section .trading-bottom__button {
        padding: 5px 14px 10px 14px;
    }

    /* My Order / generic tables — not the dense .table-two order book,
       which already runs on 3px cell padding. */
    .trading-section .table:not(.table-two) thead tr th {
        padding: 8px 12px;
    }

    .trading-section .table:not(.table-two) tbody tr td {
        padding: 6px 10px;
    }
}

/* ============================================================
   CFD desk — one finer panel step between the existing
   <=1499px block (300/280, chart 400) and the 1200px floor.
   (The futures desk already ships its own 1200–1366 step.)
   ============================================================ */
@media screen and (min-width: 1200px) and (max-width: 1366px) {
    .cfd-trading-v2 {
        /* left stays 300px — narrower clips the asset-list 24H column now that
           the order-form column has its own 280px floor (the center column
           still gets ≥620px at 1200) */
        --bz-chart-height: 380px;
    }
}