/**
 * 職場雷達 (radar) - Modal + header tooltip + 儲存後 promo bar 淡出
 *
 * 包含：
 *   #radar_modal              — modal 容器 (z-index 提升至 9999 蓋過閱讀挑戰 widget)
 *   .radar-modal-content      — modal 內容卡片，含淡出動畫
 *   .radar-field / .radar-*   — modal 內表單元件 (產業/職位下拉)
 *   .radar-success-area       — 儲存成功訊息區
 *   .radar-promo-bar          — 儲存成功後同步收合淡出
 *   .radar-header-tooltip     — header 人頭圖示下方的「職場雷達」浮窗 tooltip
 *   .radar-icon               — tooltip 內旋轉的雷達掃描動畫 icon
 */

/* === Modal === */
/* 預設 .modal z-index 是 999，但閱讀挑戰 widget 是 9998 會蓋過去；提高優先級 */
#radar_modal {
    z-index: 9999;
}

.radar-modal-content {
    max-width: 380px;
    text-align: center;
    padding: 1.5rem 1.5rem !important;
    border-radius: 10px;
}

/* 右上 X 關閉按鈕 hover 動效：旋轉 + 灰底圓圈 */
/* 固定 32x32 + flex 置中 icon，確保 hover 灰底是正圓 */
#radar_modal .modal-close {
    width: 32px;
    height: 32px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    color: #999;
    transition: transform .3s cubic-bezier(.34, 1.56, .64, 1), color .2s ease, background-color .2s ease;
}

#radar_modal .modal-close:hover {
    transform: rotate(90deg);
    color: #555;
    background-color: rgba(0, 0, 0, .06);
}

#radar_modal .modal-close:active {
    background-color: rgba(0, 0, 0, .1);
}

.radar-modal-body {
    padding: 8px 0 4px;
}

.radar-modal-title {
    font-size: 24px;
    font-weight: 700;
    margin-bottom: 10px;
    color: #1a2b4a;
}

.radar-modal-desc {
    font-size: 14px;
    color: #555;
    line-height: 1.6;
    margin-bottom: 20px;
}

.radar-login-btn {
    display: inline-block;
    width: 100%;
    padding: 10px 0;
    border-radius: 4px;
    font-size: 16px;
    font-weight: 600;
    text-align: center;
    transition: 0.5s;
    border: none !important;
    box-shadow: none !important;
    background: #00479d;
    color: #fff;
}

.radar-login-btn:hover {
    color: #fff;
    background-color: #1660cb !important;
}

.radar-field {
    text-align: left;
    margin-bottom: 16px;
}

.radar-label {
    display: block;
    font-size: 14px;
    color: #333;
    margin-bottom: 6px;
    font-weight: 500;
}

.radar-select-wrap {
    position: relative;
}

.radar-select {
    width: 100%;
    padding: 10px 36px 10px 12px;
    margin-bottom: 0;
    border: 1px solid #ccc;
    border-radius: 4px;
    font-size: 14px;
    appearance: none;
    background: #fff;
    color: #333;
    cursor: pointer;
}

.radar-select-wrap .be-icon {
    position: absolute;
    right: 12px;
    top: 50%;
    transform: translateY(-50%);
    pointer-events: none;
    color: #666;
    font-size: 12px;
    line-height: 1;
    display: block;
}

.radar-error-msg {
    font-size: 13px;
    color: #e03737;
    margin: -8px 0 12px;
    text-align: left;
}

.radar-btn-row {
    display: flex;
    gap: 12px;
    margin-top: 2rem;
}

.radar-btn-row .btn-outline,
.radar-btn-row .btn-primary {
    flex: 1;
    padding: 11px 0;
    border-radius: 4px;
    font-size: 15px;
    font-weight: 600;
    cursor: pointer;
    border: none;
    transition: 0.5s;
}

.radar-btn-row .btn-outline {
    background: #fff;
    border: 1px solid #1a2b4a;
    color: #1a2b4a;
}

.radar-btn-row .btn-outline:hover {
    background-color: #f0f3f8;
}

.radar-btn-row .btn-primary {
    background: #1a2b4a;
    color: #fff;
}

.radar-btn-row .btn-primary:hover {
    background-color: #1660cb;
}

.radar-check-icon {
    font-size: 48px;
    color: #2a7d4f;
    display: block;
    margin: 0 auto 12px;
}

/* 進場/退場過渡：modal 內容從下方滑入 / 滑出 + 淡入淡出 */
#radar_modal .radar-modal-content {
    transform: translateY(40px);
    transition: opacity .45s ease, transform .45s cubic-bezier(.16, 1, .3, 1);
}

