/* ============================================
   Project Mango — 主題樣式
   ============================================ */

:root {
    /* Mango Brand Colors v1.3 */
    --mango-primary: #FF8F00;
    --mango-primary-dark: #E65100;
    --mango-primary-light: #FFE082;
    --mango-cream: #FFF8E1;
    --mango-orange: #FF8F00;
    --mango-orange-dark: #E65100;
    --mango-orange-light: #FFF8E1;
    --mango-green: #00B900;
    --mango-blue: #1565C0;
    --mango-trust: #2E7D32;
    --mango-alert: #C62828;

    /* 芒果熟度色 */
    --mango-ripe: #FFB300;       /* 熟芒果 80%+ */
    --mango-half: #FF8F00;       /* 半生熟 60-79% */
    --mango-green-raw: #7CB342;  /* 青芒果 40-59% */
    --mango-sour: #9E9E9E;       /* 酸芒果 <40% */
}

/* Google Fonts */
@import url('https://fonts.googleapis.com/css2?family=Nunito:wght@400;600;700;800&family=IBM+Plex+Sans+Thai:wght@400;500;600;700&display=swap');

/* Navbar */
.text-orange { color: var(--mango-orange) !important; }
.bg-mango { background-color: var(--mango-orange) !important; }
.btn-mango { background: var(--mango-orange); color: #fff; border: none; }
.btn-mango:hover { background: var(--mango-orange-dark); color: #fff; }
.btn-line { background: var(--mango-green); color: #fff; border: none; }
.btn-line:hover { background: #05b34d; color: #fff; }

/* Hero */
.hero-section {
    background: linear-gradient(135deg, var(--mango-orange-light) 0%, #fff 100%);
    padding: 4rem 0;
}

/* Job Card */
.job-card {
    border: 1px solid #f1f1f1;
    border-radius: 12px;
    padding: 1rem;
    transition: all 0.2s;
    text-decoration: none;
    color: inherit;
    display: block;
}
.job-card:hover {
    box-shadow: 0 4px 12px rgba(0,0,0,0.08);
    border-color: var(--mango-orange);
    color: inherit;
}

/* Badges */
.badge-urgent { background: #fee2e2; color: #dc2626; font-weight: 600; }
.badge-foreign { background: #dbeafe; color: #2563eb; }
.badge-industry { background: #f3f4f6; color: #4b5563; }

/* Salary */
.salary-text { color: var(--mango-orange); font-weight: 700; }

/* Filter Pills */
.filter-pill {
    display: inline-block;
    padding: 0.3rem 0.8rem;
    border-radius: 20px;
    font-size: 0.8rem;
    border: 1px solid #e5e7eb;
    background: #fff;
    color: #4b5563;
    cursor: pointer;
    transition: all 0.15s;
    text-decoration: none;
}
.filter-pill:hover, .filter-pill.active {
    background: var(--mango-orange);
    color: #fff;
    border-color: var(--mango-orange);
}

/* Language Selector */
.lang-btn {
    padding: 0.2rem 0.6rem;
    border-radius: 20px;
    font-size: 0.75rem;
    border: 1px solid #e5e7eb;
    background: transparent;
    cursor: pointer;
}
.lang-btn:hover { border-color: var(--mango-orange); color: var(--mango-orange); }

/* Login Card */
.login-card {
    max-width: 420px;
    margin: 3rem auto;
    border-radius: 16px;
    box-shadow: 0 4px 24px rgba(0,0,0,0.08);
}

/* Apply Button (Sticky) */
.apply-sticky {
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    background: #fff;
    border-top: 1px solid #e5e7eb;
    padding: 1rem;
    z-index: 100;
}

/* Stats */
.stat-number { font-size: 2rem; font-weight: 700; color: var(--mango-orange); }

/* Footer */
.mango-footer { background: #111827; color: #9ca3af; padding: 2rem 0; }

/* 字型系統 */
body {
    font-family: 'IBM Plex Sans Thai', 'Nunito', -apple-system, "Noto Sans Myanmar",
                 "Noto Sans Khmer", "Padauk", "Battambang", sans-serif;
    background: var(--mango-cream);
}

/* ============================================
   芒果甜酸比元件
   ============================================ */

/* 甜酸進度條 */
.sweetness-bar {
    height: 10px;
    background: #E0E0E0;
    border-radius: 5px;
    overflow: hidden;
    position: relative;
}
.sweetness-bar-fill {
    height: 100%;
    border-radius: 5px;
    transition: width 0.8s ease-out;
    background: linear-gradient(90deg, var(--mango-ripe), var(--mango-half));
}
.sweetness-bar-fill.level-ripe { background: linear-gradient(90deg, #FFD54F, var(--mango-ripe)); }
.sweetness-bar-fill.level-half { background: linear-gradient(90deg, var(--mango-half), #F57C00); }
.sweetness-bar-fill.level-raw { background: linear-gradient(90deg, #C0CA33, var(--mango-green-raw)); }
.sweetness-bar-fill.level-sour { background: var(--mango-sour); }

/* 芒果熟度標籤 */
.mango-badge {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 2px 10px;
    border-radius: 20px;
    font-size: 0.75rem;
    font-weight: 600;
}
.mango-badge-ripe { background: #FFF8E1; color: #E65100; border: 1px solid #FFB300; }
.mango-badge-half { background: #FFF3E0; color: #E65100; border: 1px solid #FF8F00; }
.mango-badge-raw { background: #F1F8E9; color: #558B2F; border: 1px solid #7CB342; }
.mango-badge-sour { background: #F5F5F5; color: #757575; border: 1px solid #9E9E9E; }

/* 芒果甜度大數字 */
.sweetness-big {
    font-size: 2.5rem;
    font-weight: 800;
    font-family: 'Nunito', sans-serif;
    line-height: 1;
}
.sweetness-big.level-ripe { color: var(--mango-ripe); }
.sweetness-big.level-half { color: var(--mango-half); }
.sweetness-big.level-raw { color: var(--mango-green-raw); }
.sweetness-big.level-sour { color: var(--mango-sour); }

/* 評價卡片（甜的/酸的地方） */
.review-card {
    border: 1px solid #f1f1f1;
    border-radius: 12px;
    padding: 1rem;
    background: #fff;
    margin-bottom: 0.75rem;
}
.review-card:hover { box-shadow: 0 2px 8px rgba(0,0,0,0.06); }
.review-pros { border-left: 3px solid var(--mango-ripe); padding-left: 0.75rem; margin-bottom: 0.5rem; }
.review-cons { border-left: 3px solid var(--mango-alert); padding-left: 0.75rem; margin-bottom: 0.5rem; }
.review-advice { border-left: 3px solid var(--mango-blue); padding-left: 0.75rem; }
.review-mood { font-size: 1.2rem; }

/* 五維度小圖（非雷達圖用） */
.dimension-bar {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 4px;
    font-size: 0.8rem;
}
.dimension-bar-label { width: 60px; text-align: right; color: #757575; }
.dimension-bar-track { flex: 1; height: 6px; background: #E0E0E0; border-radius: 3px; overflow: hidden; }
.dimension-bar-fill { height: 100%; background: var(--mango-primary); border-radius: 3px; transition: width 0.5s; }
.dimension-bar-value { width: 24px; font-weight: 600; color: #333; }

/* 最甜芒果排行卡片 */
.sweetest-card {
    border: 2px solid var(--mango-ripe);
    border-radius: 12px;
    padding: 1rem;
    background: linear-gradient(135deg, #FFF8E1 0%, #fff 100%);
}
.sweetest-rank {
    font-size: 1.2rem;
    font-weight: 800;
    color: var(--mango-primary-dark);
    font-family: 'Nunito', sans-serif;
}

/* 工作者徽章 */
.worker-badge { display: inline-flex; align-items: center; gap: 4px; padding: 2px 8px; border-radius: 12px; font-size: 0.7rem; font-weight: 600; }
.worker-badge-gold { background: #FFF8E1; color: #E65100; border: 1px solid #FFB300; }
.worker-badge-silver { background: #F5F5F5; color: #546E7A; border: 1px solid #90A4AE; }
.worker-badge-bronze { background: #EFEBE9; color: #5D4037; border: 1px solid #8D6E63; }

/* Mobile */
@media (max-width: 768px) {
    .hero-section { padding: 2rem 0; }
    .hero-section h1 { font-size: 1.8rem; }
    .stat-number { font-size: 1.5rem; }
    .sweetness-big { font-size: 2rem; }
}