/* ═══════════════════════════════════════════════════════════
   BUY / SELL WIDGET — Glass Compact Two-Row Layout
   ═══════════════════════════════════════════════════════════ */

/* ── Panel — white transparent glass container ── */

.tv-bs-panel{
    width:220px;
    background:transparent;
    border:1px solid rgba(255,255,255,.18);
    border-radius:8px;
    padding:0;
    display:none;
    flex-direction:column;
    gap:0;
    box-sizing:border-box;
    overflow:hidden;
}

.tv-bs-panel.open{
    display:flex;
}

/* ── Top row: white transparent glass segmented control ── */

.tv-bs-top-row{
    display:flex;
    align-items:stretch;
    height:32px;
    background:rgba(255,255,255,.04);
    backdrop-filter:blur(2px);
    -webkit-backdrop-filter:blur(2px);
}

/* ── Labels (SELL / BUY) — text only, no colored background ── */

.tv-bs-label{
    font-size:10.8px;
    font-weight:700;
    letter-spacing:.8px;
    text-align:center;
    user-select:none;
    display:flex;
    align-items:center;
    justify-content:center;
    padding:0 10px;
    box-sizing:border-box;
}

.tv-bs-label-sell{
    color:#ff4d4f;
    border-top:1px solid rgba(255,77,79,.75);
    border-left:1px solid rgba(255,77,79,.75);
    border-right:1px solid rgba(255,77,79,.75);
    border-bottom:none;
    border-radius:7px 0 0 0;
    flex:1;
}

.tv-bs-label-buy{
    color:#16c35b;
    border-top:1px solid rgba(22,195,91,.75);
    border-left:1px solid rgba(22,195,91,.75);
    border-right:1px solid rgba(22,195,91,.75);
    border-bottom:none;
    border-radius:0 7px 0 0;
    flex:1;
}

/* ── Lot-size arrow buttons — white glass ── */

.tv-bs-lot-arr{
    width:24px;
    padding:0;
    border-top:1px solid rgba(59,130,246,.7);
    border-bottom:1px solid rgba(59,130,246,.7);
    border-left:none;
    border-right:none;
    background:transparent;
    color:#94a3b8;
    display:flex;
    align-items:center;
    justify-content:center;
    cursor:pointer;
    transition:background .15s;
    flex-shrink:0;
    box-sizing:border-box;
}

.tv-bs-lot-arr:hover{
    background:rgba(59,130,246,.10);
}

.tv-bs-lot-arr svg{
    width:12px;
    height:12px;
    fill:none;
    stroke:currentColor;
    stroke-width:3;
    stroke-linecap:round;
    stroke-linejoin:round;
}

/* ── Lot-size input — white glass ── */

.tv-bs-lot-input{
    width:48px;
    border-left:1px solid rgba(156,163,175,.8);
    border-right:1px solid rgba(156,163,175,.8);
    border-top:1px solid rgba(59,130,246,.7);
    border-bottom:1px solid rgba(59,130,246,.7);
    border-radius:0;
    background:transparent;
    color:#e2e8f0;
    text-align:center;
    font-size:14.4px;
    font-weight:600;
    outline:none;
    box-sizing:border-box;
}

.tv-bs-lot-input:focus{
    border-left-color:rgba(156,163,175,.95);
    border-right-color:rgba(156,163,175,.95);
    border-top-color:rgba(59,130,246,.95);
    border-bottom-color:rgba(59,130,246,.95);
    background:rgba(59,130,246,.06);
}

/* ── Bottom row: colored transparent backgrounds ── */

.tv-bs-bottom-row{
    display:flex;
    gap:1px;
    border-top:1px solid rgba(255,255,255,.1);
    background:rgba(255,255,255,.03);
}

.tv-bs-price{
    height:34px;
    display:flex;
    align-items:center;
    justify-content:center;
    font-size:16.8px;
    font-weight:700;
    cursor:pointer;
    transition:background .18s ease;
    flex:1;
    box-sizing:border-box;
    backdrop-filter:blur(2px);
    -webkit-backdrop-filter:blur(2px);
}

/* SELL price — transparent red */

