/**
 * Market Page Specific Styles
 * Only styles unique to the market page that are not in style.css
 */

/* Watchlist star button */
.star-btn {
    background: none;
    border: none;
    font-size: 20px;
    cursor: pointer;
    transition: all var(--transition-fast);
    padding: 4px;
    border-radius: var(--radius-sm);
    color: var(--color-text-tertiary);
}

.star-btn:hover {
    color: #fbbf24;
}

.star-btn.active {
    color: #fbbf24;
}

.star-btn.inactive {
    color: var(--color-text-tertiary);
}

/* Instrument card */
.instrument-card {
    cursor: pointer;
    transition: all var(--transition-fast);
}

.instrument-card:hover {
    transform: translateY(-1px);
    box-shadow: var(--shadow-lg);
}

/* Validation styles */
.form-input.valid {
    border-color: var(--color-success);
}

.form-input.invalid {
    border-color: var(--color-error);
}

.validation-success {
    color: var(--color-success) !important;
}

.validation-error {
    color: var(--color-error) !important;
}

.validation-loading {
    color: var(--color-accent-primary) !important;
}

/* Ticker tags container */
#ticker-tags {
    max-height: 200px;
    overflow-y: auto;
    display: flex;
    flex-direction: column;
    gap: var(--space-sm);
}

/* Mobile market styles */
@media (max-width: 768px) {
    .market-header .flex {
        flex-direction: column;
        gap: var(--space-md);
    }
    
    .market-header .flex.items-end {
        align-items: stretch;
    }
}