/* ===============================
   BUXNESIA CHECK ORDER
================================ */

.cek-order-wrapper {
    position: relative;
    overflow: hidden;

    max-width: 460px;
    margin: 80px auto;
    padding: 32px 28px;

    background:
        linear-gradient(180deg, rgba(255,255,255,.08), rgba(255,255,255,.035));

    border: 1px solid rgba(255,255,255,.10);
    border-radius: 28px;

    box-shadow:
        0 28px 80px rgba(0,0,0,.35),
        inset 0 1px 0 rgba(255,255,255,.08);

    text-align: center;
}

.cek-order-wrapper::before{
    content:"";

    position:absolute;

    right:-80px;
    top:-80px;

    width:180px;
    height:180px;

    border-radius:50%;

    background:rgba(34,211,238,.12);

    filter:blur(30px);

    pointer-events:none;
}

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

.cek-order-wrapper h2{
    position:relative;
    z-index:1;

    margin:0 0 8px;

    color:#ffffff;

    font-size:30px;
    font-weight:950;
    letter-spacing:-.04em;
}

.cek-order-wrapper p{
    position:relative;
    z-index:1;

    margin:0 0 24px;

    color:#94a3b8;

    font-size:14px;
    line-height:1.7;
}

/* ===============================
   FORM
================================ */

#cekOrderForm{
    position:relative;
    z-index:1;

    display:flex;
    flex-direction:column;
    gap:14px;
}

/* ===============================
   INPUT
================================ */

#orderCodeInput{
    width:100%;
    height:50px;

    padding:0 16px;

    color:#ffffff;
    background:rgba(255,255,255,.055);

    border:1px solid rgba(255,255,255,.12);
    border-radius:16px;

    font-size:14px;
    font-weight:700;

    text-transform:uppercase;
    letter-spacing:.8px;

    outline:none;

    transition:.25s ease;
}

#orderCodeInput::placeholder{
    color:#64748b;
}

#orderCodeInput:focus{
    border-color:rgba(34,211,238,.55);

    box-shadow:
        0 0 0 4px rgba(34,211,238,.10),
        0 0 28px rgba(34,211,238,.08);
}

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

#cekOrderForm button{

    height:50px;

    border:none;
    border-radius:16px;

    color:#07111f;

    background:
        linear-gradient(135deg,#22d3ee,#facc15);

    font-size:15px;
    font-weight:900;

    cursor:pointer;

    box-shadow:
        0 18px 36px rgba(34,211,238,.18);

    transition:.25s ease;
}

#cekOrderForm button:hover{

    transform:translateY(-2px);

    box-shadow:
        0 22px 42px rgba(34,211,238,.26);
}

#cekOrderForm button:active{

    transform:translateY(0);
}

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

@media(max-width:480px){

.cek-order-wrapper{

margin:34px 14px;

padding:26px 20px;

border-radius:24px;

}

.cek-order-wrapper h2{

font-size:26px;

}

}

/* ===============================
   FALLBACK POPUP
================================ */

.fp-overlay{

position:fixed;

inset:0;

display:flex;

align-items:center;

justify-content:center;

z-index:9999;

background:
    rgba(3,7,18,.78);

backdrop-filter:blur(10px);
-webkit-backdrop-filter:blur(10px);

}

.fp-box{

width:90%;
max-width:380px;

padding:24px;

text-align:center;

color:#e5e7eb;

background:
    linear-gradient(180deg,rgba(15,23,42,.98),rgba(7,11,24,.98));

border:1px solid rgba(255,255,255,.10);

border-radius:24px;

box-shadow:
    0 28px 70px rgba(0,0,0,.45);

}

.fp-box h3{

margin:0 0 10px;

color:#ffffff;

font-size:20px;

font-weight:900;

}

.fp-box p{

margin:0 0 18px;

color:#94a3b8;

font-size:14px;

line-height:1.7;

}

.fp-box button{

min-width:120px;
height:44px;

padding:0 20px;

border:none;

border-radius:14px;

cursor:pointer;

font-weight:900;

color:#07111f;

background:
    linear-gradient(135deg,#22d3ee,#facc15);

transition:.25s ease;

}

.fp-box button:hover{

transform:translateY(-2px);

box-shadow:
    0 16px 34px rgba(34,211,238,.18);

}