/* ==========================================================
GTRADES-AXIS™
PAYMENT PAGE
========================================================== */

:root{

--primary:#008cff;
--primary-light:#19a7ff;
--dark:#0d1117;
--dark2:#161b22;
--card:#1b2330;
--border:#2b3542;
--text:#ffffff;
--muted:#9ca3af;
--green:#16c784;
--red:#ea3943;
--gold:#f8b400;
--shadow:0 15px 40px rgba(0,0,0,.35);

}

*{

margin:0;
padding:0;
box-sizing:border-box;

}

html{

scroll-behavior:smooth;

}

body{

background:var(--dark);
color:var(--text);
font-family:Arial,Helvetica,sans-serif;
line-height:1.6;

}

/* ==========================================================
TOPBAR
========================================================== */

.topbar{

height:80px;

padding:0 50px;

display:flex;

align-items:center;

justify-content:space-between;

background:#111827;

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

position:sticky;

top:0;

z-index:999;

}

.logo{

display:flex;

align-items:center;

gap:18px;

}

.logo img{

width:55px;

height:55px;

object-fit:contain;

}

.logo h2{

font-size:24px;

font-weight:700;

}

.logo small{

display:block;

color:var(--muted);

font-size:13px;

}

.back-btn{

padding:12px 20px;

border-radius:10px;

background:var(--primary);

color:white;

text-decoration:none;

font-weight:600;

transition:.3s;

display:flex;

align-items:center;

gap:10px;

}

.back-btn:hover{

background:var(--primary-light);

transform:translateY(-2px);

}

/* ==========================================================
HERO
========================================================== */

.payment-hero{

padding:90px 20px 70px;

text-align:center;

max-width:1100px;

margin:auto;

}

.payment-hero h1{

font-size:58px;

margin-bottom:20px;

font-weight:800;

}

.payment-hero span{

color:var(--primary);

}

.payment-hero p{

max-width:760px;

margin:auto;

font-size:20px;

color:var(--muted);

}

/* ==========================================================
PLANS
========================================================== */

.plans{

max-width:1300px;

margin:40px auto;

padding:0 20px;

display:grid;

grid-template-columns:

repeat(auto-fit,minmax(340px,1fr));

gap:35px;

}

.plan-card{

background:var(--card);

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

border-radius:20px;

padding:40px;

position:relative;

transition:.35s;

box-shadow:var(--shadow);

}

.plan-card:hover{

transform:translateY(-8px);

border-color:var(--primary);

}

.plan-card.featured{

border:2px solid var(--gold);

transform:scale(1.03);

}

.popular{

position:absolute;

top:-14px;

right:30px;

padding:8px 18px;

background:var(--gold);

color:#000;

font-weight:700;

border-radius:30px;

font-size:12px;

letter-spacing:1px;

}

.plan-header{

text-align:center;

margin-bottom:35px;

}

.plan-header h2{

font-size:30px;

margin-bottom:15px;

}

.plan-header h1{

font-size:70px;

color:var(--primary);

margin-bottom:10px;

}

.plan-header p{

color:var(--muted);

font-size:17px;

}

.plan-card ul{

list-style:none;

display:flex;

flex-direction:column;

gap:18px;

margin-bottom:35px;

}

.plan-card li{

display:flex;

align-items:center;

gap:12px;

font-size:16px;

}

.plan-card li i{

color:var(--green);

font-size:18px;

}

.select-plan{

width:100%;

padding:16px;

border:none;

border-radius:12px;

background:var(--primary);

color:white;

font-size:17px;

font-weight:700;

cursor:pointer;

transition:.3s;

}

.select-plan:hover{

background:var(--primary-light);

transform:translateY(-3px);

}

/* ==========================================================
PREMIUM BENEFITS
========================================================== */

.premium-benefits{

max-width:1300px;

margin:80px auto;

padding:0 20px;

}

.premium-benefits h2{

text-align:center;

font-size:42px;

margin-bottom:50px;

}

