/* ================================
   WIZARD & FORM UI BASE STYLES
================================ */
.wizard-container {
    transition: opacity 0.5s ease-in-out, transform 0.5s ease-in-out;
}

.form-label {
    display: block;
    font-weight: 500;
    color: #4b5563; /* text-gray-600 */
}
.dark .form-label {
    color: #d1d5db; /* dark:text-gray-300 */
}

.select-btn {
    display: flex;
    width: 100%;
    justify-content: space-between;
    align-items: center;
    padding: 0.75rem 1rem;
    border: 1px solid #e5e7eb; /* border-gray-200 */
    border-radius: 0.5rem; /* rounded-lg */
    background-color: white;
    font-size: 1rem;
    text-align: left;
    transition: background-color 0.2s, border-color 0.2s;
}

.dark .select-btn {
    background-color: #374151; /* dark:bg-gray-700 */
    border-color: #4b5563; /* dark:border-gray-600 */
}

.select-btn:hover {
    background-color: #f9fafb; /* hover:bg-gray-50 */
}

.dark .select-btn:hover {
    background-color: #4b5563; /* dark:hover:bg-gray-600 */
}

/* ================================
   ACTION BUTTON
================================ */
.action-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0.75rem 2rem;
    border-radius: 0.5rem; /* rounded-lg */
    color: white;
    font-weight: 600;
    transition: background-color 0.2s;
}

/* ================================
   MODAL BOX
================================ */
.modal-box {
    background: #1f2937; /* bg-gray-800 */
    padding: 1.5rem; /* p-6 */
    border-radius: 0.75rem; /* rounded-xl */
    position: relative;
    animation: popIn 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275);
    border: 1px solid #4b5563; /* border-gray-600 */
}

@keyframes popIn {
    from {
        transform: scale(0.95);
        opacity: 0;
    }
    to {
        transform: scale(1);
        opacity: 1;
    }
}

.modal-title {
    font-size: 1.25rem; /* text-xl */
    font-weight: 600; /* font-semibold */
    color: white;
}

.modal-close-btn {
    position: absolute;
    right: 0.75rem; /* right-3 */
    top: 0.75rem; /* top-3 */
    background: transparent;
    color: #9ca3af; /* text-gray-400 */
    padding: 0.5rem; /* p-2 */
    border-radius: 9999px; /* rounded-full */
    transition: background-color 0.2s, color 0.2s;
}

.modal-close-btn:hover {
    background: rgba(255, 255, 255, 0.1);
    color: white;
}

/* ================================
   INPUT FIELD STYLE
================================ */
.form-input {
    width: 100%;
    padding: 0.75rem;
    border-radius: 0.5rem; /* rounded-lg */
    border: 1px solid #4b5563; /* border-gray-600 */
    background: #1f2937; /* bg-gray-800 */
    color: white;
}

.form-input:focus {
    outline: none;
    border-color: #3b82f6; /* border-blue-500 */
    box-shadow: 0 0 0 2px rgba(59, 130, 246, 0.4);
}

/* ================================
   POPULAR UNIVERSITY BUTTONS
================================ */
.popular-uni-btn {
    background: #374151; /* bg-gray-700 */
    color: #d1d5db; /* text-gray-300 */
    padding: 0.5rem 1rem;
    border-radius: 0.5rem; /* rounded-lg */
    font-weight: 500; /* font-medium */
    transition: background-color 0.2s;
}

.popular-uni-btn:hover {
    background: #4b5563; /* bg-gray-600 */
    color: white;
}

/* ================================
   MODAL OPTIONS (TYPE SELECT)
================================ */
.modal-option-btn {
    display: flex;
    flex-direction: column;
    width: 100%;
    padding: 1rem;
    background: #374151; /* bg-gray-700 */
    color: white;
    border-radius: 0.5rem; /* rounded-lg */
    text-align: left;
    font-weight: 500; /* font-medium */
    transition: background-color 0.2s;
}

.modal-option-btn:hover {
    background: #4b5563; /* bg-gray-600 */
}