/* --- Final AI Career Architect Page Design (v3 - With Background Image) --- */

.roadmap-page-v2 {
    padding-bottom: 4rem;
    background-color: #f8f9fa; /* A light grey background for the whole page */
}

/* --- Hero Section with Background Image --- */
.roadmap-hero-v2 {
    position: relative;
    text-align: center;
    padding: 6rem 2rem;
    background: linear-gradient(rgba(0, 50, 100, 0.6), rgba(0, 25, 50, 0.7)), 
                url('../images/roadmap-hero-bg.jpg') no-repeat center center/cover;
    color: white;
    border-radius: 0 0 50% 50% / 0 0 10% 10%; /* Creates a subtle curve at the bottom */
    animation: fadeIn 1s;
}
.hero-content-v2 .hero-icon-v2 {
    font-size: 3rem;
    background: rgba(255, 255, 255, 0.1);
    padding: 1rem;
    border-radius: 50%;
    margin-bottom: 1rem;
    display: inline-block;
}
.hero-content-v2 h1 {
    font-size: 3.2rem;
    color: white;
    text-shadow: 1px 1px 5px rgba(0,0,0,0.3);
    margin-bottom: 0.5rem;
}
.hero-content-v2 p {
    font-size: 1.2rem;
    color: rgba(255, 255, 255, 0.9);
    max-width: 700px;
    margin: 0 auto;
}

/* --- Main Card Container & Card --- */
.architect-container {
    max-width: 800px;
    margin: -5rem auto 2rem auto; /* Overlaps more for a modern look */
    position: relative;
    z-index: 10;
}
.architect-card {
    background: var(--card-bg);
    border-radius: 20px;
    box-shadow: 0 15px 50px rgba(0, 0, 0, 0.1);
    padding: 2.5rem 3rem;
    position: relative;
    overflow: hidden;
    animation: slideUpIn 1s ease-out;
}

/* Step Content Animation */
.step-content { display: none; }
.step-content.active { display: block; animation: fadeIn 0.5s; }

.card-title {
    text-align: center;
    font-size: 2rem;
    color: var(--primary-color);
    margin: 0 0 2.5rem 0;
    font-weight: 700;
}

/* --- Upgraded Choice Buttons --- */
.choice-grid {
    display: grid;
    /* By default, it will be a single column */
    grid-template-columns: 1fr;
    gap: 1.5rem; /* मोबाईलसाठी अंतर थोडे कमी केले */
}

/* --- Media Query for DESKTOP View --- */
/* This will apply only when screen is wider than 600px */
@media (min-width: 600px) {
    .choice-grid {
        /* On larger screens, show two columns */
        grid-template-columns: 1fr 1fr;
        gap: 2rem;
    }
}
/* --- Media Query for MOBILE & TABLET View --- */
/* This will apply only when screen is 768px or less */
@media (max-width: 768px) {
    /* --- Hero Section for Mobile --- */
    .roadmap-hero-v2 {
        padding: 4rem 1.5rem; /* पॅडिंग कमी केले */
        border-radius: 0 0 30% 30% / 0 0 8% 8%; /* वक्र (curve) थोडा कमी केला */
    }

    .hero-content-v2 h1 {
        font-size: 2.5rem; /* शीर्षकाचा आकार कमी केला */
        line-height: 1.2;
    }
    
    .hero-content-v2 p {
        font-size: 1.1rem; /* मजकुराचा आकार कमी केला */
    }

    /* --- Main Card Container for Mobile --- */
    .architect-container {
        margin-top: -3.5rem; /* ओव्हरलॅप कमी केला */
        padding: 0 1rem; /* बाजूने जागा सोडली */
    }

    .architect-card {
        padding: 2rem 1.5rem; /* कार्डच्या आतली जागा कमी केली */
    }
}
.choice-btn {
    background: #fff;
    border: 1px solid #e0e0e0;
    border-radius: 16px;
    padding: 2rem;
    text-align: center;
    cursor: pointer;
    transition: all 0.3s ease;
    display: flex;
    flex-direction: column;
    align-items: center;
}
.choice-btn:hover {
    transform: translateY(-8px);
    border-color: var(--primary-color);
    box-shadow: 0 10px 30px rgba(0, 119, 182, 0.15);
}
.choice-btn i {
    font-size: 2.8rem;
    color: var(--primary-color);
    margin-bottom: 1.2rem;
}
.choice-btn span {
    display: block;
    font-size: 1.2rem;
    font-weight: 600;
    color: var(--text-color);
    line-height: 1.3;
}
.choice-btn small {
    display: block;
    font-size: 0.9rem;
    color: #6c757d;
    margin-top: 0.8rem;
    flex-grow: 1; /* Pushes button text up if needed */
}

