/* ====================================
   English Version - Five Elements Labels
   ==================================== */

:root {
    --element-wood-color: #2f8f4e;   /* Deep verdant green */
    --element-fire-color: #c0392b;   /* Steady vermillion */
    --element-earth-color: #9c6b2f;  /* Ochre earth tone */
    --element-metal-color: #d4af37;  /* Pale golden hue */
    --element-water-color: #2c6fb2;  /* Deep ocean blue */
}

/* Base positioning for element labels */
.bazi-FourPillars > div ins::after {
    position: absolute;
    top: 15px;
    right: 10px;
    font-size: 20px;
    font-weight: 400;
}

/* Wood element label */
.Wood::after {
    content: "Wood";
    color: var(--element-wood-color);
    font-size: 12px !important;
    letter-spacing: 0.1em;
}

/* Fire element label */
.Fire::after {
    content: "Fire";
    color: var(--element-fire-color);
    font-size: 12px !important;
    letter-spacing: 0.1em;
}

/* Earth element label */
.Earth::after {
    content: "Earth";
    color: var(--element-earth-color);
    font-size: 12px !important;
    letter-spacing: 0.1em;
}

/* Metal element label */
.Metal::after {
    content: "Metal";
    color: var(--element-metal-color);
    font-size: 12px !important;
    letter-spacing: 0.1em;
}

/* Water element label */
.Water::after {
    content: "Water";
    color: var(--element-water-color);
    font-size: 12px !important;
    letter-spacing: 0.1em;
}

/* Override vertical writing mode for English */
.astrology-block .base-pan-bazi .bazi-MainStar .bazi-MainStar-content ins {
    writing-mode: horizontal-tb !important;
    display: inline-block !important;
}

/* 英文版：標籤欄放在上方 */
.astrology-block .base-pan-bazi > .flex {
    flex-wrap: wrap !important;
}

.astrology-block .base-pan-bazi > .flex .labelTxt {
    order: -1 !important;
    width: 100% !important;
    flex-basis: 100% !important;  /* 強制佔滿整行 */
    height: auto !important;
    writing-mode: horizontal-tb !important;
    padding: 12px 0 !important;
    text-align: center !important;
    border-right: none !important;
    border-bottom: 1px solid #d7d7d7 !important;
    letter-spacing: 1px !important;
}

/* 確保其他元素在下一行橫排 */
.astrology-block .base-pan-bazi > .flex > div:not(.labelTxt) {
    flex: 1 !important;
}

/* 加上右邊框 */
.astrology-block .base-pan-bazi > .flex > div:nth-child(1), .astrology-block .base-pan-bazi > .flex > div:nth-child(2) {
    border-right: 1px solid #d7d7d7 !important;
}

.astrology-block .base-pan-bazi ul.flex > li:not(.labelTxt):last-child {
    border-right: 1px solid #d7d7d7 !important;
}

.astrology-block .astrology-block-row .astrology-block-row-value {
    padding: 10px 0 10px 20px !important; /* 增加上下間距 */
    line-height: 1.5;
}

.astrology-block .astrology-block-row .astrology-block-row-title {
    width: 165px;
}

/* 手機版調整 */
@media (max-width: 768px) {
    .astrology-result > .container > .astrology-result-wrap .astrology-block .base-pan-bazi > .flex .labelTxt {
        padding: 10px 0 !important;
    }
    
    .page-index .astrology-block .aside-group table tr {
        display: flex;
        flex-wrap: wrap;
    }

    .page-index .astrology-block .aside-group table td:first-child {
        width: auto;
        flex-shrink: 0;
    }

    .page-index .astrology-block .aside-group table td:nth-child(2) {
        width: 100%;
        padding-top: 3px;
    }
}

/* Small screen adjustments */
@media (max-width: 429px) {
    .bazi-FourPillars > div ins::after {
        top: 0;
        right: 5px;
    }
}