/* ========================================= */
/* SP CUSTOMER REGISTRATION V3 */
/* ========================================= */

*{

margin:0;

padding:0;

box-sizing:border-box;

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

}

body{

background-image:url("https://images.unsplash.com/photo-1503376780353-7e6692767b70?q=80&w=2070&auto=format&fit=crop&ixlib=rb-4.1.0&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D");

background-size:cover;

background-position:center;

background-repeat:no-repeat;

background-attachment:fixed;

min-height:100vh;

}

.overlay{

position:fixed;

top:0;

left:0;

width:100%;

height:100%;

background:rgba(0,0,0,.72);

backdrop-filter:blur(4px);

z-index:1;

}

.container{

position:relative;

z-index:2;

width:100%;

min-height:100vh;

display:flex;

justify-content:center;

align-items:center;

padding:40px;

}

.card{

width:560px;

max-width:95%;

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

border-radius:30px;

padding:45px;

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

backdrop-filter:blur(18px);

box-shadow:

0 0 30px rgba(255,0,0,.18),

0 30px 80px rgba(0,0,0,.75);

}

/* ========================================= */
/* LOGO */
/* ========================================= */

.logo-area{

text-align:center;

margin-bottom:35px;

}

.logo{

width:290px;

max-width:100%;

display:block;

margin:auto;

margin-bottom:20px;

filter:

drop-shadow(0 0 10px rgba(255,0,0,.35));

transition:.35s;

}

.logo:hover{

transform:scale(1.03);

}

.logo-area h1{

font-size:42px;

font-weight:700;

color:#ffffff;

margin-bottom:10px;

}

.logo-area p{

color:#bbbbbb;

font-size:17px;

}

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

.form-area{

margin-top:10px;

}

.input-group{

margin-bottom:20px;

}

.input-group label{

display:block;

color:#ffffff;

font-weight:600;

margin-bottom:8px;

}

input,
select{

width:100%;

height:56px;

padding:0 60px 0 18px;

border-radius:14px;

border:1px solid #444;

background:#262626;

color:#ffffff;

font-size:16px;

outline:none;

transition:.3s;

appearance:none;

-webkit-appearance:none;

-moz-appearance:none;

}

select{

background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='18' height='18' viewBox='0 0 16 16'%3E%3Cpath d='M3 6l5 5 5-5' stroke='white' stroke-width='2.2' fill='none' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");

background-repeat:no-repeat;

background-position:right 28px center;

background-size:18px;

cursor:pointer;

}

input:focus,
select:focus{

border:1px solid #ff2d2d;

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

}

#btnRegister{

width:100%;

height:60px;

border:none;

border-radius:14px;

background:linear-gradient(90deg,#ff2d2d,#b30000);

color:white;

font-size:18px;

font-weight:bold;

letter-spacing:1px;

cursor:pointer;

transition:.3s;

}

#btnRegister:hover{

transform:translateY(-2px);

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

}

#status{

margin-top:18px;

text-align:center;

font-size:16px;

font-weight:bold;

}

/* ========================================= */
/* PREMIUM POPUP */
/* ========================================= */

.popup{

display:none;

position:fixed;

top:0;
left:0;

width:100%;
height:100%;

justify-content:center;
align-items:center;

background:rgba(0,0,0,.80);

backdrop-filter:blur(8px);

z-index:9999;

animation:fadeIn .25s ease;

}

.popup-card{

width:520px;

max-width:94%;

background:#171717;

border-radius:25px;

padding:35px;

border:2px solid #ff2d2d;

box-shadow:

0 0 35px rgba(255,0,0,.35),

0 20px 60px rgba(0,0,0,.70);

text-align:center;

}

.popup-logo{

width:220px;

display:block;

margin:auto;

margin-bottom:15px;

filter:drop-shadow(0 0 10px rgba(255,0,0,.35));

}

.popup-card h2{

font-size:30px;

color:#ffffff;

margin-bottom:25px;

}

.customer-box{

background:#222;

border-radius:15px;

padding:20px;

margin-bottom:25px;

}

.customer-box .row{

display:flex;

justify-content:space-between;

padding:10px 0;

border-bottom:1px solid rgba(255,255,255,.08);

color:#e6e6e6;

font-size:16px;

}

.customer-box .row:last-child{

border-bottom:none;

}

.customer-box span{

color:#bdbdbd;

}

.customer-box strong{

color:#ffffff;

font-weight:700;

}

.popup-button{

display:flex;

gap:15px;

}

.cancelBtn{

flex:1;

height:52px;

border:none;

border-radius:12px;

background:#5b5b5b;

color:white;

font-size:16px;

cursor:pointer;

transition:.25s;

}

.cancelBtn:hover{

background:#777;

}

.continueBtn{

flex:1;

height:52px;

border:none;

border-radius:12px;

background:linear-gradient(90deg,#ff2d2d,#b30000);

color:white;

font-size:16px;

font-weight:bold;

cursor:pointer;

transition:.25s;

}

.continueBtn:hover{

transform:translateY(-2px);

box-shadow:0 0 20px rgba(255,0,0,.40);

}

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

@keyframes fadeIn{

from{

opacity:0;

transform:scale(.92);

}

to{

opacity:1;

transform:scale(1);

}

}

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

@media(max-width:768px){

.card{

width:100%;

padding:25px;

}

.logo{

width:220px;

}

.logo-area h1{

font-size:32px;

}

.popup-card{

width:95%;

padding:25px;

}

.popup-logo{

width:180px;

}

.popup-button{

flex-direction:column;

}

}