/* ============================================================
   LuckyAnyway BaZi
   Customer-facing result
   ============================================================ */


.lucky-bazi-report {
    width: 100%;
    max-width: 1100px;
    margin: 40px auto;
    padding: 0;
    box-sizing: border-box;
    color: #222;
}


/* ============================================================
   Form container
   ============================================================ */

.bazi-container {
    width: 100%;
    max-width: 1100px;
    margin: 40px auto;
    box-sizing: border-box;
}

.bazi-container h2 {
    margin: 0 0 10px;
    font-size: 30px;
    font-weight: 600;
    line-height: 1.2;
}

.bazi-container > form > p {
    margin: 0 0 30px;
    font-size: 15px;
    opacity: 0.75;
}


/* ============================================================
   表单字段网格

   桌面：两列并排
   （Birth Date | Birth Time）
   （Gender     | Country）
   （City       | 空）
   按钮独占一整行

   手机：自动变回单列竖排
   ============================================================ */

.bazi-form-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(220px, 1fr));
    gap: 24px 40px;
    max-width: 640px;
}

.bazi-field {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.bazi-field label {
    font-size: 14px;
    font-weight: 600;
}

.bazi-field input,
.bazi-field select {
    width: 100%;
    box-sizing: border-box;
    padding: 10px 12px;
    font-size: 15px;
    border: 1px solid #ccc;
    border-radius: 4px;
    background: #fff;
    color: #222;
}

.bazi-field input:focus,
.bazi-field select:focus {
    outline: none;
    border-color: #888;
}


/* ============================================================
   提交按钮

   独占一整行，放在网格最下面
   ============================================================ */

.bazi-field-submit {
    grid-column: 1 / -1;
    flex-direction: row;
}

.bazi-button {
    align-self: flex-start;
    padding: 12px 28px;
    font-size: 15px;
    font-weight: 600;
    color: #fff;
    background: #2c4a6e;
    border: none;
    border-radius: 4px;
    cursor: pointer;
}

.bazi-button:hover {
    background: #1f3a58;
}

.bazi-button:disabled {
    opacity: 0.6;
    cursor: not-allowed;
}


/* ============================================================
   Header
   ============================================================ */

.lucky-bazi-report-header {
    margin-bottom: 40px;
}

.lucky-bazi-eyebrow {
    font-size: 12px;
    letter-spacing: 2px;
    font-weight: 600;
    margin-bottom: 10px;
    opacity: 0.65;
}

.lucky-bazi-report-header h2 {
    margin: 0 0 10px;
    font-size: 32px;
    line-height: 1.2;
    font-weight: 600;
}

.lucky-bazi-report-header p {
    margin: 0;
    font-size: 15px;
    line-height: 1.7;
    opacity: 0.7;
}


/* ============================================================
   General label
   ============================================================ */

.lucky-bazi-label {
    font-size: 12px;
    text-transform: uppercase;
    letter-spacing: 1.4px;
    font-weight: 600;
    opacity: 0.6;
}


/* ============================================================
   Day Master
   ============================================================ */

.lucky-bazi-day-master {
    display: flex;
    align-items: center;
    gap: 24px;
    margin-bottom: 50px;
}

.lucky-bazi-day-master-symbol {
    width: 90px;
    height: 90px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    background: #f5f5f5;
    font-size: 48px;
    line-height: 1;
}

.lucky-bazi-day-master-content {
    display: flex;
    flex-direction: column;
    gap: 5px;
}

.lucky-bazi-day-master-name {
    font-size: 22px;
    font-weight: 600;
}

.lucky-bazi-day-master-pinyin {
    font-size: 14px;
    opacity: 0.65;
}

.lucky-bazi-day-master-meta {
    display: flex;
    gap: 12px;
    font-size: 14px;
}


/* ============================================================
   Four Pillars
   ============================================================ */

.lucky-bazi-pillars {
    margin-bottom: 50px;
}

.lucky-bazi-pillars-title {
    margin: 0 0 22px;
    font-size: 24px;
    font-weight: 600;
}


/*
   Horizontal scroll container.

   Desktop:
   正常显示四列

   Mobile:
   可以横向滑动，不破坏表格结构。
*/

.lucky-bazi-pillars-wrapper {
    width: 100%;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
}


/*
   真正的四柱 Matrix

   第一列 = row labels
   后面四列 = Year / Month / Day / Hour
*/

.lucky-bazi-pillars-grid {
    display: grid;

    grid-template-columns:
        minmax(85px, 0.8fr)
        repeat(4, minmax(130px, 1fr));

    min-width: 680px;

    border-top: 1px solid #e5e5e5;
    border-left: 1px solid #e5e5e5;
}


/* ============================================================
   左侧标签列
   ============================================================ */

.lucky-bazi-pillar-label-column {
    display: grid;

    grid-template-rows:
        58px
        72px
        82px
        82px
        65px;
}


/* ============================================================
   四个柱子的列
   ============================================================ */

.lucky-bazi-pillar-column {
    display: grid;

    grid-template-rows:
        58px
        72px
        82px
        82px
        65px;

    text-align: center;
}


/* ============================================================
   每一格
   ============================================================ */

.lucky-bazi-pillar-column > div,
.lucky-bazi-pillar-label-column > div {
    display: flex;
    align-items: center;
    justify-content: center;

    padding: 8px 10px;

    box-sizing: border-box;

    border-right: 1px solid #e5e5e5;
    border-bottom: 1px solid #e5e5e5;
}


/* ============================================================
   Header: Year / Month / Day / Hour
   ============================================================ */

.lucky-bazi-pillar-column-header {
    font-size: 14px;
    font-weight: 600;
}


/* ============================================================
   左侧行标题
   ============================================================ */

.lucky-bazi-row-label {
    justify-content: flex-start !important;

    font-size: 13px;
    font-weight: 600;

    color: #555;
}


/* ============================================================
   Ten God
   ============================================================ */

.lucky-bazi-pillar-ten-god {
    font-size: 13px;
    line-height: 1.35;
}


/* ============================================================
   天干
   ============================================================ */

.lucky-bazi-pillar-stem {
    font-size: 34px;
    line-height: 1;
    font-weight: 500;
}


/* ============================================================
   地支
   ============================================================ */

.lucky-bazi-pillar-branch {
    font-size: 34px;
    line-height: 1;
    font-weight: 500;
}


/* ============================================================
   Pinyin
   ============================================================ */

.lucky-bazi-pillar-pinyin {
    font-size: 12px;
    opacity: 0.65;
    white-space: nowrap;
}


/* ============================================================
   藏干
   ============================================================ */

.lucky-bazi-pillar-hidden {
    font-size: 13px;
    white-space: nowrap;
}


/* ============================================================
   Five Elements
   ============================================================ */

.lucky-bazi-day-master-symbol.wood,
.lucky-bazi-pillar-stem.wood,
.lucky-bazi-pillar-branch.wood,
.lucky-bazi-element-tag.wood {
    color: #4f7d45;
}

.lucky-bazi-day-master-symbol.fire,
.lucky-bazi-pillar-stem.fire,
.lucky-bazi-pillar-branch.fire,
.lucky-bazi-element-tag.fire {
    color: #b54a3a;
}

.lucky-bazi-day-master-symbol.earth,
.lucky-bazi-pillar-stem.earth,
.lucky-bazi-pillar-branch.earth,
.lucky-bazi-element-tag.earth {
    color: #a1743f;
}

.lucky-bazi-day-master-symbol.metal,
.lucky-bazi-pillar-stem.metal,
.lucky-bazi-pillar-branch.metal,
.lucky-bazi-element-tag.metal {
    color: #777;
}

.lucky-bazi-day-master-symbol.water,
.lucky-bazi-pillar-stem.water,
.lucky-bazi-pillar-branch.water,
.lucky-bazi-element-tag.water {
    color: #416d8f;
}


/* ============================================================
   Strength
   ============================================================ */

.lucky-bazi-strength-card {
    margin-bottom: 36px;
    padding: 28px 30px;
    border: 1px solid #e5e5e5;
}

.lucky-bazi-strength-result {
    margin-top: 12px;
}

.lucky-bazi-strength-status {
    font-size: 18px;
    line-height: 1.6;
}

.lucky-bazi-strength-score {
    margin-top: 12px;
    font-size: 14px;
    opacity: 0.7;
}

.lucky-bazi-strength-score strong {
    margin-left: 8px;
    font-size: 22px;
    color: #222;
}

.lucky-bazi-strength-score span {
    margin-left: 3px;
}


/* ============================================================
   Favorable / Unfavorable
   ============================================================ */

.lucky-bazi-elements-card {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 40px;

    margin-bottom: 36px;
}

.lucky-bazi-element-block {
    padding: 28px 30px;
    border: 1px solid #e5e5e5;
}

.lucky-bazi-element-list {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;

    margin-top: 16px;
}

.lucky-bazi-element-tag {
    display: inline-flex;
    align-items: center;

    font-size: 15px;
    font-weight: 600;
}


/* ============================================================
   Tiao Hou
   ============================================================ */

.lucky-bazi-tiaohou-card {
    margin-bottom: 36px;
    padding: 28px 30px;
    border: 1px solid #e5e5e5;
}

.lucky-bazi-tiaohou-content {
    display: flex;
    gap: 14px;

    margin-top: 16px;
}

.lucky-bazi-tiao-tag {
    font-size: 30px;
    font-weight: 500;
}


/* ============================================================
   Analysis Note
   ============================================================ */

.lucky-bazi-analysis-notes {
    margin-bottom: 36px;
    padding: 24px 28px;
    border: 1px solid #e5e5e5;
}

.lucky-bazi-analysis-notes ul {
    margin: 12px 0 0 18px;
    padding: 0;
}

.lucky-bazi-analysis-notes li {
    margin-bottom: 7px;
    font-size: 14px;
    line-height: 1.6;
}


/* ============================================================
   Deeper reading
   ============================================================ */

.lucky-bazi-note {
    margin-top: 50px;
    padding: 28px 0;
    border-top: 1px solid #e5e5e5;
}

.lucky-bazi-note span {
    font-size: 16px;
    font-weight: 600;
}

.lucky-bazi-note p {
    margin: 8px 0 0;
    font-size: 14px;
    opacity: 0.7;
}


/* ============================================================
   Loading
   ============================================================ */

.lucky-bazi-loading {
    padding: 50px 20px;
    text-align: center;
}

.lucky-bazi-loading-title {
    font-size: 18px;
    font-weight: 600;
}

.lucky-bazi-loading-text {
    margin-top: 8px;
    font-size: 14px;
    opacity: 0.6;
}


/* ============================================================
   Error
   ============================================================ */

.lucky-bazi-error {
    padding: 30px;
    border: 1px solid #ddd;
}

.lucky-bazi-error h3 {
    margin: 0 0 10px;
}

.lucky-bazi-error p {
    margin: 0;
}


/* ============================================================
   Empty
   ============================================================ */

.lucky-bazi-empty {
    opacity: 0.4;
}


/* ============================================================
   Mobile
   ============================================================ */

@media (max-width: 700px) {

    .lucky-bazi-report {
        margin: 25px auto;
    }


    .lucky-bazi-report-header h2 {
        font-size: 26px;
    }


    .lucky-bazi-day-master {
        gap: 16px;
        margin-bottom: 35px;
    }


    .lucky-bazi-day-master-symbol {
        width: 70px;
        height: 70px;
        font-size: 38px;
    }


    .lucky-bazi-day-master-name {
        font-size: 19px;
    }


    .lucky-bazi-pillars-title {
        font-size: 21px;
    }


    .lucky-bazi-elements-card {
        grid-template-columns: 1fr;
        gap: 15px;
    }


    .lucky-bazi-strength-card,
    .lucky-bazi-element-block,
    .lucky-bazi-tiaohou-card {
        padding: 22px;
    }


    /*
    表单在手机上变回单列竖排
    */

    .bazi-form-grid {
        grid-template-columns: 1fr;
        gap: 20px;
        max-width: 100%;
    }

    .bazi-field-submit {
        margin-top: 8px;
    }

}