/* ─── Shaka Manta 深海俱樂部 — Frontend Styles ─── */

.sm-myaccount-tier {
    max-width: 600px;
    margin-top: 24px;      /* 1. 與 WC 導覽選單之間的間距 */
    padding-bottom: 40px;  /* 2. 避免黏到 footer */
}

/* ── Header ── */
.sm-myaccount-header {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 24px;
    padding-bottom: 12px;
    border-bottom: 2px solid #c9a84c;
}
.sm-myaccount-logo { font-size: 24px; }
.sm-myaccount-header h3 {
    margin: 0;
    font-size: 18px;
    font-weight: 700;
    color: #f5e6d3;
}

/* ── Current tier ── */
.sm-myaccount-current {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 20px;
}
.sm-myaccount-label {
    font-size: 14px;
    color: #c9a84c;
    font-weight: 600;
}
.sm-myaccount-badge {
    display: inline-block;
    padding: 5px 16px;
    border-radius: 20px;
    font-size: 14px;
    font-weight: 700;
    border: 1px solid;
}

/* ── Spend ── */
.sm-myaccount-spend {
    margin-bottom: 20px;
}
.sm-myaccount-spend-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 12px 16px;
    background: #f8f5f1;
    border: 1px solid rgba(201, 168, 76, 0.35);
    border-radius: 8px;
    font-size: 14px;
    color: #3e3028;
}
.sm-myaccount-spend-row strong {
    font-size: 18px;
    color: #3e3028;
    font-weight: 700;
}

/* ── Progress ── */
.sm-myaccount-progress-section {
    margin-bottom: 0; /* roadmap 會接著進度條，不需額外間距 */
}

/* 參考購物車促銷框的虛線設計 */
.sm-myaccount-next-box {
    border: 2px dashed rgba(201, 168, 76, 0.45);
    border-radius: 8px;
    padding: 10px 14px;
    margin-bottom: 12px;
    background: rgba(201, 168, 76, 0.04);
}
.sm-myaccount-next {
    font-size: 13px;
    color: #f5e6d3;
    margin: 0;
}
.sm-myaccount-next strong { color: #c9a84c; }

.sm-myaccount-max {
    font-size: 16px;
    font-weight: 700;
    color: #c9a84c;
    margin-bottom: 8px;
}
.sm-myaccount-progress-bar {
    background: rgba(245, 230, 211, 0.12);
    border-radius: 10px;
    height: 16px;
    overflow: hidden;
}
.sm-myaccount-progress-fill {
    height: 100%;
    background: linear-gradient(90deg, #c9a84c, #4a90a2);
    border-radius: 10px;
    transition: width .4s ease;
}
.sm-myaccount-pct {
    text-align: right;
    font-size: 12px;
    color: #c9a84c;
    opacity: 0.8;
    margin-top: 4px;
    margin-bottom: 20px; /* 3. 讓進度條和等級一覽有呼應的間距 */
}

/* ── Tier roadmap ── */
/* 3. 連結感：用相同的金色虛線包住整個 roadmap */
.sm-myaccount-roadmap {
    border: 2px dashed rgba(201, 168, 76, 0.3);
    border-radius: 10px;
    padding: 16px 14px 14px;
}
.sm-myaccount-roadmap h4 {
    margin: 0 0 12px;
    font-size: 13px;
    color: #c9a84c;
    font-weight: 700;
    letter-spacing: 0.05em;
    text-transform: uppercase;
}
.sm-myaccount-tiers {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

/* 3. 等級項目 */
.sm-myaccount-tier-item {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 14px;
    border-radius: 8px;
    background: rgba(245, 230, 211, 0.05);
    border: 1px solid rgba(245, 230, 211, 0.08);
    border-left: 3px solid transparent;
    font-size: 13px;
    color: rgba(245, 230, 211, 0.35); /* 3. 未抵達：更暗、更神秘 */
    transition: all .2s;
}
.sm-myaccount-tier-item--reached {
    color: #3e3028;
    background: #faf8f6;
    border-color: rgba(245, 230, 211, 0.12);
    border-left-width: 3px;
}
.sm-myaccount-tier-item--current {
    background: #f0ece6;
    font-weight: 600;
    box-shadow: inset 0 0 0 1px #c9a84c;
    border-left-width: 3px;
    color: #3e3028;
}
.sm-myaccount-tier-dot {
    width: 10px;
    height: 10px;
    border-radius: 50%;
    flex-shrink: 0;
}
.sm-myaccount-tier-item:not(.sm-myaccount-tier-item--reached) .sm-myaccount-tier-dot {
    opacity: .3;
}
.sm-myaccount-tier-name {
    flex: 1;
    /* 3. 未抵達的名稱用等寬字體，讓【？？？】排版整齊 */
    font-family: inherit;
}
.sm-myaccount-tier-item:not(.sm-myaccount-tier-item--reached) .sm-myaccount-tier-name {
    letter-spacing: 0.08em;
    font-style: italic;
}
.sm-myaccount-tier-threshold {
    font-size: 12px;
    opacity: 0.6;
}
.sm-myaccount-tier-item--reached .sm-myaccount-tier-threshold,
.sm-myaccount-tier-item--current .sm-myaccount-tier-threshold {
    opacity: 1;
}
.sm-myaccount-tier-you {
    font-size: 11px;
    color: #c9a84c;
    font-weight: 700;
}