/* ==========================================
   EVY SMART PARKING
   EXIT VALIDATION TERMINAL
========================================== */

*{
    margin:0;
    padding:0;
    box-sizing:border-box;
}

body{

    background:#eef3f9;

    font-family:
    "Segoe UI",
    Tahoma,
    Geneva,
    Verdana,
    sans-serif;

    overflow-x:hidden;

}

.kiosk-wrapper{

    min-height:100vh;

    display:flex;

    flex-direction:column;

}

/* ==========================================
HEADER
========================================== */

.top-header{

    background:#0f172a;

    color:#fff;

    padding:18px 30px;

    display:flex;

    justify-content:space-between;

    align-items:center;

    box-shadow:0 10px 25px rgba(0,0,0,.12);

}

.logo-section{

    display:flex;

    align-items:center;

    gap:15px;

}

.logo-circle{

    width:65px;

    height:65px;

    border-radius:50%;

    background:linear-gradient(135deg,#2563eb,#0ea5e9);

    display:flex;

    align-items:center;

    justify-content:center;

    color:#fff;

    font-size:28px;

}

.logo-section h2{

    margin:0;

    font-size:25px;

    font-weight:700;

}

.logo-section small{

    color:#cbd5e1;

    letter-spacing:1px;

}

.clock-section{

    text-align:right;

}

#liveClock{

    font-size:34px;

    font-weight:bold;

}

#todayDate{

    color:#cbd5e1;

}

/* ==========================================
CARD
========================================== */

.scanner-card,
.details-card{

    background:#fff;

    border-radius:18px;

    padding:25px;

    box-shadow:0 15px 40px rgba(15,23,42,.08);

    border:none;

}

.card-header-custom{

    display:flex;

    align-items:center;

    gap:10px;

    font-size:22px;

    font-weight:700;

    color:#0f172a;

    margin-bottom:20px;

}

.card-header-custom i{

    color:#2563eb;

}

/* ==========================================
SCANNER
========================================== */

.scanner-status{

    background:#ecfeff;

    border:1px solid #67e8f9;

    color:#0369a1;

    padding:12px;

    border-radius:10px;

    font-weight:600;

    margin-bottom:18px;

}

.status-dot{

    display:inline-block;

    width:10px;

    height:10px;

    background:#22c55e;

    border-radius:50%;

    margin-right:8px;

    animation:pulse 1.5s infinite;

}

@keyframes pulse{

    0%{

        transform:scale(1);

        opacity:1;

    }

    50%{

        transform:scale(1.4);

        opacity:.5;

    }

    100%{

        transform:scale(1);

        opacity:1;

    }

}

.scanner-container{

    position:relative;

    border-radius:15px;

    overflow:hidden;

    border:3px solid #2563eb;

    background:#000;

    min-height:330px;

}

#qr-reader{

    width:100%;

}

.scan-line{

    position:absolute;

    left:0;

    top:0;

    width:100%;

    height:3px;

    background:#22c55e;

    animation:scan 3s linear infinite;

}

@keyframes scan{

    from{

        top:0;

    }

    to{

        top:100%;

    }

}

.scan-text{

    display:block;

    text-align:center;

    margin-top:15px;

    color:#64748b;

    font-weight:500;

}
/* ==========================================
   INPUTS
========================================== */

.form-control{

    border-radius:12px;

    min-height:52px;

    border:2px solid #dbe4f0;

    box-shadow:none;

    transition:.3s;

}

.form-control:focus{

    border-color:#2563eb;

    box-shadow:0 0 0 .2rem rgba(37,99,235,.15);

}

.btn{

    border-radius:12px;

    min-height:52px;

    font-weight:600;

}


/* ==========================================
   VALUE BOXES
========================================== */

.value-box{

    min-height:58px;

    background:#f8fafc;

    border:2px solid #e2e8f0;

    border-radius:12px;

    display:flex;

    align-items:center;

    padding:0 18px;

    font-size:18px;

    font-weight:600;

    color:#0f172a;

}

.amount{

    color:#16a34a;

    font-size:22px;

}


/* ==========================================
   STATUS CARDS
========================================== */

.status-card{

    border-radius:18px;

    padding:22px;

    text-align:center;

    color:#fff;

    box-shadow:0 12px 25px rgba(0,0,0,.12);

}

.payment-status{

    background:linear-gradient(135deg,#2563eb,#3b82f6);

}

.exit-status{

    background:linear-gradient(135deg,#059669,#10b981);

}

.status-card small{

    letter-spacing:1px;

    opacity:.9;

}

.status-text{

    margin-top:10px;

    font-size:28px;

    font-weight:bold;

}

.status-text.waiting{

    color:#fff;

}

.status-text.paid{

    color:#22c55e;

}

.status-text.unpaid{

    color:#ef4444;

}

.status-text.exited{

    color:#facc15;

}


/* ==========================================
   ALERT
========================================== */

#statusMessage{

    border-radius:12px;

    font-size:16px;

    font-weight:600;

}


/* ==========================================
   OPEN GATE BUTTON
========================================== */

#openGateBtn{

    min-height:72px;

    font-size:24px;

    font-weight:bold;

    border:none;

    border-radius:16px;

    transition:.3s;

}

#openGateBtn:hover:not(:disabled){

    transform:translateY(-3px);

    box-shadow:0 18px 30px rgba(34,197,94,.35);

}

#openGateBtn:disabled{

    cursor:not-allowed;

    opacity:.55;

}


/* ==========================================
   SUCCESS PANEL
========================================== */

.success-panel{

    display:none;

    background:#ffffff;

    border-radius:20px;

    padding:50px;

    text-align:center;

    box-shadow:0 20px 45px rgba(0,0,0,.15);

}

.success-check{

    font-size:90px;

    color:#22c55e;

    animation:pop .5s ease;

}

@keyframes pop{

    from{

        transform:scale(.5);

        opacity:0;

    }

    to{

        transform:scale(1);

        opacity:1;

    }

}

.success-panel h2{

    font-weight:bold;

    color:#15803d;

    margin-top:20px;

}

.success-panel p{

    color:#64748b;

    font-size:18px;

}


/* ==========================================
   FOOTER
========================================== */

.bottom-status{

    margin-top:35px;

    background:#0f172a;

    color:#fff;

    border-radius:16px;

    padding:18px 25px;

    display:flex;

    justify-content:space-between;

    align-items:center;

    font-size:15px;

}

.bottom-status div{

    display:flex;

    align-items:center;

    gap:8px;

}


/* ==========================================
   MOBILE
========================================== */

@media(max-width:992px){

    .top-header{

        flex-direction:column;

        text-align:center;

        gap:20px;

    }

    .bottom-status{

        flex-direction:column;

        gap:15px;

        text-align:center;

    }

}

@media(max-width:768px){

    .logo-section{

        flex-direction:column;

    }

    #liveClock{

        font-size:26px;

    }

    .status-text{

        font-size:22px;

    }

    #openGateBtn{

        font-size:20px;

    }

}