/* Back Button */
.back-btn {
    position: absolute;
    top: 20px;
    left: 20px;
    background: none;
    border: none;
    cursor: pointer;
    display: flex;
    align-items: center;
    gap: 5px;
    color: #6c757d;
    font-weight: 500;
    font-size: 0.9rem;
    opacity: 0.8;
    transition: opacity 0.2s;
}
.back-btn:hover {
    opacity: 1;
}

/* Form Styling within the card */
.form-group { margin-bottom: 1.5rem; }
.form-group label { display: block; font-weight: 600; font-size: 1rem; color: var(--text-color); margin-bottom: 0.5rem; }
.form-group select { width: 100%; padding: 0.9rem 1rem; font-size: 1.1rem; border: 1px solid #ddd; border-radius: 8px; }
.predict-button-container { margin-top: 2rem; }

/* Button Loading Animation */
.btn .btn-loader { display: flex; align-items: center; justify-content: center; gap: 10px; }
@keyframes generating-text-animation { 0% { content: "."; } 33% { content: ".."; } 66% { content: "..."; } 100% { content: "."; } }
.btn .generating-text::after { content: '.'; animation: generating-text-animation 1.5s infinite; }

/* --- Final AI Roadmap Result Design (Notebook Style) --- */

.roadmap-result-container.notebook-style {
    max-width: 900px;
    margin: 3rem auto;
    opacity: 0;
    transform: translateY(20px);
    transition: opacity 0.5s ease-out, transform 0.5s ease-out;
}
.roadmap-result-container.notebook-style.visible {
    opacity: 1; transform: translateY(0);
}

.notebook-container {
    background: var(--card-bg);
    border-radius: 16px;
    box-shadow: 0 10px 40px rgba(0,0,0,0.1);
    border: 1px solid #e0e0e0;
    padding: 2.5rem;
    position: relative;
}

.notebook-page {
    /* Each year's content */
    animation: fadeIn 0.5s;
}

/* Styling for content INSIDE each page */
.notebook-page h3 {
    text-align: center;
    font-size: 2rem;
    color: var(--primary-color);
    margin-top: 0;
    margin-bottom: 0.5rem;
}
.notebook-page > p { /* Mission statement */
    text-align: center;
    font-size: 1.1rem;
    color: #555;
    margin-bottom: 2.5rem;
    font-style: italic;
}
.notebook-page ul { list-style: none; padding-left: 0; }
.notebook-page li {
    padding-left: 25px;
    position: relative;
    margin-bottom: 0.8rem;
    line-height: 1.6;
}
.notebook-page li::before {
    content: '✓';
    position: absolute;
    left: 0;
    color: #198754;
    font-weight: bold;
}
.notebook-page h4 { font-size: 1.2rem; margin: 1.5rem 0 0.8rem 0; color: var(--text-color); }
.notebook-page a {
    color: var(--primary-color);
    text-decoration: none;
    font-weight: 500;
    
    /* --- ह्या दोन नवीन आणि महत्त्वाच्या ओळी आहेत --- */
    word-break: break-all;
    overflow-wrap: break-word;
}
.notebook-page a:hover { text-decoration: underline; }

/* Navigation Buttons Styling */
.notebook-navigation {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-top: 1.5rem;
    padding: 0 1rem;
}
#page-indicator {
    font-weight: 600;
    color: #555;
}
.notebook-navigation .btn:disabled {
    background-color: #e9ecef;
    cursor: not-allowed;
    color: #6c757d !important;
}

/* Responsive for Mobile */
@media (max-width: 576px) {
    .notebook-container {
        padding: 1.5rem;
    }
    .notebook-page h3 { font-size: 1.5rem; }
    .notebook-page > p { font-size: 1rem; }
    .notebook-navigation { padding: 0; }
    .notebook-navigation .btn { padding: 0.7rem 1rem; font-size: 0.9rem; }
    #page-indicator { font-size: 0.9rem; }
}
/* --- Final Professional Button Loader --- */

.btn.loading {
    cursor: wait;
    /* We will use flexbox on the inner elements, not the button itself */
}
.btn.loading:hover {
    transform: none; /* Disable hover transform */
    box-shadow: none; /* Disable hover shadow */
}

/* Container for spinner and text */
.btn.loading span,
.btn.loading .spinner-container {
    display: inline-block;
    vertical-align: middle;
}
.btn.loading .spinner-container {
    margin-right: 12px;
}

/* The actual spinner */
.spinner-sm {
    width: 20px;
    height: 20px;
    border: 3px solid rgba(255, 255, 255, 0.3);
    border-top-color: #ffffff;
    border-radius: 50%;
    animation: spin 1s linear infinite;
}

/* Keyframes for the spinner animation */
@keyframes spin {
    to { transform: rotate(360deg); }
}
/* Keyframes for the animated dots */
@keyframes dots {
    0%, 20% { content: 'Generating.'; }
    40% { content: 'Generating..'; }
    60%, 100% { content: 'Generating...'; }
}