/* =============================================
   Buy/Sell Quote Page — Extra Styles
   (Inherits from quote.css)
   ============================================= */

/* Intent toggle — Buy / Sell */
.intent-toggle-group {
    display: flex;
    gap: 0.75rem;
    margin-top: 0.5rem;
}
.intent-toggle-option {
    flex: 1;
    background: #f8f9fa;
    border: 2px solid #e0e0e0;
    border-radius: 10px;
    padding: 1rem;
    text-align: center;
    cursor: pointer;
    font-weight: 700;
    font-size: 1.05rem;
    font-family: var(--secondary-font);
    color: var(--secondary-color);
    transition: all 0.2s;
}
.intent-toggle-option:hover {
    border-color: var(--primary-color);
    background: rgba(0,128,128,0.05);
    transform: translateY(-1px);
}
.intent-toggle-option:has(input:checked),
.intent-toggle-option.active {
    border-color: var(--primary-color);
    background: rgba(0,128,128,0.1);
    box-shadow: 0 2px 8px rgba(0,128,128,0.2);
}
.intent-toggle-option input[type="radio"] {
    display: none;
}
.intent-toggle-option i {
    margin-right: 0.35rem;
    color: var(--primary-color);
}

/* Buy/Sell button pair on devices page */
.bs-btn-group {
    display: flex;
    gap: 0.5rem;
    margin-top: 0.5rem;
}
.bs-btn-group .main-btn {
    flex: 1;
    text-align: center;
    font-size: 0.85rem;
    padding: 0.5rem 0.75rem;
}
.bs-btn-group .main-btn.btn-sell {
    background: var(--secondary-color);
}
.bs-btn-group .main-btn.btn-sell:hover {
    background: var(--primary-color);
}

/* Mobile */
@media (max-width: 575px) {
    .intent-toggle-group {
        flex-direction: column;
    }
}