.benefits-grid{

display:grid;

grid-template-columns:

repeat(auto-fit,minmax(260px,1fr));

gap:30px;

}

.benefit-card{

background:var(--card);

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

border-radius:18px;

padding:35px;

text-align:center;

transition:.35s;

}

.benefit-card:hover{

transform:translateY(-6px);

border-color:var(--primary);

}

.benefit-card i{

font-size:45px;

color:var(--primary);

margin-bottom:20px;

}

.benefit-card h3{

font-size:24px;

margin-bottom:15px;

}

.benefit-card p{

color:var(--muted);

font-size:15px;

}
/* ==========================================================
PAYMENT METHODS
========================================================== */

.payment-methods{

max-width:1300px;

margin:90px auto;

padding:0 20px;

}

.payment-methods h2{

text-align:center;

font-size:42px;

margin-bottom:15px;

}

.section-text{

text-align:center;

max-width:750px;

margin:0 auto 60px;

color:var(--muted);

font-size:18px;

}

.payment-grid{

display:grid;

grid-template-columns:

repeat(auto-fit,minmax(420px,1fr));

gap:35px;

}

/* ==========================================================
PAYMENT CARD
========================================================== */

.payment-card{

background:var(--card);

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

border-radius:20px;

padding:35px;

box-shadow:var(--shadow);

transition:.35s;

}

.payment-card:hover{

transform:translateY(-8px);

border-color:var(--primary);

}

.payment-card h3{

text-align:center;

font-size:30px;

margin:25px 0;

}

.payment-icon{

width:90px;

height:90px;

margin:auto;

border-radius:50%;

display:flex;

align-items:center;

justify-content:center;

font-size:42px;

color:white;

}

.payment-icon.mpesa{

background:#16c784;

}

.payment-icon.paypal{

background:#0070ba;

}

/* ==========================================================
DETAILS
========================================================== */

.payment-details{

display:flex;

flex-direction:column;

gap:18px;

margin-top:25px;

margin-bottom:30px;

}

.detail{

background:#111827;

padding:18px;

border-radius:12px;

display:flex;

align-items:center;

justify-content:space-between;

gap:15px;

}

.detail span{

display:block;

font-size:13px;

color:var(--muted);

margin-bottom:6px;

}

.detail strong{

font-size:18px;

font-weight:700;

word-break:break-all;

}

.copy-btn{

width:45px;

height:45px;

border:none;

border-radius:10px;

background:var(--primary);

color:white;

cursor:pointer;

transition:.3s;

font-size:16px;

}

.copy-btn:hover{

background:var(--primary-light);

transform:scale(1.08);

}

/* ==========================================================
INSTRUCTIONS
========================================================== */

.instructions{

background:#111827;

padding:25px;

border-radius:15px;

border-left:4px solid var(--primary);

}

.instructions h4{

margin-bottom:18px;

font-size:20px;

}

.instructions ol{

padding-left:20px;

display:flex;

flex-direction:column;

gap:14px;

}

.instructions li{

color:#d1d5db;

font-size:15px;

}

/* ==========================================================
NOTICE
========================================================== */

.payment-notice{

max-width:1100px;

margin:80px auto;

padding:0 20px;

}

.notice-card{

background:linear-gradient(

135deg,

#0f172a,

#172033

);

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

border-left:6px solid var(--gold);

border-radius:18px;

padding:30px;

display:flex;

align-items:flex-start;

gap:25px;

box-shadow:var(--shadow);

}

.notice-card i{

font-size:38px;

color:var(--gold);

margin-top:4px;

}

.notice-card h3{

font-size:26px;

margin-bottom:12px;

}

.notice-card p{

font-size:16px;

line-height:1.8;

color:#d1d5db;

}

.notice-card strong{

color:white;

}

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

.payment-card,

.notice-card{

animation:fadeUp .6s ease;

}

