﻿.content {
    flex: 1;
}

/* 選項區域 */
.selection-container {
    display: flex;
    flex-wrap: wrap;
}

/* 每個選項 */
.selection-item {
    padding: 5px;
    position: relative;
    width: 50%; /* 每排顯示兩個 */
    height: 200px; /* 固定高度 */
    overflow: hidden;
    border-radius: 25px;
}

    .selection-item .selection-img {
        width: 100%;
        height: 100%;
        background-color: black; /* 背景設為黑色 */
        display: flex;
        justify-content: center; /* 水平置中 */
        align-items: center; /* 垂直置中 */
    }

        .selection-item .selection-img img {
            width: 100%; /* 讓圖片寬度適應容器 */
            height: 100%; /* 讓圖片高度適應容器 */
            object-fit: contain; /* 保持比例，不超出容器 */
            object-position: center; /* 確保圖片置中 */
            background-color: black; /* 填充不足的地方 */
        }

    .selection-item input[type="checkbox"] {
        display: none; /* 隱藏原本的勾選框 */
    }

    /* 圓形選取標誌 */
    .selection-item .circle {
        position: absolute;
        top: 15px;
        left: 15px;
        width: 30px;
        height: 30px;
        border-radius: 50%;
        background-color: rgba(0, 0, 0, 0.5);
        display: flex;
        justify-content: center;
        align-items: center;
        border: 2px #CCC solid;
        transition: background 0.3s;
    }

    /* 顯示選取狀態 */
    .selection-item input[type="checkbox"]:checked + label .circle {
        background-color: #CCC; /* 當選中時變為綠色 */
    }

        /* 當選中時顯示內部圓圈 */
        .selection-item input[type="checkbox"]:checked + label .circle::after {
            content: '\f00c'; /* FontAwesome 的 check icon */
            font-family: "Font Awesome 5 Free";
            font-weight: 900;
        }