.tv-bs-price-sell{
    background:rgba(255,235,236,0.92);
    color:#ff4d4f;
    border-left:1px solid rgba(255,77,79,.75);
    border-right:1px solid rgba(255,77,79,.75);
    border-bottom:1px solid rgba(255,77,79,.75);
    border-top:none;
    border-radius:0 0 0 7px;
}

.tv-bs-price-sell:hover{
    background:rgba(255,220,222,0.95);
}

/* BUY price — transparent green */

.tv-bs-price-buy{
    background:rgba(230,248,235,0.92);
    color:#16c35b;
    border-left:1px solid rgba(22,195,91,.75);
    border-right:1px solid rgba(22,195,91,.75);
    border-bottom:1px solid rgba(22,195,91,.75);
    border-top:none;
    border-radius:0 0 7px 0;
}

.tv-bs-price-buy:hover{
    background:rgba(210,245,220,0.95);
}

/* ═══════════════════════════════════════════════════════════
   TOGGLE BUTTON
   ═══════════════════════════════════════════════════════════ */

.tv-bs-sym-btn{
    width:28px;
    height:28px;
    border:1px solid rgba(255,255,255,.18);
    background:rgba(255,255,255,.30);
    backdrop-filter:blur(6px);
    -webkit-backdrop-filter:blur(6px);
    color:#94a3b8;
    border-radius:6px;
    display:flex;
    align-items:center;
    justify-content:center;
    cursor:pointer;
    transition:background .15s;
}

.tv-bs-sym-btn:hover{
    background:rgba(255,255,255,.45);
}

.tv-bs-sym-btn:active{
    background:rgba(255,255,255,.55);
}

.tv-bs-arrow-icon{
    width:14px;
    height:14px;
    transition:.25s ease;
}

.tv-bs-sym-btn.active .tv-bs-arrow-icon{
    transform:rotate(180deg);
}

/* ═══════════════════════════════════════════════════════════
   WRAPPER POSITIONING
   ═══════════════════════════════════════════════════════════ */

.tv-bs-wrap{
    position:absolute;
    top:10px;
    left:7px;
    right:auto;
    bottom:auto;
    z-index:1000;
}

/* ═══════════════════════════════════════════════════════════
   PRICE FORMATTING SPANS (superscript last digit)
   ═══════════════════════════════════════════════════════════ */

.bsp-base,
.bsp-dot,
.bsp-small,
.bsp-big{
    font-size:inherit;
    font-weight:inherit;
}

.bsp-sup{
    font-size:.65em;
    font-weight:600;
    vertical-align:super;
    margin-left:-.05em;
    line-height:1;
}

/* ═══════════════════════════════════════════════════════════
   LIGHT THEME
   ═══════════════════════════════════════════════════════════ */

[data-theme="light"] .tv-bs-panel{
    background:transparent;
    border-color:rgba(0,0,0,.1);
}

[data-theme="light"] .tv-bs-top-row{
    background:rgba(255,255,255,.06);
}

[data-theme="light"] .tv-bs-label-sell{
    color:#ff4d4f;
    border-top-color:rgba(255,77,79,.78);
    border-left-color:rgba(255,77,79,.78);
    border-right-color:rgba(255,77,79,.78);
}

[data-theme="light"] .tv-bs-label-buy{
    color:#16c35b;
    border-top-color:rgba(22,195,91,.78);
    border-left-color:rgba(22,195,91,.78);
    border-right-color:rgba(22,195,91,.78);
}

[data-theme="light"] .tv-bs-lot-arr{
    border-top-color:rgba(37,99,235,.72);
    border-bottom-color:rgba(37,99,235,.72);
    color:#64748b;
}

[data-theme="light"] .tv-bs-lot-arr:hover{
    background:rgba(37,99,235,.08);
}

[data-theme="light"] .tv-bs-lot-input{
    border-left-color:rgba(156,163,175,.82);
    border-right-color:rgba(156,163,175,.82);
    border-top-color:rgba(37,99,235,.72);
    border-bottom-color:rgba(37,99,235,.72);
    color:#1e293b;
}

[data-theme="light"] .tv-bs-bottom-row{
    border-top-color:rgba(0,0,0,.08);
}

