/* OrderBuilder — TastyTrade-style order panel below the chain picker. */
.order-builder {
    border: 1px solid var(--bs-border-color);
    border-radius: .375rem;
    background: var(--bs-body-bg);
    margin-top: 1rem;
}

.order-builder .ob-header {
    padding: .5rem .85rem;
    border-bottom: 1px solid var(--bs-border-color);
}

/* Risk / greeks summary strip across the top. */
.order-builder .ob-greeks {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;   /* spread evenly across the whole row */
    gap: .4rem 1rem;
    padding: .5rem 1.25rem;
    border-bottom: 1px solid var(--bs-border-color);
    font-size: .8rem;
    color: var(--bs-secondary-color);
}
.order-builder .ob-greeks b {
    color: var(--bs-body-color);
    font-weight: 600;
    margin-left: .25rem;
}
.order-builder .ob-greeks b.ob-maxp { color: var(--bs-success); }
.order-builder .ob-greeks b.ob-maxl { color: var(--bs-danger); }
.order-builder .ob-bset { position: relative; cursor: pointer; border-bottom: 1px dotted var(--bs-secondary-color); }
.order-builder .ob-bset:hover { color: var(--bs-body-color) !important; }
/* Instant CSS tooltip (no native title delay). */
.order-builder .ob-bset[data-tip]:hover::after {
    content: attr(data-tip);
    position: absolute;
    bottom: 100%;
    left: 0;
    margin-bottom: 5px;
    white-space: nowrap;
    background: #000;
    color: #fff;
    padding: .25rem .5rem;
    border-radius: .25rem;
    font-size: .72rem;
    font-weight: 400;
    z-index: 20;
    pointer-events: none;
}

/* Adjustment toolbar (Strikes/Width/Quantity/Expiration/Swap/Undo). */
.order-builder .ob-toolbar {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: .85rem;
    padding: .4rem .85rem;
    border-bottom: 1px solid var(--bs-border-color);
}
.order-builder .ob-tg { display: flex; align-items: center; gap: .15rem; }
.order-builder .ob-tl { font-size: .72rem; color: var(--bs-secondary-color); margin-right: .25rem; }
.order-builder .ob-toolbar .btn { padding: .12rem .4rem; line-height: 1; font-size: .8rem; }

/* Body: legs | price | actions, wrapping on narrow screens. */
.order-builder .ob-body {
    display: flex;
    flex-wrap: wrap;
    gap: 1.25rem;
    padding: .85rem;
}
.order-builder .ob-col { flex: 1 1 260px; min-width: 230px; }
.order-builder .ob-legs-col { flex: 1 1 300px; }
/* Right side: a wide price/slider area on top, the order block pinned bottom-right. */
.order-builder .ob-right-col { flex: 2 1 360px; display: flex; flex-direction: column; min-width: 300px; }
.order-builder .ob-action-area { margin-top: auto; margin-left: auto; max-width: 400px; width: 100%; padding-top: 1rem; }
.order-builder .ob-send { padding: .55rem 1rem; }

.order-builder .ob-legs-table td { padding: .2rem .35rem; border-color: var(--bs-border-color); }
.order-builder .ob-legs-table .badge { font-size: .68rem; }
.order-builder .ob-dte { opacity: .7; }
.order-builder .ob-slider-labels { margin-top: -.15rem; }
/* Slider row spans the price area's full width so the lock's right edge lines up
   with the right-aligned Review & Replace button below it. flex-grow lets the
   slider shrink to fit between the ⌄/⌃ carets and the lock. */
.order-builder .ob-slider-row { width: 100%; }
.order-builder .ob-slider-row .ob-slider { min-width: 0; }
.order-builder .ob-acct-wrap { max-width: 260px; }