/* ==========================================
   RESET
========================================== */

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

html,
body{

    width:100%;
    height:100%;

    font-family:
    "Segoe UI",
    Arial,
    Helvetica,
    sans-serif;

    overflow-x:hidden;

}

/* ==========================================
   BODY
========================================== */

body{

    background:
    radial-gradient(circle at top,#2f2f2f,#161616 55%,#0b0b0b);

    display:flex;

    justify-content:center;

    align-items:center;

    padding:30px;

    position:relative;

    color:#fff;

}

/* ==========================================
   BACKGROUND GLOW
========================================== */

.background-glow{

    position:fixed;

    width:500px;
    height:500px;

    border-radius:50%;

    background:

    rgba(0,255,140,.08);

    filter:blur(120px);

    animation:glow 6s infinite alternate;

}

@keyframes glow{

    from{

        transform:scale(.9);

        opacity:.4;

    }

    to{

        transform:scale(1.2);

        opacity:.9;

    }

}

/* ==========================================
   TERMINAL
========================================== */

.terminal{

    width:440px;

    background:

    linear-gradient(
    180deg,
    #2b2b2b,
    #1b1b1b
    );

    border-radius:32px;

    padding:28px;

    box-shadow:

    0 25px 60px rgba(0,0,0,.65),

    inset 0 1px 0 rgba(255,255,255,.05);

    position:relative;

    z-index:5;

}

/* ==========================================
   STATUS BAR
========================================== */

.status-bar{

    display:flex;

    justify-content:space-between;

    align-items:center;

    margin-bottom:20px;

    font-size:14px;

    letter-spacing:2px;

}

.status-left{

    display:flex;

    align-items:center;

    gap:8px;

    color:#57ff99;

}

.status-dot{

    width:10px;

    height:10px;

    border-radius:50%;

    background:#57ff99;

    box-shadow:

    0 0 12px #57ff99;

}

.status-right{

    color:#999;

}

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

.header{

    text-align:center;

    margin-bottom:25px;

}

.header h1{

    font-size:36px;

    font-weight:800;

    letter-spacing:2px;

    color:#fff;

}

.header p{

    margin-top:8px;

    color:#b8b8b8;

    font-size:14px;

    letter-spacing:5px;

}

/* ==========================================
   DISPLAY
========================================== */

.display{

    background:#000;

    border-radius:30px;

    border:3px solid #0f3020;

    min-height:180px;

    padding:22px;

    display:flex;

    align-items:center;

    justify-content:flex-start;

    overflow:hidden;

    margin-bottom:20px;

}

.currency{

    color:#52ff8b;

    font-size:58px;

    font-weight:700;

    flex-shrink:0;

    margin-right:10px;

    text-shadow:
    0 0 12px #00ff88,
    0 0 28px #00ff88;

}

#nominal{

    flex:1;

    min-width:0;

    text-align:right;

    font-weight:800;

    color:#52ff8b;

    font-size:72px;

    white-space:nowrap;

    text-shadow:
    0 0 15px #00ff88,
    0 0 35px #00ff88;

    transition:.2s;

}

/* ==========================================
   INFO
========================================== */

.info-box{

    background:#2d2d2d;

    border-radius:14px;

    padding:14px 18px;

    margin-bottom:25px;

    color:#bfbfbf;

    font-size:13px;

    display:flex;

    justify-content:space-between;

    align-items:center;

}

.info-box strong{

    color:#ffffff;

}

/* ==========================================
   SCROLLBAR
========================================== */

::-webkit-scrollbar{

    width:8px;

}

::-webkit-scrollbar-thumb{

    background:#555;

    border-radius:20px;

}

::-webkit-scrollbar-track{

    background:#1d1d1d;

}

/* ==========================================
   KEYPAD
========================================== */

.keypad{

    display:grid;

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

    gap:16px;

    margin-bottom:25px;

}

.keypad button{

    height:95px;

    border:none;

    border-radius:24px;

    cursor:pointer;

    font-size:38px;

    font-weight:700;

    color:#ffffff;

    background:
    linear-gradient(
    180deg,
    #4a4a4a,
    #2e2e2e
    );

    box-shadow:

    inset 0 1px 0 rgba(255,255,255,.08),

    0 8px 20px rgba(0,0,0,.45);

    transition:

    transform .15s ease,

    box-shadow .15s ease,

    background .2s;

}

.keypad button:hover{

    transform:translateY(-3px);

    background:
    linear-gradient(
    180deg,
    #5a5a5a,
    #363636
    );

}

.keypad button:active{

    transform:scale(.96);

    box-shadow:

    inset 0 5px 15px rgba(0,0,0,.4);

}

/* ==========================================
   BUTTON DELETE
========================================== */

.btn-delete{

    background:

    linear-gradient(
    180deg,
    #ef5350,
    #d32f2f
    ) !important;

}

.btn-delete:hover{

    background:

    linear-gradient(
    180deg,
    #ff6f6f,
    #e53935
    ) !important;

}

/* ==========================================
   BUTTON CLEAR
========================================== */

.btn-clear{

    background:

    linear-gradient(
    180deg,
    #ffb74d,
    #ef6c00
    ) !important;

}

.btn-clear:hover{

    background:

    linear-gradient(
    180deg,
    #ffc870,
    #fb8c00
    ) !important;

}

/* ==========================================
   QUICK TITLE
========================================== */

.quick-title{

    margin-bottom:12px;

    font-size:14px;

    letter-spacing:2px;

    color:#cfcfcf;

}

/* ==========================================
   QUICK GRID
========================================== */

.quick-grid{

    display:grid;

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

    gap:12px;

    margin-bottom:28px;

}

