/* =========================
   SDGs 勾選整體容器
   （CssClass 掛在 asp:CheckBox 上）
   ========================= */

.sdgs-list input[type=checkbox] {
    display: none; /* 隱藏原本的 checkbox */
}

/* 每一個 SDG 方塊（label 是定位基準） */
.sdgs-list label {
    position: relative; /* ★✓ 定位的關鍵 */
    display: inline-block;
    width: 133px;
    height: 133px;
    border: 2px solid #ccc;
    border-radius: 8px;
    margin: 1px 1px 5px 1px;
    padding: 2px;
    text-align: center;
    cursor: pointer;
    background-color: #fff;
    overflow: hidden; /* 防止 ✓ 跑出框外 */
    box-sizing: border-box;
}

/* SDGs 圖片 */
.sdgs-img {
    width: 125px;
    height: 125px;
    border-radius: 8px;
    display: block;
}

/* =========================
   勾選狀態樣式
   ========================= */

/* 勾選後：外框變綠（不蓋圖片） */
.sdgs-list input[type=checkbox]:checked + label {
    border-color: #4CAF50;
    outline: 2px solid #4CAF50;
}

    /* 勾選後：右下角白色 ✓ */
    .sdgs-list input[type=checkbox]:checked + label::after {
        content: "✓";
        position: absolute;
        right: 6px;
        bottom: 6px;
        width: 26px;
        height: 26px;
        line-height: 26px;
        text-align: center;
        background-color: #2ecc71;
        color: #ffffff;
        font-size: 18px;
        font-weight: bold;
        border-radius: 50%;
        box-shadow: 0 0 4px rgba(0, 0, 0, 0.4);
    }

/* =========================
   滑鼠移上效果（可選）
   ========================= */

.sdgs-list label:hover {
    border-color: #999;
}