#radar_modal.is-show .radar-modal-content {
    transform: translateY(0);
}

/* 儲存成功狀態：隱藏右上 X */
/* 用 #radar_modal 前綴提升 specificity，蓋過上面 #radar_modal .modal-close 的 hover 樣式 */
#radar_modal .radar-modal-content.radar-success-state .modal-close {
    display: none;
}

/* 儲存成功後 modal 退場：往上飄走 + 縮小淡出（像「任務完成，向上飄走」的感覺） */
.radar-modal-content.radar-fade-out {
    opacity: 0;
    transform: translateY(-32px) !important;
    pointer-events: none;
}

/* 成功訊息文字 / 打勾 icon 縮小，視覺更輕盈 */
.radar-success-area .radar-modal-title {
    font-size: 18px;
}

.radar-check-icon {
    font-size: 40px;
}

/* 打勾 icon 進場小動效：旋轉彈跳入場（success state 觸發） */
.radar-modal-content.radar-success-state .radar-check-icon {
    animation: radar-check-pop .55s cubic-bezier(.34, 1.56, .64, 1) both;
    transform-origin: center center;
}

@keyframes radar-check-pop {
    0% {
        transform: scale(0) rotate(-45deg);
        opacity: 0;
    }

    60% {
        transform: scale(1.2) rotate(8deg);
        opacity: 1;
    }

    100% {
        transform: scale(1) rotate(0);
    }
}

/* === 文章內 promo bar（「6,879 位職場領先者已開啟職場雷達」橫條） === */
.radar-promo-bar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    background: linear-gradient(90deg, #1a2b6d 0%, #3a3aaf 100%);
    color: #fff;
    padding: 14px 20px;
    border-radius: 15px;
    margin: 16px 0;
    text-decoration: none;
    cursor: pointer;
    /* transition 包含：hover 濾鏡 + 儲存成功後的淡出/收合動畫 */
    transition: filter .2s, opacity .4s ease, max-height .4s ease, transform .4s ease, margin .4s ease, padding .4s ease;
    overflow: hidden;
    max-height: 200px;
}

.radar-promo-bar:hover {
    filter: brightness(1.1);
}

.radar-promo-inner {
    display: flex;
    align-items: center;
    gap: 12px;
}

.radar-promo-dot {
    width: 10px;
    height: 10px;
    border-radius: 50%;
    background: #2ecc71;
    flex-shrink: 0;
    box-shadow: 0 0 0 3px rgba(46, 204, 113, .3);
    animation: radar-dot-pulse 1.6s ease-in-out infinite;
}

@keyframes radar-dot-pulse {

    0%,
    100% {
        transform: scale(1);
        box-shadow: 0 0 0 3px rgba(46, 204, 113, .3);
    }

    50% {
        transform: scale(1.3);
        box-shadow: 0 0 0 5px rgba(46, 204, 113, .15);
    }
}

