/* ===================================
   DELTA FORCE PREMIUM UI
   Dark Blue Eye Comfort Theme
=================================== */

:root{

    --bg-main:#050b18;
    --bg-secondary:#0b1428;
    --card-bg:#0f1b33;

    --border:#1e2f55;

    --accent:#3b82f6;
    --accent2:#22c1ff;
    --neon:#00eaff;

    --text-main:#cfe9ff;
    --text-soft:#7fa7d9;

}

/* RESET */

*{
margin:0;
padding:0;
box-sizing:border-box;
font-family:Inter,system-ui;
}

body{

background:linear-gradient(
180deg,
#040814,
#081024,
#050b18
);

color:var(--text-main);

min-height:100vh;

}

/* CONTAINER */

.container{

max-width:620px;

margin:auto;

padding:20px;

}

/* HEADER */

.header{

display:flex;

align-items:center;

justify-content:space-between;

margin-bottom:35px;

border-bottom:1px solid var(--border);

padding-bottom:15px;

}

.logo-main{

font-size:24px;

font-weight:900;

letter-spacing:1px;

color:var(--text-main);

}

.logo-sub{

background:linear-gradient(
90deg,
#3b82f6,
#22c1ff
);

-webkit-background-clip:text;

-webkit-text-fill-color:transparent;

font-weight:900;

}

.btn-back{

color:var(--text-soft);

text-decoration:none;

font-size:14px;

}

/* TITLE */

.page-title{

font-size:28px;

font-weight:900;

margin-bottom:6px;

background:linear-gradient(
90deg,
#22c1ff,
#3b82f6
);

-webkit-background-clip:text;

-webkit-text-fill-color:transparent;

}

.page-subtitle{

color:var(--text-soft);

margin-bottom:25px;

font-size:14px;

}

/* GRID */

.uc-packages{

display:grid;

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

gap:14px;

margin-bottom:25px;

}

/* CARD */

.uc-card{

background:var(--card-bg);

border:1px solid var(--border);

border-radius:16px;

padding:20px;

text-align:center;

cursor:pointer;

transition:.3s;

position:relative;

}

/* hover */

.uc-card:hover{

transform:translateY(-4px);

border-color:var(--accent);

box-shadow:

0 0 15px rgba(34,193,255,.25);

}

/* active */

.uc-card.active{

border:1px solid var(--neon);

box-shadow:

0 0 25px rgba(0,234,255,.35);

}

/* badge */

.uc-card .badge{

position:absolute;

top:-8px;

right:8px;

background:linear-gradient(
90deg,
#22c1ff,
#3b82f6
);

color:#001;

font-size:10px;

font-weight:800;

padding:4px 8px;

border-radius:6px;

}

/* icon */

.uc-card img{

width:70px;

height:70px;

object-fit:contain;

margin-bottom:12px;

}

/* uc title */

.uc-card h3{

font-size:18px;

margin-bottom:6px;

color:var(--text-main);

}

/* price */

.uc-card p{

color:var(--accent2);

font-weight:800;

font-size:15px;

}

/* ORDER BOX */

.order-summary{

background:var(--bg-secondary);

border:1px dashed var(--border);

border-radius:14px;

padding:18px;

margin-bottom:20px;

}

/* item */

.sum-item{

display:flex;

justify-content:space-between;

margin-bottom:8px;

font-size:14px;

}

.val{

color:var(--accent2);

font-weight:900;

}

/* BUTTON */

.btn-primary-lg{

width:100%;

background:linear-gradient(
90deg,
#3b82f6,
#22c1ff
);

border:none;

padding:18px;

border-radius:14px;

font-weight:900;

font-size:16px;

color:#001018;

cursor:pointer;

transition:.3s;

}

.btn-primary-lg:hover{

transform:translateY(-2px);

box-shadow:

0 0 20px rgba(34,193,255,.5);

}

/* disabled */

.btn-primary-lg:disabled{

background:#1a2745;

color:#5a6c8f;

cursor:not-allowed;

box-shadow:none;

}

/* NOTE */

.note{

text-align:center;

margin-top:12px;

font-size:13px;

color:var(--text-soft);

}

/* MOBILE */

@media(max-width:480px){

.uc-packages{

grid-template-columns:1fr 1fr;

gap:12px;

}

.uc-card{

padding:16px;

}

.uc-card img{

width:60px;

height:60px;

}

.page-title{

font-size:24px;

}

}

/* SCROLLBAR */

::-webkit-scrollbar{

width:6px;

}

::-webkit-scrollbar-thumb{

background:#203a70;

border-radius:10px;

}