@keyframes fadeUp{

from{

opacity:0;

transform:translateY(35px);

}

to{

opacity:1;

transform:translateY(0);

}

}
/* ==========================================================
PAYMENT FORM
========================================================== */

.payment-form-section{

max-width:1100px;

margin:90px auto;

padding:0 20px;

}

.payment-form-card{

background:var(--card);

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

border-radius:20px;

padding:45px;

box-shadow:var(--shadow);

}

.payment-form-card h2{

text-align:center;

font-size:38px;

margin-bottom:15px;

}

.payment-form-card>p{

text-align:center;

color:var(--muted);

max-width:700px;

margin:0 auto 40px;

line-height:1.8;

}

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

.form-grid{

display:grid;

grid-template-columns:

repeat(auto-fit,minmax(300px,1fr));

gap:25px;

margin-bottom:25px;

}

.form-group{

display:flex;

flex-direction:column;

gap:10px;

margin-bottom:25px;

}

.form-group label{

font-size:15px;

font-weight:600;

color:white;

}

.form-group input,

.form-group select,

.form-group textarea{

width:100%;

padding:16px;

background:#111827;

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

border-radius:12px;

font-size:15px;

color:white;

outline:none;

transition:.30s;

}

.form-group input:focus,

.form-group select:focus,

.form-group textarea:focus{

border-color:var(--primary);

box-shadow:

0 0 0 3px

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

}

.form-group textarea{

resize:vertical;

min-height:130px;

}

.form-group input::placeholder,

.form-group textarea::placeholder{

color:#7d8796;

}

/* ==========================================================
SELECTED PLAN
========================================================== */

.selected-plan-box{

margin:35px 0;

padding:25px;

background:#111827;

border:2px solid var(--primary);

border-radius:15px;

}

.selected-plan-box h3{

margin-bottom:20px;

font-size:22px;

}

.selected-plan-info{

display:flex;

justify-content:space-between;

align-items:center;

flex-wrap:wrap;

gap:15px;

}

.selected-plan-info span{

font-size:18px;

font-weight:600;

}

.selected-plan-info strong{

font-size:34px;

color:var(--primary);

font-weight:800;

}

/* ==========================================================
WARNING BOX
========================================================== */

.payment-warning{

display:flex;

align-items:flex-start;

gap:18px;

margin:35px 0;

padding:22px;

background:

rgba(234,57,67,.10);

border-left:5px solid var(--red);

border-radius:12px;

}

.payment-warning i{

font-size:28px;

color:var(--red);

margin-top:3px;

}

.payment-warning p{

font-size:15px;

line-height:1.8;

color:#d6d6d6;

}

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

.submit-payment-btn{

width:100%;

padding:18px;

border:none;

border-radius:12px;

background:linear-gradient(

135deg,

var(--primary),

var(--primary-light)

);

color:white;

font-size:18px;

font-weight:700;

cursor:pointer;

transition:.30s;

display:flex;

justify-content:center;

align-items:center;

gap:12px;

}

.submit-payment-btn:hover{

transform:translateY(-3px);

box-shadow:

0 10px 30px

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

}

.submit-payment-btn:disabled{

opacity:.6;

cursor:not-allowed;

transform:none;

}

/* ==========================================================
STATUS MESSAGE
========================================================== */

.payment-message{

margin-top:25px;

padding:16px;

border-radius:12px;

display:none;

text-align:center;

font-weight:600;

}

.payment-message.success{

display:block;

background:

rgba(22,199,132,.12);

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

color:var(--green);

}

.payment-message.error{

display:block;

background:

rgba(234,57,67,.12);

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

color:var(--red);

}
/* ==========================================================
   GTRADES-AXIS™
   PAYMENT PAGE CSS
   PART 4 – FINAL POLISH
   ========================================================== */


/* ==========================================================
   SUCCESS MODAL
   ========================================================== */

.success-modal {
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.85);
    backdrop-filter: blur(8px);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 9999;
    opacity: 0;
    visibility: hidden;
    transition: all 0.35s ease;
}