.quick-grid button{

    height:52px;

    border:none;

    border-radius:14px;

    cursor:pointer;

    color:#fff;

    font-weight:700;

    font-size:16px;

    background:

    linear-gradient(
    180deg,
    #3d3d3d,
    #272727
    );

    transition:.2s;

}

.quick-grid button:hover{

    background:#4c4c4c;

    transform:translateY(-2px);

}

/* ==========================================
   PAY BUTTON
========================================== */

.btn-pay{

    width:100%;

    height:78px;

    border:none;

    border-radius:45px;

    cursor:pointer;

    color:#ffffff;

    font-size:26px;

    font-weight:800;

    letter-spacing:1px;

    background:

    linear-gradient(
    180deg,
    #35e97b,
    #13b956
    );

    box-shadow:

    0 0 25px rgba(53,233,123,.45);

    transition:.25s;

}

.btn-pay:hover{

    transform:translateY(-2px);

    box-shadow:

    0 0 40px rgba(53,233,123,.8);

}

.btn-pay:active{

    transform:scale(.98);

}

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

.footer{

    margin-top:22px;

    text-align:center;

    color:#999;

    font-size:13px;

    line-height:22px;

}

.footer strong{

    color:#57ff99;

}

/* ==========================================
   RIPPLE EFFECT
========================================== */

.keypad button,
.quick-grid button,
.btn-pay{

    position:relative;

    overflow:hidden;

}

.keypad button::after,
.quick-grid button::after,
.btn-pay::after{

    content:"";

    position:absolute;

    left:50%;
    top:50%;

    width:0;
    height:0;

    border-radius:50%;

    background:rgba(255,255,255,.18);

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

    transition:.4s;

}

.keypad button:active::after,
.quick-grid button:active::after,
.btn-pay:active::after{

    width:250px;
    height:250px;

}

/* ==========================================
   FADE
========================================== */

.terminal{

    animation:fadeIn .6s ease;

}

@keyframes fadeIn{

    from{

        opacity:0;

        transform:translateY(20px);

    }

    to{

        opacity:1;

        transform:translateY(0);

    }

}
/* ==========================================
   RESPONSIVE - LAPTOP
========================================== */

@media (max-width:1024px){

    .terminal{

        width:420px;

    }

}

/* ==========================================
   RESPONSIVE - TABLET
========================================== */

@media (max-width:768px){

    body{

        padding:20px;

    }

    .terminal{

        width:100%;

        max-width:420px;

        padding:22px;

    }

    .header h1{

        font-size:30px;

    }

    .header p{

        font-size:13px;

        letter-spacing:3px;

    }

    .display{

        height:145px;

    }

    .currency{

        font-size:44px;

    }

    #nominal{

        font-size:54px;

    }

    .keypad button{

        height:85px;

        font-size:34px;

    }

    .btn-pay{

        height:70px;

        font-size:22px;

    }

}

/* ==========================================
   RESPONSIVE - MOBILE
========================================== */

@media (max-width:480px){

    body{

        padding:12px;

    }

    .terminal{

        width:100%;

        border-radius:22px;

        padding:18px;

    }

    .status-bar{

        font-size:12px;

    }

    .header{

        margin-bottom:18px;

    }

    .header h1{

        font-size:24px;

    }

    .header p{

        font-size:11px;

        letter-spacing:2px;

    }

    .display{

        height:120px;

        padding:15px;

        border-radius:18px;

    }

    .currency{

        font-size:34px;

        margin-right:8px;

    }

    #nominal{

        font-size:42px;

    }

    .info-box{

        padding:12px;

        font-size:12px;

    }

    .keypad{

        gap:12px;

    }

    .keypad button{

        height:72px;

        border-radius:18px;

        font-size:30px;

    }

    .quick-grid{

        gap:10px;

    }

    .quick-grid button{

        height:45px;

        font-size:14px;

    }

    .btn-pay{

        height:62px;

        font-size:20px;

        border-radius:35px;

    }

}

/* ==========================================
   LANDSCAPE PHONE
========================================== */

@media (max-height:700px){

    body{

        padding:15px;

    }

    .terminal{

        margin:15px 0;

    }

}

/* ==========================================
   GLOW ANIMATION
========================================== */

.display{

    animation:displayGlow 2.5s infinite alternate;

}

@keyframes displayGlow{

    from{

        box-shadow:

        inset 0 0 15px rgba(0,255,140,.05),

        0 0 10px rgba(0,255,140,.08);

    }

    to{

        box-shadow:

        inset 0 0 25px rgba(0,255,140,.15),

        0 0 25px rgba(0,255,140,.15);

    }

}

/* ==========================================
   PAY BUTTON PULSE
========================================== */

.btn-pay{

    animation:pulse 2.5s infinite;

}

@keyframes pulse{

    0%{

        box-shadow:

        0 0 0 rgba(53,233,123,.2);

    }

    50%{

        box-shadow:

        0 0 35px rgba(53,233,123,.6);

    }

    100%{

        box-shadow:

        0 0 0 rgba(53,233,123,.2);

    }

}

/* ==========================================
   BUTTON FOCUS
========================================== */

button:focus{

    outline:none;

}

/* ==========================================
   TEXT SELECTION
========================================== */

::selection{

    background:#32d36d;

    color:#ffffff;

}

/* ==========================================
   DISABLE TAP HIGHLIGHT
========================================== */

button{

    -webkit-tap-highlight-color:transparent;

}

/* ==========================================
   SMOOTH TRANSITION
========================================== */

button,
.display,
#nominal{

    transition:all .25s ease;

}
@media(max-width:480px){

.display{

    min-height:140px;

    padding:18px;

}

.currency{

    font-size:42px;

}

#nominal{

    font-size:54px;

}

}
/* ==========================================
   END
========================================== */