/* =====================================================
   EasyTime
   Version 1
===================================================== */

.easytime-container {

    max-width: 420px;

    margin: 0 auto;

    text-align: center;

    padding: 0px 15px 10px;

}

/* ==========================================
   Date & Time
========================================== */

.easytime-date {

    font-size: 3.5rem;

    font-weight: 700;

    color: #1f2937;

    margin-top: -20px;

    margin-bottom: 2px;

}

.easytime-date2 {

    font-size: 2.5rem;

    color: #6b7280;

    margin-bottom: 8px;

}

.easytime-time {

    font-size: 5rem;

    font-weight: 700;

    color: #111827;

    letter-spacing: 2px;

    margin-bottom: 18px;

}

/* ==========================================
   PIN
========================================== */

.easytime-pin-display {

    font-size: 2.2rem;

    letter-spacing: 18px;

    min-height: 40px;

    margin-bottom: 18px;

}

.easytime-pin-message{

    min-height:24px;

    margin-bottom:12px;

    font-size:1rem;

    font-weight:600;

    color:#dc2626;

}

/* ==========================================
   Keypad
========================================== */

.easytime-keypad {

    display: grid;

    grid-template-columns: repeat(3, 1fr);

    gap: 10px;

    margin-bottom: 22px;

}

.pin-btn {

    height: 72px;

    border: none;

    border-radius: 12px;

    background: #f3f4f6;

    color: #111827;

    font-size: 1.9rem;

    font-weight: 600;

    cursor: pointer;

    transition: all .15s ease;

    user-select: none;

}

.pin-btn:hover {

    background: #e5e7eb;

}

.pin-btn:active {

    transform: scale(.96);

}

/* ==========================================
   REASON BUTTONS
========================================== */

.reason-btn {

    height: 72px;

    border: none;

    border-radius: 12px;

    background: #f3f4f6;

    color: #111827;

    font-size: 1.15rem;

    font-weight: 600;

    cursor: pointer;

    transition: all .15s ease;

    user-select: none;

    padding: 8px;

    line-height: 1.2;

    text-align: center;

}

.reason-btn:hover {

    background: #e5e7eb;

}

.reason-btn:active {

    transform: scale(.96);

}


/* ==========================================
   NOTES
========================================== */

.easytime-notes{

    width:100%;

    height:180px;

    padding:15px;

    margin:20px 0;

    border:1px solid #d1d5db;

    border-radius:12px;

    resize:none;

    font-size:1rem;

    font-family:inherit;

    box-sizing:border-box;

}

.easytime-notes:focus{

    outline:none;

    border-color:#16a34a;

    box-shadow:0 0 0 3px rgba(22,163,74,.15);

}

/* ==========================================
   PAGE TITLE
========================================== */

.easytime-title {

    font-size: 2.8rem;

    font-weight: 700;

    color: #1f2937;

    margin-bottom: 8px;

}

.easytime-subtitle {

    font-size: 1.1rem;

    font-weight: 600;

    color: #dc2626;

    margin-bottom: 20px;

}

/* ==========================================
   Clock Button
========================================== */

.easytime-clock-btn {

    width: 100%;

    height: 70px;

    font-size: 1.6rem;

    font-weight: 700;

    border-radius: 12px;

    letter-spacing: 2px;

    transition: all .2s ease;

}

.easytime-clock-btn:disabled {

    opacity: .45;

    cursor: not-allowed;

}

.easytime-clock-btn:not(:disabled) {

    transform: scale(1);

}

.easytime-clock-btn:not(:disabled):active {

    transform: scale(.98);

}



/* ==========================================
   Mobile
========================================== */

@media (max-width:600px){

    .easytime-container{

        padding:0 10px 10px;

    }

    .easytime-date{

        font-size:1.6rem;

    }

    .easytime-time{

        font-size:4.5rem;

        margin-bottom:15px;

    }

    .easytime-pin-display{

        margin-bottom:15px;

    }

    .pin-btn{

        height:68px;

        font-size:1.8rem;

    }

    .easytime-clock-btn{

        height:68px;

        font-size:1.5rem;

    }

}

.easytime-back-btn {

    width: 100%;

    height: 40px;

    margin-top: 10px;

    border: none;

    border-radius: 12px;

    background: #f3f4f6;

    color: #4b5563;

    font-size: 1rem;

    font-weight: 600;

    cursor: pointer;

    transition: all .15s ease;

}

.easytime-back-btn:hover {

    background: #e5e7eb;

}

.easytime-back-btn:active {

    transform: scale(.98);

}

/* ==========================================
   EMPLOYEE SCREEN
========================================== */

.easytime-greeting{

    font-size:2rem;

    font-weight:600;

    color:#6b7280;

    margin-bottom:12px;

}

.easytime-employee-name{

    font-size:3rem;

    font-weight:700;

    color:#111827;

    margin-bottom:40px;

}

/* =========================
   SELFIE CAMERA
========================= */

.selfie-camera-wrapper {

    position: relative;

    width: 100%;

    max-width: 420px;

    margin: 20px auto;

    border-radius: 12px;

    overflow: hidden;

    background: #000;

}

#selfieVideo {

    width: 100%;

    display: block;

}

/* =========================
   FACE GUIDE
========================= */

.selfie-face-guide {

    position: absolute;

    top: 50%;

    left: 50%;

    width: 220px;

    height: 280px;

    transform: translate(-50%, -50%);

    border: 4px solid rgba(255,255,255,.9);

    border-radius: 50%;

    pointer-events: none;

    box-sizing: border-box;

}

.easytime-help {

    text-align: center;

    margin-top: 10px;

}