.success-modal.active {
    opacity: 1;
    visibility: visible;
}


.success-box {

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

    background: #0b0f1a;
    border: 1px solid rgba(0, 150, 255, 0.35);

    border-radius: 20px;

    padding: 40px 30px;

    text-align: center;

    box-shadow:
    0 0 30px rgba(0,150,255,0.25);

    transform: translateY(40px);
    transition: .4s ease;
}


.success-modal.active .success-box {

    transform: translateY(0);

}


.success-icon {

    width: 80px;
    height: 80px;

    margin: auto auto 20px;

    border-radius: 50%;

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

    font-size:40px;

    color:#00aaff;

    border:2px solid #00aaff;

    animation:
    pulseSuccess 1.8s infinite;

}


.success-box h2 {

    color:white;
    font-size:28px;
    margin-bottom:15px;

}


.success-box p {

    color:#b8c7d9;
    line-height:1.7;

}


.success-close {

    margin-top:25px;

    padding:12px 35px;

    border:none;

    border-radius:30px;

    background:#008cff;

    color:white;

    font-weight:600;

    cursor:pointer;

    transition:.3s;

}


.success-close:hover {

    transform:translateY(-3px);

}



/* ==========================================================
   LOADING SCREEN
   ========================================================== */


.loading-screen {

    position:fixed;

    inset:0;

    background:#05070c;

    display:none;

    align-items:center;

    justify-content:center;

    flex-direction:column;

    z-index:10000;

}


.loading-screen.active {

    display:flex;

}


.loader {

    width:60px;
    height:60px;

    border-radius:50%;

    border:5px solid rgba(255,255,255,.15);

    border-top-color:#0099ff;

    animation:rotateLoader 1s linear infinite;

}


.loading-text {

    margin-top:20px;

    color:#b7c9dd;

    font-size:15px;

    letter-spacing:1px;

}



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


.payment-footer {

    margin-top:80px;

    padding:30px 20px;

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

    text-align:center;

    color:#718096;

    font-size:14px;

}


.payment-footer span {

    color:#008cff;

}



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


::-webkit-scrollbar {

    width:10px;

}


::-webkit-scrollbar-track {

    background:#05070c;

}


::-webkit-scrollbar-thumb {

    background:#008cff;

    border-radius:20px;

}


::-webkit-scrollbar-thumb:hover {

    background:#00b7ff;

}



/* ==========================================================
   ANIMATIONS
   ========================================================== */


@keyframes rotateLoader {

    from {
        transform:rotate(0deg);
    }

    to {
        transform:rotate(360deg);
    }

}



@keyframes pulseSuccess {

    0% {

        box-shadow:
        0 0 0 0 rgba(0,150,255,.5);

    }

    70% {

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

    }

    100% {

        box-shadow:
        0 0 0 0 rgba(0,150,255,0);

    }

}



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


@media(max-width:900px){


.payment-container {

    width:92%;

}


.payment-wrapper {

    flex-direction:column;

}


.payment-card {

    width:100%;

}



}


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


@media(max-width:600px){


.payment-container {

    padding:20px 10px;

}



.payment-header h1 {

    font-size:28px;

}



.payment-header p {

    font-size:14px;

}



.payment-card {

    padding:25px 18px;

    border-radius:15px;

}



.form-group input,
.form-group select {

    height:45px;

}



.submit-payment {

    width:100%;

}



.success-box {

    padding:30px 20px;

}



.success-box h2 {

    font-size:23px;

}


.payment-footer {

    margin-top:40px;

}



}


/* ==========================================================
   FINAL PAGE POLISH
   ========================================================== */


.payment-card,
.payment-header,
.submit-payment {

    animation:
    fadeUp .7s ease forwards;

}



@keyframes fadeUp {


from {

    opacity:0;

    transform:translateY(20px);

}


to {

    opacity:1;

    transform:translateY(0);

}


}


/* Prevent horizontal overflow */

body {

    overflow-x:hidden;

}