:root { --blue: #007BFF; --glass: rgba(255, 255, 255, 0.03); }

/* 3D Visual Effects */
.bg-glow { position: fixed; width: 600px; height: 600px; border-radius: 50%; filter: blur(120px); z-index: -1; opacity: 0.1; }
.glow-1 { top: -10%; left: -5%; background: var(--blue); }
.glow-2 { bottom: 0; right: -5%; background: #6c5ce7; }

/* Isolated Hero Style */
.pricing-hero { padding: 220px 0 100px; text-align: center; }
.hero-tag { color: var(--blue); text-transform: uppercase; letter-spacing: 4px; font-weight: 700; display: block; margin-bottom: 20px; }
.pricing-hero h1 { font-family: 'Orbitron'; font-size: 4.5rem; }

/* Apple-Style Cardbox */
.pricing-layout { display: grid; grid-template-columns: repeat(2, 1fr); gap: 40px; margin-bottom: 120px; }

.pricing-card {
    background: var(--glass);
    border: 1px solid rgba(255,255,255,0.08);
    border-radius: 40px;
    backdrop-filter: blur(25px);
    transition: all 0.6s cubic-bezier(0.16, 1, 0.3, 1);
}

.pricing-card:hover { transform: translateY(-10px) scale(1.02); border-color: var(--blue); }

.card-inner-padding { padding: 60px 8%; }

.price-box { margin: 30px 0; font-family: 'Orbitron'; }
.currency { font-size: 1.5rem; color: var(--blue); vertical-align: top; }
.amount { font-size: 4rem; font-weight: 900; color: #fff; }

.feature-list { list-style: none; margin-bottom: 40px; }
.feature-list li { padding: 15px 0; border-bottom: 1px solid rgba(255,255,255,0.05); color: #ccc; }
.feature-list b { color: #fff; }

/* Enrollment Form Section */
.enrollment-section { padding: 120px 0; background: radial-gradient(circle at center, #001a33 0%, #000 100%); }
.form-card { background: var(--glass); padding: 80px 8%; border-radius: 40px; max-width: 900px; margin: 0 auto; border: 1px solid rgba(255,255,255,0.1); }
.form-header { text-align: center; margin-bottom: 50px; }

.form-row { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; margin-bottom: 20px; }
input, select, textarea {
    width: 100%; background: #080808; border: 1px solid rgba(255,255,255,0.1); 
    padding: 22px; border-radius: 12px; color: #fff; font-family: 'Inter'; font-size: 1rem;
}

/* 3D Call To Action */
.btn-primary-3d {
    width: 100%; background: linear-gradient(135deg, var(--blue), #003fa3);
    color: #fff; padding: 22px; border-radius: 50px; border: none; font-weight: 900; 
    text-transform: uppercase; cursor: pointer; transition: 0.4s;
    box-shadow: 0 10px 30px rgba(0, 123, 255, 0.4);
}
.btn-primary-3d:hover { box-shadow: 0 15px 40px rgba(0, 123, 255, 0.6); transform: scale(1.02); }

/* Animation Classes */
.reveal-on-scroll { opacity: 0; transform: translateY(40px); }
.reveal-on-scroll.active { opacity: 1; transform: translateY(0); transition: 0.8s ease-out; }

@media (max-width: 768px) {
    .price-box {
        margin: 20px 0;
    }
    .amount {
        font-size: 3.5rem !important;
    }
}

/* 1. Grid Section Padding & Size Control */
.pricing-grid-section {
    padding: 30px 10%; /* Adds 10% padding to both sides of the section */
    display: flex;
    justify-content: center; /* Centers the grid if it's smaller than the screen */
}

/* 2. Refined Pricing Layout */
.pricing-layout {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 30px;
    max-width: 1000px; /* Limits the total width so cards stay small and professional */
    margin: 0 auto; /* Centers the card box group */
}

/* 3. Cardbox Size & Fit */
.pricing-card {
    background: var(--glass);
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 35px; /* Slightly tighter radius for a "small/good fit" look */
    backdrop-filter: blur(25px);
    transition: all 0.5s cubic-bezier(0.16, 1, 0.3, 1);
    height: fit-content; /* Card only grows as long as the text inside */
}

/* 4. Internal Spacing for "Small but Good Fit" Feel */
.card-inner-padding {
    padding: 50px 10%; /* Deep internal padding makes the content look premium */
}

/* 5. Mobile Responsiveness for the new width */
@media (max-width: 992px) {
    .pricing-grid-section {
        padding: 40px 5%; /* Reduces section padding for tablets */
    }
    
    .pricing-layout {
        grid-template-columns: 1fr; /* Stacks cards on mobile */
        max-width: 450px; /* Keeps the card from being too wide on mobile */
    }

}

/* Add this to your global CSS file */
.reserve-success {
    background: #1dbf73 !important; /* Fiverr Green / Success Green */
    box-shadow: 0 0 20px rgba(29, 191, 115, 0.5) !important;
    border-color: #1dbf73 !important;
}

.reserve-sending {
    background: var(--blue) !important;
    opacity: 0.7;
    cursor: not-allowed;
}