/* เพิ่ม Font Noto Sans Thai */
body {
    background-color: #f4f4f4;
    font-family: 'Noto Sans Thai', sans-serif;
}

/* โทนสีหลักของ มก. (006664) */
.ku-theme-bg {
    background-color: #006664;
    color: white;
}

.ku-theme-text {
    color: #006664;
}

.btn-ku-green {
    background-color: #006664;
    color: white;
    border-color: #005a58;
}

.btn-ku-green:hover {
    background-color: #005a58;
    color: white;
}

/* สไตล์สำหรับเลือกการ์ด */
.card-select-label {
    cursor: pointer;
    border: 3px solid transparent;
    border-radius: 5px;
    padding: 5px;
    transition: border-color 0.2s;
    /* ปรับขนาดรูปภาพให้ responsive และจำกัดความกว้าง */
    max-width: 120px; /* จำกัดความกว้างของการ์ดบนมือถือ */
    margin: 5px; /* เพิ่มระยะห่างระหว่างการ์ด */
}

.card-select-label img {
    width: 100%; /* ทำให้รูปภาพเต็มความกว้างของ label */
    height: auto;
}

/* เมื่อเลือก radio button ให้ label มีกรอบสี */
input[type="radio"]:checked + .card-select-label {
    border-color: #006664;
}

/* ซ่อน radio button จริง */
input[type="radio"].card-select-input {
    display: none;
}

/* สไตล์การ์ดที่แสดงผล */
.guest-card {
    border-left: 5px solid #006664;
}

/* ปรับ layout ของ card selection สำหรับมือถือ */
.card-selection-container {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
}