[data-theme="light"] .tv-bs-price-sell{
    background:rgba(255,241,242,0.93);
    color:#d92d20;
    border-left-color:rgba(255,77,79,.78);
    border-right-color:rgba(255,77,79,.78);
    border-bottom-color:rgba(255,77,79,.78);
}

[data-theme="light"] .tv-bs-price-sell:hover{
    background:rgba(255,225,228,0.96);
}

[data-theme="light"] .tv-bs-price-buy{
    background:rgba(240,253,244,0.93);
    color:#0f9f48;
    border-left-color:rgba(22,195,91,.78);
    border-right-color:rgba(22,195,91,.78);
    border-bottom-color:rgba(22,195,91,.78);
}

[data-theme="light"] .tv-bs-price-buy:hover{
    background:rgba(220,252,231,0.96);
}

[data-theme="light"] .tv-bs-sym-btn{
    background:rgba(255,255,255,.40);
    border-color:rgba(0,0,0,.1);
    color:#64748b;
}

[data-theme="light"] .tv-bs-sym-btn:hover{
    background:rgba(255,255,255,.55);
}



/* ==========================================================================
   RESPONSIVE WIDGET OVERRIDES (.bs-size-medium / .bs-size-small)
   ========================================================================== */

/* Max width safety constraints */
.tv-bs-wrap {
    max-width: calc(100% - 14px);
}
.tv-bs-panel {
    max-width: 100%;
}

/* ---- Medium Mode ---- */
.tv-bs-wrap.bs-size-medium .tv-bs-sym-btn {
    width: 22px;
    height: 22px;
    border-radius: 4px;
}
.tv-bs-wrap.bs-size-medium .tv-bs-sym-btn .tv-bs-arrow-icon {
    width: 12px;
    height: 12px;
}
.tv-bs-wrap.bs-size-medium .tv-bs-panel {
    width: 170px;
    border-radius: 6px;
}
.tv-bs-wrap.bs-size-medium .tv-bs-top-row {
    height: 24px;
}
.tv-bs-wrap.bs-size-medium .tv-bs-label {
    font-size: 9px;
    padding: 0 4px;
}
.tv-bs-wrap.bs-size-medium .tv-bs-lot-arr {
    width: 18px;
}
.tv-bs-wrap.bs-size-medium .tv-bs-lot-arr svg {
    width: 9px;
    height: 9px;
}
.tv-bs-wrap.bs-size-medium .tv-bs-lot-input {
    width: 36px;
    font-size: 11px;
}
.tv-bs-wrap.bs-size-medium .tv-bs-price {
    height: 28px;
    font-size: 13px;
}

/* ---- Small / Extra-Compact Mode ---- */
.tv-bs-wrap.bs-size-small .tv-bs-sym-btn {
    width: 18px;
    height: 18px;
    border-radius: 3px;
}
.tv-bs-wrap.bs-size-small .tv-bs-sym-btn .tv-bs-arrow-icon {
    width: 10px;
    height: 10px;
}
.tv-bs-wrap.bs-size-small .tv-bs-panel {
    width: 130px;
    border-radius: 4px;
}
.tv-bs-wrap.bs-size-small .tv-bs-top-row {
    display: none; /* Hide the lot sizes and labels completely in extra-compact mode */
}
.tv-bs-wrap.bs-size-small .tv-bs-price {
    height: 24px;
    font-size: 11px;
}
.tv-bs-wrap.bs-size-small .tv-bs-price-sell {
    border-radius: 4px 0 0 4px;
    border-top: 1px solid rgba(255,77,79,.75);
}
.tv-bs-wrap.bs-size-small .tv-bs-price-buy {
    border-radius: 0 4px 4px 0;
    border-top: 1px solid rgba(22,195,91,.75);
}
[data-theme="light"] .tv-bs-wrap.bs-size-small .tv-bs-price-sell {
    border-top-color: rgba(255,77,79,.78);
}
[data-theme="light"] .tv-bs-wrap.bs-size-small .tv-bs-price-buy {
    border-top-color: rgba(22,195,91,.78);
}

/* ── Disabled state (lot exceeds maxLotSize) ── */
.tv-bs-disabled {
    opacity: 0.35;
    pointer-events: none;
    cursor: not-allowed;
}