/* assets/css/register-styles.css */
@import url('https://fonts.googleapis.com/css2?family=Kanit:wght@300;400;500;600&display=swap');

body { font-family: 'Kanit', sans-serif; background-color: #f8f9fa; }

.registration-container { padding-top: 40px; padding-bottom: 40px; }
.form-header { text-align: center; margin-bottom: 40px; }
.form-header h2 { font-weight: 600; color: #343a40; }
.form-header p { color: #6c757d; font-size: 1.1rem; }

.custom-card {
    border: none;
    border-radius: 15px;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.08);
    overflow: hidden;
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}
.custom-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 15px 40px rgba(0, 0, 0, 0.12);
}
.custom-card .card-header {
    /* --- Changed: Purple gradient to Green gradient --- */
    background: linear-gradient(135deg, var(--primary-dark) 0%, var(--primary-color) 100%);
    color: white;
    border-bottom: none;
    padding: 1rem 1.5rem;
}
.custom-card .card-header h4 { margin: 0; font-weight: 500; font-size: 1.25rem; }
.custom-card .card-body { padding: 2rem; }

.form-control { border-radius: 8px; border: 1px solid #ced4da; padding: 0.75rem 1rem; transition: border-color 0.2s ease, box-shadow 0.2s ease; }
.form-control:focus {
    /* --- Changed: Purple focus to Green focus --- */
    border-color: var(--primary-color);
    box-shadow: 0 0 0 0.25rem rgba(5, 150, 105, 0.25);
}
.form-check-input { cursor: pointer; }
.form-check-input:checked {
    /* --- Changed: Purple checkbox to Green checkbox --- */
    background-color: var(--primary-color);
    border-color: var(--primary-color);
}
.form-check-label { cursor: pointer; }
.form-check-label strong { font-weight: 500; }

.btn-gradient {
    /* --- Changed: Purple gradient button to Green gradient button --- */
    background-image: linear-gradient(to right, var(--primary-dark) 0%, var(--primary-color) 51%, var(--primary-dark) 100%);
    background-size: 200% auto;
    color: white;
    font-weight: 500;
    padding: 0.8rem 1.5rem;
    border: none;
    border-radius: 8px;
    transition: 0.5s;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1);
}
.btn-gradient:hover { background-position: right center; color: #fff; text-decoration: none; transform: scale(1.03); }

.side-panel .card { border: none; border-radius: 15px; box-shadow: 0 10px 30px rgba(0, 0, 0, 0.08); }

/* --- [NEW] Animation for Invalid Input --- */
.is-invalid-shake {
    /* ใช้ animation ชื่อ shake ระยะเวลา 0.5 วินาที */
    animation: shake 0.5s;
    /* เปลี่ยนสีขอบเป็นสีแดง */
    border-color: #dc3545 !important;
}

/* สร้าง Keyframes สำหรับท่าสั่น */
@keyframes shake {
  10%, 90% {
    transform: translate3d(-1px, 0, 0);
  }
  20%, 80% {
    transform: translate3d(2px, 0, 0);
  }
  30%, 50%, 70% {
    transform: translate3d(-4px, 0, 0);
  }
  40%, 60% {
    transform: translate3d(4px, 0, 0);
  }
}

/* --- [NEW] Schedule Table Styles --- */
/* --- [NEW] Responsive Schedule Table Column --- */
.schedule-time {
  width: 1%;
  white-space: nowrap;
}
.schedule-header {
    background-color: #fdfdea; /* Light yellow background */
    text-align: center;
    border-bottom: 1px solid #dee2e6;
}
.schedule-header h4 {
    color: #ffffff;
    font-weight: 600;
}
.schedule-header p {
    color: #ffffff;
    font-weight: 500;
}
.table-responsive {
    border-bottom-left-radius: 15px;
    border-bottom-right-radius: 15px;
    overflow: hidden; /* Important for border-radius on table */
}
.table th {
    font-weight: 600;
}
/* --- [NEW] Modern Form Inputs --- */
.form-control, .form-select {
    border-radius: 8px;
    border: 1px solid var(--border-color);
    padding: 0.85rem 1rem;
    transition: all 0.2s ease-in-out;
    background-color: #fff;
}
.form-control:focus, .form-select:focus {
    border-color: var(--primary-color);
    box-shadow: 0 0 0 0.25rem rgba(5, 150, 105, 0.15); /* [CHANGED] */
    background-color: #fff;
}
.form-control::placeholder {
    color: #adb5bd;
}
.card-header h4 {
    font-size: 1.4rem;
}