/* Main stock display styles */
.stock-quote-container {
    width: 100%;
    max-width: 1000px;
    margin: 0 auto;
    display: flex;
    background-color: #f9f9f9;
    border: 1px solid #ddd;
    padding: 20px;
    font-family: 'Montserrat', sans-serif;
    box-sizing: border-box;
}

.stock-left h2[id^="stock-symbol-"] {
    font-size: 26px;
    font-weight: 700;
    color: #333333;
    font-family: 'Montserrat', sans-serif;
    margin: 0 0 10px;
}

.stock-column {
    padding: 10px;
}

.stock-left {
    width: 35%;
}

.stock-right {
    width: 65%;
}

.stock-left h2 {
    font-size: 24px;
    margin: 0 0 10px;
    font-weight: 700;
}

.stock-price {
    font-size: 32px; /* 增大实时股价字体 */
    font-weight: 700;
    margin-bottom: 10px;
}

.stock-change {
    font-size: 20px;
    font-weight: 600;
    margin-bottom: 15px;
}

.stock-change::before {
    font-size: 24px;
    margin-right: 5px;
    vertical-align: middle;
}

.stock-change.positive::before {
    content: "↑";
    color: green;
}

.stock-change.negative::before {
    content: "↓";
    color: red;
}

.stock-change.positive {
    color: green;
}

.stock-change.negative {
    color: red;
}

.stock-time {
    font-size: 14px;
    color: #888;
    margin: 0 0 15px 0;
    font-weight: 400;
}

.stock-details {
    width: 100%;
    border-collapse: collapse;
    border: none; /* 移除外边框 */
    display: table;
}

.stock-details th,
.stock-details td {
    padding: 8px 10px;
    text-align: left;
    border: none; /* 移除单元格边框 */
    border-bottom: 1px solid #eee; /* 只保留底部边框 */
    white-space: nowrap; /* Prevent line break */
    font-weight: 700; /* 加粗所有字体 */
    font-size: 14px; /* 减小右列字体大小 */
}

.stock-details th {
    width: 160px;
    font-weight: 700;
    color: #333; /* 说明文字颜色较深 */
    font-size: 14px; /* 减小右列字体大小 */
}

.stock-details td {
    color: #666; /* 价格数字颜色较浅 */
}

.stock-details tr:last-child td,
.stock-details tr:last-child th {
    border-bottom: none; /* 最后一行移除底部边框 */
}

.positive {
    color: green;
}

.negative {
    color: red;
}

/* 确保涨跌数据的颜色优先级更高 */
.stock-details td.positive,
.stock-details td.negative {
    color: green !important;
}

.stock-details td.negative {
    color: red !important;
}

.stock-flash {
    background-color: #EEEEEE !important;
    transition: background-color 0.4s;
}

/* PC端两个表格横向排列 */
.stock-details-left {
    width: 49%;
    float: left;
    margin-right: 2%;
}

.stock-details-right {
    width: 49%;
    float: right;
}