/* French Banks - Additional Styles */

/* Banks Page Specific */
.banks-page {
     background: linear-gradient(135deg, #4f46e5 0%, #0ea5e9 100%);
     min-height: 100vh;
}

.banks-page header {
     background: rgba(255, 255, 255, 0.1);
     backdrop-filter: blur(10px);
     border-bottom: 1px solid rgba(255, 255, 255, 0.2);
}

.banks-page header h1 {
     color: white;
}

.banks-page header .user-info {
     color: white;
}

.banks-page header #userName {
     color: white;
}

.banks-page header .user-avatar {
     background: rgba(255, 255, 255, 0.2);
     color: white;
}

/* Welcome Banner */
.welcome-banner {
     background: rgba(255, 255, 255, 0.95);
     backdrop-filter: blur(20px);
     border-radius: var(--radius-xl);
     padding: 2rem;
     margin-bottom: 2rem;
     text-align: center;
     box-shadow: var(--shadow-lg);
}

.welcome-banner h2 {
     font-size: 1.75rem;
     color: var(--gray-900);
     margin-bottom: 0.5rem;
}

.welcome-banner p {
     color: var(--secondary);
}

.highlight-name {
     background: linear-gradient(135deg, var(--primary) 0%, var(--secondary-teal) 100%);
     -webkit-background-clip: text;
     -webkit-text-fill-color: transparent;
     background-clip: text;
     font-weight: 800;
}

.name-entry-inline {
     display: flex;
     justify-content: center;
     gap: 0.5rem;
     margin-top: 1rem;
     max-width: 350px;
     margin-left: auto;
     margin-right: auto;
}

.name-entry-inline .name-input {
     flex: 1;
     padding: 0.75rem 1rem;
     border: 2px solid var(--gray-200);
     border-radius: var(--radius-md);
     font-size: 1rem;
     font-family: inherit;
     text-align: center;
     transition: all 0.2s;
}

.name-entry-inline .name-input:focus {
     outline: none;
     border-color: var(--primary);
     box-shadow: 0 0 0 4px var(--primary-light);
}

/* Progress Overview */
.progress-overview {
     margin-bottom: 2rem;
}

.progress-overview .section-title {
     margin-bottom: 1.5rem;
     font-size: 1.1rem;
     font-weight: 700;
}

.progress-stats {
     display: grid;
     grid-template-columns: repeat(4, 1fr);
     gap: 1rem;
}

.progress-stat {
     text-align: center;
     padding: 1.5rem 1rem;
     background: linear-gradient(135deg, var(--primary-light) 0%, rgba(13, 148, 136, 0.1) 100%);
     border-radius: var(--radius-lg);
     transition: all 0.2s;
}

.progress-stat:hover {
     transform: translateY(-3px);
     box-shadow: var(--shadow-md);
}

.progress-stat .stat-value {
     display: block;
     font-size: 1.75rem;
     font-weight: 800;
     color: var(--primary);
     margin-bottom: 0.25rem;
}

.progress-stat .stat-label {
     font-size: 0.85rem;
     color: var(--secondary);
     font-weight: 500;
}

/* Banks Grid */
.banks-grid {
     display: grid;
     grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
     gap: 1.5rem;
     margin-bottom: 2rem;
}

.bank-card {
     cursor: pointer;
     transition: all 0.2s;
     overflow: hidden;
}

.bank-card:hover {
     transform: translateY(-8px);
     box-shadow: var(--shadow-lg);
}

.bank-card-header {
     display: flex;
     align-items: center;
     gap: 1rem;
     padding: 1.25rem;
     margin: -1rem -1rem 1rem -1rem;
     border-radius: var(--radius-xl) var(--radius-xl) 0 0;
}

.bank-card-header.bank-1 {
     background: linear-gradient(135deg, var(--primary) 0%, var(--secondary-teal) 100%);
}

