/* =========================
DASHBOARD STATS CARD SYSTEM
========================= */

.dashboard-stats{

display:grid;

grid-template-columns:
repeat(auto-fit,minmax(220px,1fr));

gap:20px;

margin-top:20px;

}


.stat-card{

background:
linear-gradient(145deg,#162f59,#0b1c39);

padding:28px;

border-radius:22px;

box-shadow:
0 14px 45px rgba(0,0,0,.35);

font-size:16px;

transition:.25s;

}


.stat-card strong{

display:block;

margin-top:8px;

font-size:28px;

color:#4ade80;

}


/* HOVER EFFECT */

.stat-card:hover{

transform:translateY(-4px);

background:
linear-gradient(145deg,#1f3d73,#112d57);

}
/* =========================
GLOBAL RESET
========================= */

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



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

body{

background:linear-gradient(135deg,#081a3a,#0b234f);

color:white;

line-height:1.5;

}



/* =========================
LAYOUT
========================= */

.main{

margin-left:250px;

padding:40px;

min-height:100vh;

}



/* =========================
SIDEBAR
========================= */

.sidebar{

position:fixed;

width:250px;

height:100%;

background:linear-gradient(180deg,#c1121f,#780000);

padding:30px;

}


.sidebar a{

display:block;

color:white;

text-decoration:none;

padding:12px;

margin-bottom:10px;

border-radius:10px;

transition:.2s;

}


.sidebar a:hover{

background:#ffffff20;

}



/* =========================
GLOBAL BUTTON SYSTEM
========================= */

button,
input[type="submit"],
input[type="button"]{

background:linear-gradient(45deg,#00c853,#4ade80);

color:white;

border:none;

padding:14px 26px;

border-radius:12px;

font-size:15px;

font-weight:600;

cursor:pointer;

transition:.25s;

}


button:hover{

transform:translateY(-2px);

box-shadow:0 8px 20px rgba(0,0,0,.35);

}



/* BUTTON TYPES */

.btn-edit{

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

}

.btn-delete{

background:linear-gradient(45deg,#ef4444,#dc2626);

}



/* =========================
INPUT SYSTEM FIX
========================= */

form{

display:block;

width:100%;

}

label{

display:block;

margin-top:12px;

margin-bottom:6px;

font-weight:500;

}


input,
select,
textarea{

display:block;

width:100%;

background:#ffffff12;

color:white;

border:none;

padding:14px;

border-radius:12px;

margin-bottom:14px;

outline:none;

}


input::placeholder{

color:#ffffff70;

}



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

.card{

background:linear-gradient(145deg,#162f59,#0b1c39);

padding:28px;

border-radius:22px;

margin-bottom:25px;

box-shadow:0 14px 45px rgba(0,0,0,.35);

}



/* =========================
STEP PROGRESS BAR
========================= */

.step-wrapper{

display:flex;

align-items:center;

justify-content:center;

gap:10px;

margin-bottom:30px;

}

.step-item{

width:44px;

height:44px;

border-radius:50%;

display:flex;

align-items:center;

justify-content:center;

background:#ffffff20;

font-weight:600;

transition:.25s;

}

.step-item.active{

background:#22c55e;

}

.step-line{

width:60px;

height:4px;

background:#ffffff20;

}



/* =========================
SERVICE SELECTION PAGE
========================= */

.service-wrapper{

max-width:950px;

margin:auto;

}

.service-grid{

display:grid;

grid-template-columns:repeat(auto-fit,minmax(260px,1fr));

gap:28px;

margin-top:20px;

}

.service-card-pro{

background:linear-gradient(145deg,#162f59,#0b1c39);

padding:30px;

border-radius:24px;

text-align:center;

transition:.35s;

cursor:pointer;

box-shadow:0 18px 60px rgba(0,0,0,.35);

}

.service-card-pro:hover{

transform:translateY(-8px);

background:linear-gradient(145deg,#1f3d73,#112d57);

}

.service-card-pro img{

margin-bottom:12px;

}

.service-card-pro h3{

font-size:18px;

margin-bottom:6px;

}



/* =========================
PLAN SELECTION (STEP-2 FIX)
========================= */

.plan-wrapper{

max-width:900px;

margin:auto;

}

.plan-grid{

display:grid;

grid-template-columns:repeat(auto-fit,minmax(260px,1fr));

gap:28px;

margin-top:15px;

}

.plan-card-select{

display:block;

cursor:pointer;

position:relative;

}

.plan-card-inner{

background:linear-gradient(145deg,#162f59,#0b1c39);

padding:30px;

border-radius:22px;

text-align:center;

border:2px solid transparent;

transition:.3s;

}

.plan-card-inner:hover{

transform:translateY(-6px);

}

.plan-card-select input{

display:none;

}

.plan-card-select input:checked + .plan-card-inner{

border:2px solid #22c55e;

background:linear-gradient(145deg,#1f3d73,#112d57);

box-shadow:0 0 0 2px #22c55e55;

}

.plan-title{

font-size:20px;

margin-bottom:10px;

font-weight:600;

}

.plan-duration{

opacity:.7;

margin-bottom:10px;

}

.plan-price{

font-size:24px;

font-weight:700;

color:#4ade80;

}



/* =========================
PAYMENT PANEL (STEP-3)
========================= */

.payment-info{

background:linear-gradient(145deg,#1a3565,#102448);

padding:24px;

border-radius:18px;

margin-top:20px;

margin-bottom:25px;

line-height:1.8;

}



/* =========================
TABLE STYLE
========================= */

table{

width:100%;

border-collapse:collapse;

}

table tr{

border-bottom:1px solid #ffffff15;

}

table td{

padding:14px;

}



/* =========================
MOBILE NAVIGATION BAR
========================= */

.mobile-nav{

position:fixed;

bottom:0;

width:100%;

background:#081a3a;

display:none;

justify-content:space-around;

padding:10px 0;

z-index:999;

}

.mobile-nav a{

color:white;

text-decoration:none;

font-size:13px;

text-align:center;

}



/* =========================
RESPONSIVE FIXES
========================= */

@media(max-width:900px){

.sidebar{

display:none;

}

.main{

margin-left:0;

padding:20px;

padding-bottom:80px;

}

.service-grid{

grid-template-columns:1fr;

}

.plan-grid{

grid-template-columns:1fr;

}

.mobile-nav{

display:flex;

}

/* =========================
SERVICE SELECT PAGE FINAL POLISH
========================= */

.service-card-pro{

text-decoration:none;

color:white !important;

}


.service-card-pro h3{

margin-top:10px;

font-size:20px;

font-weight:600;

}


.service-card-pro p{

opacity:.7;

font-size:14px;

margin-top:4px;

}


.service-card-pro a{

text-decoration:none;

color:white !important;

}


/* CLICKABLE CARD EFFECT */

.service-card-pro{

position:relative;

overflow:hidden;

}


.service-card-pro::after{

content:"";

position:absolute;

top:0;

left:-100%;

width:100%;

height:100%;

background:linear-gradient(120deg,transparent,#ffffff15,transparent);

transition:.4s;

}


.service-card-pro:hover::after{

left:100%;

}


/* MOBILE CARD SPACING FIX */

@media(max-width:900px){

.service-wrapper{

padding-bottom:20px;

}

.service-card-pro{

padding:26px;

}

/* =========================
SERVICE CARD FINAL ALIGNMENT FIX
========================= */

.service-card-link{

text-decoration:none !important;

color:white !important;

display:block;

}


/* TITLE FIX */

.service-title{

font-size:20px;

font-weight:600;

margin-top:10px;

margin-bottom:6px;

text-align:center;

color:white !important;

}


/* SUBTITLE FIX */

.service-subtitle{

font-size:14px;

opacity:.7;

margin-bottom:12px;

text-align:center;

}


/* IMAGE CENTER FIX */

.service-image{

width:60px !important;

height:60px !important;

object-fit:contain;

display:block;

margin:auto;

}


/* ICON BOX CENTERING */

.service-icon-box{

width:80px;

height:80px;

margin:auto;

margin-bottom:12px;

display:flex;

align-items:center;

justify-content:center;

background:#ffffff10;

border-radius:16px;

}


/* CTA BUTTON STYLE */

.service-action-btn{

display:inline-block;

padding:10px 18px;

border-radius:10px;

background:linear-gradient(45deg,#00c853,#4ade80);

font-weight:600;

font-size:14px;

margin-top:6px;

}