/**



 * EMLearn – Student Attendance Kiosk



 *



 * @package EMLearn



 */







.kiosk-wrapper {



    max-width: 500px;



    margin: 20px auto;



    padding: 30px;



    border: 1px solid #e0e0e0;



    background: #fff;



    border-radius: 8px;



    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);



    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", sans-serif;



}







.kiosk-header {



    text-align: center;



    margin-bottom: 25px;



    border-bottom: 2px solid #f0f0f0;



    padding-bottom: 15px;



}







.kiosk-course {



    font-size: 22px;



    font-weight: 700;



    color: #0073aa;



    margin: 0 0 5px 0;



    line-height: 1.3;



}







.kiosk-site {



    font-size: 16px;



    color: #555;



    margin: 0;



    font-weight: 500;



}







.kiosk-time {



    font-size: 14px;



    color: #888;



    margin-top: 5px;



}







.kiosk-input {



    width: 100%;



    padding: 12px;



    margin-bottom: 15px;



    border: 1px solid #ccc;



    border-radius: 4px;



    font-size: 16px;



    box-sizing: border-box;



}







.kiosk-label {



    display: block;



    margin-bottom: 5px;



    font-weight: 600;



    color: #444;



    font-size: 14px;



}







.kiosk-btn {



    width: 100%;



    padding: 15px;



    background: #0073aa;



    color: #fff;



    border: none;



    border-radius: 4px;



    font-size: 18px;



    font-weight: bold;



    cursor: pointer;



    transition: background 0.2s;



    margin-top: 25px;



}







.kiosk-btn:hover {



    background: #005a87;



}







.kiosk-btn:disabled {



    background: #ccc;



    cursor: not-allowed;



}







/* Name row – side by side */



.kiosk-row {



    display: flex;



    gap: 15px;



}







.kiosk-col {



    flex: 1;



}







/* Success state */



#success-message {



    display: none;



    text-align: center;



    padding: 40px 0;



}







.success-icon {



    font-size: 60px;



    line-height: 1;



    margin-bottom: 20px;



    display: block;



}







.success-title {



    color: #28a745;



    margin: 0 0 10px 0;



    font-size: 28px;



}







.success-text {



    color: #666;



    margin: 0;



    font-size: 18px;



}







/* Mobile */



@media (max-width: 480px) {



    .kiosk-row {



        flex-direction: column;



        gap: 0;



    }



}