.radar-promo-texts {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.radar-promo-title {
    font-size: 15px;
    font-weight: 600;
    color: #fff;
    line-height: 1.4;
}

.radar-promo-title strong {
    font-weight: 800;
}

.radar-promo-sub {
    font-size: 12px;
    color: rgba(255, 255, 255, .75);
    line-height: 1.4;
}

.radar-promo-btn {
    flex-shrink: 0;
    background: #fff;
    color: #1a2b6d;
    font-size: 14px;
    font-weight: 700;
    padding: 8px 20px;
    border-radius: 20px;
    white-space: nowrap;
    transition: transform .2s cubic-bezier(.34, 1.56, .64, 1), box-shadow .2s;
}

.radar-promo-bar:hover .radar-promo-btn {
    transform: scale(1.06);
    box-shadow: 0 4px 14px rgba(0, 0, 0, .25);
}

@media (max-width: 480px) {
    .radar-promo-title {
        font-size: 13px;
    }

    .radar-promo-btn {
        padding: 7px 14px;
        font-size: 13px;
    }
}

/* 儲存成功後 promo bar 同步淡出 + 高度收合（讓下方內容平滑往上） */
.radar-promo-bar.radar-promo-bar-hide {
    opacity: 0;
    transform: scale(.97);
    max-height: 0;
    margin-top: 0;
    margin-bottom: 0;
    padding-top: 0;
    padding-bottom: 0;
    pointer-events: none;
}

/* CTA「立即開啟」按鈕動效：呼吸 + 白色光環往外擴散，吸引注意但不喧賓奪主 */
.radar-promo-btn {
    animation: radar-cta-ring 2s ease-out infinite, radar-cta-breath 2.4s ease-in-out infinite;
}

@keyframes radar-cta-ring {
    0% {
        box-shadow: 0 0 0 0 rgba(255, 255, 255, .55);
    }

    70%,
    100% {
        box-shadow: 0 0 0 10px rgba(255, 255, 255, 0);
    }
}

@keyframes radar-cta-breath {

    0%,
    100% {
        transform: scale(1);
    }

    50% {
        transform: scale(1.035);
    }
}

/* hover 時暫停 loop 動畫，交給既有 hover 樣式接手（不互打） */
.radar-promo-bar:hover .radar-promo-btn {
    animation: none;
}

/* === Header tooltip === */
.member-box {
    position: relative;
}

.radar-header-tooltip {
    position: absolute;
    top: calc(100% + 6px);
    left: 50%;
    transform: translateX(-50%) translateY(0px);
    background: #4c46ff;
    color: #fff;
    font-size: 13px;
    font-weight: 600;
    padding: 5px 12px 5px 10px;
    border-radius: 4px;
    white-space: nowrap;
    cursor: pointer;
    z-index: 200;
    letter-spacing: 0.5px;
    display: flex;
    align-items: center;
    opacity: 1;
    visibility: visible;
    transition: opacity .4s ease, transform .4s cubic-bezier(.34, 1.56, .64, 1), visibility .4s;
    /* 持續上下飄動的小動效，吸引注意但不喧賓奪主 */
    animation: radar-tooltip-bob 2s ease-in-out infinite;
}

/* 桌面版：保留 translateX(-50%) 水平置中 + Y 軸飄動 */
@keyframes radar-tooltip-bob {

    0%,
    100% {
        transform: translateX(-50%) translateY(0);
    }

    50% {
        transform: translateX(-50%) translateY(5px);
    }
}

.radar-header-tooltip.radar-tip--hide {
    opacity: 0;
    visibility: hidden;
    transform: translateX(-50%) translateY(14px);
    pointer-events: none;
    /* 隱藏時停止飄動，交給 transition 處理離場 */
    animation: none;
}

.radar-header-tooltip::before {
    content: '';
    position: absolute;
    bottom: 100%;
    left: 50%;
    transform: translateX(-50%);
    border: 5px solid transparent;
    border-bottom-color: #4c46ff;
}

/* 線上讀 header (header-nav)：≥1130px 維持桌面置中樣式；<1130px 才改靠右對齊避免切到 */
@media (max-width: 1129px) {
    .header-nav .radar-header-tooltip {
        left: auto;
        right: 0;
        transform: translateY(0);
        animation: radar-tooltip-bob-headernav 2s ease-in-out infinite;
    }

    .header-nav .radar-header-tooltip.radar-tip--hide {
        transform: translateY(14px);
    }

    .header-nav .radar-header-tooltip::before {
        left: auto;
        right: 11px;
        transform: translateX(0);
    }

    /* header-nav 版的 bob：沒有 translateX(-50%)，只做純 Y 軸飄動 */
    @keyframes radar-tooltip-bob-headernav {
        0%, 100% { transform: translateY(0); }
        50%      { transform: translateY(-4px); }
    }
}

/* === Radar scan icon (tooltip 內旋轉雷達動畫) === */
.radar-icon {
    display: inline-block;
    width: 18px;
    height: 18px;
    border-radius: 50%;
    border: 1.5px solid rgba(255, 255, 255, .85);
    position: relative;
    vertical-align: middle;
    margin-right: 6px;
    flex-shrink: 0;
    overflow: hidden;
    animation: radar-spin 1.8s linear infinite;
    background: conic-gradient(from 90deg,
            rgba(255, 255, 255, 0) 0deg,
            rgba(255, 255, 255, 0) 200deg,
            rgba(255, 255, 255, 0.04) 270deg,
            rgba(255, 255, 255, 0.18) 320deg,
            rgba(255, 255, 255, 0.50) 350deg,
            rgba(255, 255, 255, 0.85) 360deg);
}

.radar-icon::before {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    width: 8px;
    height: 1.5px;
    background: rgba(255, 255, 255, .95);
    transform-origin: left center;
    margin-top: -0.75px;
}

.radar-icon::after {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    width: 3px;
    height: 3px;
    background: #fff;
    border-radius: 50%;
    transform: translate(-50%, -50%);
}

@keyframes radar-spin {
    from {
        transform: rotate(0deg);
    }

    to {
        transform: rotate(360deg);
    }
}