.bank-card-header.bank-2 {
     background: linear-gradient(135deg, var(--success) 0%, #0d9488 100%);
}

.bank-card-header.bank-3 {
     background: linear-gradient(135deg, #f43f5e 0%, var(--primary) 100%);
}

.bank-card-header.bank-4 {
     background: linear-gradient(135deg, #0ea5e9 0%, #f43f5e 100%);
}

.bank-card-header .bank-icon {
     font-size: 2rem;
}

.bank-card-header .bank-badge {
     font-size: 0.75rem;
     font-weight: 700;
     color: white;
     text-transform: uppercase;
     letter-spacing: 1px;
}

.bank-title {
     font-size: 1.25rem;
     font-weight: 700;
     color: var(--gray-900);
     margin-bottom: 0.5rem;
}

.bank-description {
     font-size: 0.9rem;
     color: var(--secondary);
     margin-bottom: 1rem;
}

.bank-info {
     display: flex;
     gap: 1rem;
     margin-bottom: 1rem;
     flex-wrap: wrap;
}

.bank-info span {
     font-size: 0.85rem;
     color: var(--secondary);
     background: var(--gray-100);
     padding: 0.4rem 0.75rem;
     border-radius: var(--radius-md);
}

.bank-topics {
     display: flex;
     gap: 0.5rem;
     flex-wrap: wrap;
     margin-bottom: 1rem;
}

.topic-tag {
     font-size: 0.8rem;
     font-weight: 500;
     color: var(--primary);
     background: var(--primary-light);
     padding: 0.3rem 0.75rem;
     border-radius: var(--radius-sm);
}

.topic-badge {
     font-size: 0.75rem;
     font-weight: 500;
     color: var(--primary);
     background: var(--primary-light);
     padding: 0.4rem 0.75rem;
     border-radius: var(--radius-sm);
}

.btn-block {
     width: 100%;
     margin-top: auto;
}

/* Question Meta */
.question-meta {
     display: flex;
     align-items: center;
     gap: 0.75rem;
     margin-bottom: 1.5rem;
     flex-wrap: wrap;
}

.situation-label {
     font-style: italic;
     color: var(--primary);
     font-weight: 600;
}

/* Answer Feedback */
.answer-feedback {
     background: var(--white);
     border-radius: var(--radius-lg);
     padding: 1.5rem;
     margin-top: 1.5rem;
     border: 2px solid var(--gray-200);
     box-shadow: var(--shadow-md);
}

.feedback-header {
     display: flex;
     align-items: center;
     gap: 0.75rem;
     margin-bottom: 1rem;
     padding-bottom: 1rem;
     border-bottom: 1px solid var(--gray-200);
}

.feedback-header.correct {
     color: var(--success);
}

.feedback-header.incorrect {
     color: var(--danger);
}

.feedback-icon {
     width: 2.5rem;
     height: 2.5rem;
     display: flex;
     align-items: center;
     justify-content: center;
     border-radius: 50%;
     font-size: 1.25rem;
     font-weight: 700;
}

.feedback-header.correct .feedback-icon {
     background: rgba(16, 185, 129, 0.1);
}

.feedback-header.incorrect .feedback-icon {
     background: rgba(239, 68, 68, 0.1);
}

.feedback-title {
     font-size: 1.25rem;
     font-weight: 700;
}

.feedback-body {
     display: flex;
     flex-direction: column;
     gap: 0.75rem;
}

.feedback-row {
     display: flex;
     gap: 0.5rem;
     font-size: 0.95rem;
}

.feedback-label {
     color: var(--secondary);
}

.feedback-value {
     font-weight: 600;
     color: var(--gray-900);
}

.feedback-value.correct {
     color: var(--success);
}

.explanation-box {
     display: flex;
     gap: 0.75rem;
     padding: 1rem;
     background: var(--primary-light);
     border-radius: var(--radius-md);
     margin-top: 0.5rem;
}

.explanation-icon {
     font-size: 1.25rem;
}

.explanation-content {
     flex: 1;
}

.explanation-content strong {
     color: var(--primary-dark);
     display: block;
     margin-bottom: 0.25rem;
}

.explanation-content p {
     color: var(--gray-700);
     font-size: 0.95rem;
     margin: 0;
}

/* Fill-in info */
.fill-in-info {
     background: var(--gray-50);
     padding: 1.5rem;
     border-radius: var(--radius-md);
     border-left: 4px solid var(--primary);
}

.fill-in-info p {
     margin-bottom: 0.5rem;
}

.fill-in-info p:last-child {
     margin-bottom: 0;
}

/* Option Items */
.option-item.disabled {
     pointer-events: none;
     opacity: 0.9;
}

.option-item.correct {
     border-color: var(--success) !important;
     background: rgba(16, 185, 129, 0.1) !important;
}

.option-item.incorrect {
     border-color: var(--danger) !important;
     background: rgba(239, 68, 68, 0.1) !important;
}

/* Stats Grid */
.stats-grid {
     display: grid;
     grid-template-columns: repeat(4, 1fr);
     gap: 1rem;
     padding: 1.5rem;
}

.stat-item {
     text-align: center;
     padding: 1rem;
     border-radius: var(--radius-md);
}

.stat-item.correct {
     background: rgba(16, 185, 129, 0.1);
}

.stat-item.incorrect {
     background: rgba(239, 68, 68, 0.1);
}

.stat-item.skipped {
     background: rgba(245, 158, 11, 0.1);
}

.stat-item.time {
     background: rgba(79, 70, 229, 0.1);
}

.stat-item .stat-icon {
     display: block;
     font-size: 1.5rem;
     margin-bottom: 0.5rem;
}

.stat-item .stat-value {
     display: block;
     font-size: 1.75rem;
     font-weight: 800;
     color: var(--gray-900);
}

.stat-item .stat-label {
     font-size: 0.85rem;
     color: var(--secondary);
}

/* Bank Scores Grid */
.bank-scores-grid {
     display: grid;
     grid-template-columns: repeat(4, 1fr);
     gap: 1rem;
}

.bank-score-item {
     text-align: center;
     padding: 1rem;
     background: var(--gray-50);
     border-radius: var(--radius-md);
     transition: all 0.2s;
}

.bank-score-item:hover {
     background: var(--primary-light);
}

.bank-score-item .bank-icon {
     display: block;
     font-size: 1.5rem;
     margin-bottom: 0.5rem;
}

.bank-score-item .bank-name {
     display: block;
     font-size: 0.85rem;
     color: var(--secondary);
     margin-bottom: 0.25rem;
}

.bank-score-item .bank-score {
     display: block;
     font-size: 1.25rem;
     font-weight: 700;
     color: var(--primary);
}

/* Question Review */
.question-review {
     background: var(--white);
     border-radius: var(--radius-md);
     padding: 1.25rem;
     margin-bottom: 1rem;
     border: 2px solid var(--gray-200);
}

.question-review.correct {
     border-color: var(--success);
     background: linear-gradient(to right, rgba(16, 185, 129, 0.05), var(--white));
}

.question-review.incorrect {
     border-color: var(--danger);
     background: linear-gradient(to right, rgba(239, 68, 68, 0.05), var(--white));
}

.question-review.skipped {
     border-color: var(--accent);
     background: linear-gradient(to right, rgba(245, 158, 11, 0.05), var(--white));
}

.review-header {
     display: flex;
     justify-content: space-between;
     align-items: flex-start;
     gap: 1rem;
     margin-bottom: 1rem;
}

.review-question {
     flex: 1;
     font-size: 1rem;
     color: var(--gray-900);
}

.review-status {
     font-weight: 700;
     padding: 0.25rem 0.75rem;
     border-radius: 9999px;
     font-size: 0.8rem;
     white-space: nowrap;
}

.review-status.correct {
     background: rgba(16, 185, 129, 0.1);
     color: var(--success);
}

.review-status.incorrect {
     background: rgba(239, 68, 68, 0.1);
     color: var(--danger);
}

.review-status.skipped {
     background: rgba(245, 158, 11, 0.1);
     color: var(--accent);
}

.review-body {
     display: flex;
     flex-direction: column;
     gap: 0.5rem;
}

.review-answer {
     font-size: 0.95rem;
     padding: 0.5rem 0.75rem;
     background: var(--gray-50);
     border-radius: var(--radius-sm);
}

.review-explanation {
     background: var(--primary-light);
     padding: 0.75rem;
     border-radius: var(--radius-sm);
     font-size: 0.95rem;
     margin-top: 0.5rem;
}

/* Loading State */
.loading-state {
     display: flex;
     flex-direction: column;
     align-items: center;
     justify-content: center;
     padding: 60px;
     color: var(--secondary);
}

.spinner {
     width: 40px;
     height: 40px;
     border: 3px solid var(--gray-200);
     border-top-color: var(--primary);
     border-radius: 50%;
     animation: spin 1s linear infinite;
     margin-bottom: 1rem;
}

@keyframes spin {
     to {
          transform: rotate(360deg);
     }
}

/* Exam CTA Section */
.exam-cta-section {
     margin-top: 2rem;
     margin-bottom: 2rem;
}

.exam-cta-box {
     background: linear-gradient(135deg, rgba(255, 255, 255, 0.95), rgba(255, 255, 255, 0.9));
     border: 2px solid rgba(79, 70, 229, 0.2);
     padding: 2.5rem;
     text-align: center;
     position: relative;
     overflow: hidden;
}

.exam-cta-box::before {
     content: '';
     position: absolute;
     top: 0;
     left: 0;
     right: 0;
     height: 6px;
     background: linear-gradient(90deg, #f59e0b, #f43f5e, #8b5cf6);
}

.exam-cta-icon {
     font-size: 4rem;
     margin-bottom: 1rem;
     animation: pulse 2s infinite ease-in-out;
}

@keyframes pulse {

     0%,
     100% {
          transform: scale(1);
     }

     50% {
          transform: scale(1.1);
     }
}

.exam-cta-title {
     font-size: 1.75rem;
     font-weight: 800;
     color: var(--gray-900);
     margin-bottom: 1rem;
}

.exam-cta-description {
     font-size: 1.1rem;
     color: var(--gray-700);
     max-width: 600px;
     margin: 0 auto 1.5rem auto;
     line-height: 1.7;
}

.exam-cta-description strong {
     color: var(--primary);
}

.exam-cta-btn {
     background: linear-gradient(135deg, #f59e0b 0%, #f43f5e 100%);
     color: white;
     font-size: 1.25rem;
     font-weight: 700;
     padding: 1rem 2.5rem;
     border-radius: var(--radius-lg);
     text-decoration: none;
     display: inline-flex;
     align-items: center;
     gap: 0.5rem;
     box-shadow: 0 4px 15px rgba(245, 158, 11, 0.3);
     transition: all 0.3s;
}

.exam-cta-btn:hover {
     transform: translateY(-3px);
     box-shadow: 0 8px 25px rgba(244, 63, 94, 0.4);
}

.btn-lg {
     padding: 1rem 2rem;
     font-size: 1.1rem;
}

/* Responsive */
@media (max-width: 768px) {
     .progress-stats {
          grid-template-columns: repeat(2, 1fr);
     }

     .stats-grid {
          grid-template-columns: repeat(2, 1fr);
     }

     .bank-scores-grid {
          grid-template-columns: repeat(2, 1fr);
     }

     .welcome-banner h2 {
          font-size: 1.5rem;
     }

     .banks-grid {
          grid-template-columns: 1fr;
     }
}

@media (max-width: 480px) {
     .progress-stats {
          grid-template-columns: 1fr 1fr;
          gap: 0.75rem;
     }

     .progress-stat {
          padding: 1rem 0.5rem;
     }

     .progress-stat .stat-value {
          font-size: 1.5rem;
     }
}