/* ===== Academy Enhanced  -  Minimal CSS additions ===== */
/* Uses ONLY existing design tokens. No new visual patterns. */

/* ===== Nav Left Group ===== */
/* Base .nav-left defined in style.css */

/* ===== Nav User Link — enhancements over style.css base ===== */
.nav-user-link {
    color: var(--gray);
    transition: var(--transition);
    text-decoration: none;
    flex-shrink: 0;
}

.nav-user-link svg {
    flex-shrink: 0;
}

.nav-user-text {
    font-size: 0.82rem;
    font-weight: 500;
}

.nav-user-link:hover {
    color: var(--blue);
}

.nav-user-link.logged-in {
    color: var(--dark);
    font-weight: 600;
}

.nav-user-link.logged-in:hover {
    color: var(--blue);
}

/* Logout link */
.nav-logout-link {
    display: flex;
    align-items: center;
    color: var(--gray-light);
    transition: var(--transition);
    padding: 6px;
}

.nav-logout-link:hover {
    color: var(--red);
}

/* Onboarding reminder banner */
.ob-reminder {
    background: var(--blue);
    color: #fff;
    padding: 10px 0;
    position: fixed;
    top: 72px;
    left: 0;
    right: 0;
    z-index: 99;
    box-shadow: 0 2px 8px rgba(0,0,0,0.15);
}

/* ===== Academy Auth Gate ===== */
.academy-gate {
    position: relative;
    z-index: 40;
    margin-top: -1px;
}

.academy-gate-inner {
    max-width: 600px;
    margin: 0 auto;
    padding: 60px 32px 80px;
    text-align: center;
}

.academy-gate-icon {
    margin-bottom: 24px;
}

.academy-gate-title {
    font-size: clamp(1.4rem, 3vw, 1.8rem);
    font-weight: 800;
    color: var(--dark);
    margin-bottom: 16px;
}

.academy-gate-text {
    font-size: 1rem;
    color: var(--gray);
    line-height: 1.8;
    margin-bottom: 32px;
}

.academy-gate-login {
    font-size: 0.85rem;
    color: var(--gray);
    margin-top: 8px;
}

.academy-gate-login a {
    color: var(--blue);
    font-weight: 600;
    text-decoration: none;
}

.academy-gate-login a:hover {
    text-decoration: underline;
}

/* Blurred content behind gate — mask-image fade instead of hard cutoff */
.academy-content-blurred {
    filter: blur(5px) saturate(0.85);
    pointer-events: none;
    user-select: none;
    opacity: 0.7;
    max-height: 260px;
    overflow: hidden;
    position: relative;
    -webkit-mask-image: linear-gradient(to bottom, #000 0%, #000 35%, transparent 100%);
    mask-image: linear-gradient(to bottom, #000 0%, #000 35%, transparent 100%);
}

/* Pilot approval status badges */
.pilot-status-badge {
    display: inline-block;
    padding: 6px 20px;
    border-radius: 50px;
    font-size: 0.85rem;
    font-weight: 700;
    margin-bottom: 16px;
}
.pilot-status-badge.pilot-pending {
    background: #fff8e6;
    color: #b7791f;
    border: 1px solid #ecc94b;
}
.pilot-status-badge.pilot-rejected {
    background: #fff5f5;
    color: #c53030;
    border: 1px solid #fc8181;
}
.pilot-status-badge.pilot-approved {
    background: #f0fff4;
    color: #276749;
    border: 1px solid #68d391;
}

/* Card badges (new / popular) */
.card-badge {
    position: absolute;
    top: 12px;
    right: 12px;
    padding: 4px 12px;
    border-radius: 50px;
    font-size: 0.72rem;
    font-weight: 700;
    z-index: 3;
    letter-spacing: 0.3px;
    backdrop-filter: blur(6px);
    -webkit-backdrop-filter: blur(6px);
}
.card-badge-new {
    background: rgba(255, 255, 255, 0.92);
    color: #195CFF;
    border: 1px solid rgba(25, 92, 255, 0.2);
}
.card-badge-popular {
    background: rgba(255, 255, 255, 0.92);
    color: #e53e3e;
    border: 1px solid rgba(229, 62, 62, 0.2);
}

@media (max-width: 480px) {
    .academy-gate-inner {
        padding: 40px 20px 60px;
    }
}

/* ===== Auth Modal ===== */
.auth-modal-overlay {
    position: fixed;
    top: 0; left: 0; right: 0; bottom: 0;
    background: rgba(0, 0, 0, 0.45);
    backdrop-filter: blur(6px);
    -webkit-backdrop-filter: blur(6px);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 500;
    padding: 20px;
}

.auth-modal-card {
    background: #fff;
    border-radius: var(--radius);
    padding: 48px 40px;
    max-width: 440px;
    width: 100%;
    position: relative;
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.12);
    animation: fadeIn 0.25s ease;
}

.auth-modal-close {
    position: absolute;
    top: 10px;
    left: 10px;
    background: none;
    border: none;
    font-size: 1.5rem;
    line-height: 1;
    color: var(--gray-light);
    cursor: pointer;
    /* WCAG 2.5.5 — 44x44 hitbox. The glyph stays visually at its
       same size via font-size; only the button box grows. */
    width: 44px;
    height: 44px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    transition: var(--transition);
}

.auth-modal-close:hover {
    background: var(--bg-light);
    color: var(--dark);
}

/* ===== Inline auth-gate link ("כבר יש לכם חשבון? התחברו") =====
   Used inside the locked-article / locked-course gate to link to the
   login modal. The text flows inline with the surrounding paragraph,
   but the hitbox must still meet the 44px WCAG target on touch. We
   achieve both via vertical padding + inline-block: the box grows
   without breaking the sentence flow. */
.auth-gate-inline-link {
    display: inline-block;
    color: var(--blue, #195CFF);
    font-weight: 600;
    text-decoration: none;
    min-height: 44px;
    padding: 12px 6px;
    line-height: 20px;
    vertical-align: middle;
}
.auth-gate-inline-link:hover {
    text-decoration: underline;
}

@media (max-width: 480px) {
    .auth-modal-card {
        padding: 32px 24px;
        border-radius: var(--radius-sm);
    }
}

/* ===== Onboarding Wizard ===== */
.ob-overlay {
    position: fixed;
    top: 0; left: 0; right: 0; bottom: 0;
    background: #fff;
    z-index: 1000;
    display: flex;
    flex-direction: column;
    overflow-y: auto;
}

.ob-progress-bar {
    height: 4px;
    background: var(--border);
    flex-shrink: 0;
}

.ob-progress-fill {
    height: 100%;
    background: var(--blue);
    border-radius: 0 2px 2px 0;
    transition: width 0.4s ease;
}

.ob-container {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 40px 24px;
}

.ob-card {
    max-width: 520px;
    width: 100%;
}

.ob-step-num {
    font-size: 0.75rem;
    color: var(--gray-light);
    margin-bottom: 12px;
    letter-spacing: 1px;
}

.ob-title {
    font-size: 1.6rem;
    font-weight: 800;
    margin-bottom: 6px;
    color: var(--dark);
}

.ob-subtitle {
    font-size: 0.95rem;
    color: var(--gray);
    margin-bottom: 32px;
}

.ob-content {
    margin-bottom: 36px;
}

.ob-input {
    width: 100%;
    padding: 14px 18px;
    border: 2px solid var(--border);
    border-radius: 6px;
    font-family: var(--font);
    font-size: 1rem;
    color: var(--dark);
    transition: var(--transition);
}

.ob-input:focus-visible {
    outline: none;
    border-color: var(--blue);
    box-shadow: 0 0 0 3px rgba(25, 92, 255, 0.25);
}
.ob-input[aria-invalid="true"] {
    border-color: var(--red);
}
.ob-input[aria-invalid="true"]:focus-visible {
    box-shadow: 0 0 0 3px rgba(252, 61, 67, 0.25);
}

.ob-input::placeholder {
    color: var(--gray-light);
}

.ob-options {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
}

.ob-option {
    padding: 10px 20px;
    border: 2px solid var(--border);
    border-radius: 50px;
    background: #fff;
    color: var(--dark);
    font-family: var(--font);
    font-size: 0.9rem;
    cursor: pointer;
    transition: var(--transition);
}

.ob-option:hover {
    border-color: var(--blue);
    color: var(--blue);
}

.ob-option.selected {
    background: var(--blue);
    border-color: var(--blue);
    color: #fff;
}

.ob-toggle-label {
    display: flex;
    align-items: center;
    gap: 10px;
    font-size: 0.95rem;
    cursor: pointer;
}

.ob-nav {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.ob-btn-next {
    background: var(--blue);
    color: #fff;
    border: none;
    padding: 12px 32px;
    border-radius: 6px;
    font-family: var(--font);
    font-size: 0.95rem;
    font-weight: 600;
    cursor: pointer;
    transition: var(--transition);
}

.ob-btn-next:hover {
    background: var(--blue-dark);
}

.ob-btn-back {
    background: none;
    border: none;
    color: var(--gray);
    font-family: var(--font);
    font-size: 0.9rem;
    cursor: pointer;
    padding: 12px 16px;
    transition: var(--transition);
}

.ob-btn-back:hover {
    color: var(--dark);
}

/* Custom checkbox for terms */
.ob-check-box {
    width: 28px;
    height: 28px;
    border-radius: 8px;
    border: 2px solid var(--border);
    background: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    flex-shrink: 0;
    transition: all 0.2s ease;
    margin-top: 2px;
}

.ob-check-box svg {
    opacity: 0;
    transform: scale(0.5);
    transition: all 0.2s ease;
}

.ob-check-box.checked {
    background: var(--blue);
    border-color: var(--blue);
}

.ob-check-box.checked svg {
    opacity: 1;
    transform: scale(1);
}

.ob-check-box:hover {
    border-color: var(--blue);
}

.ob-terms-card {
    transition: border-color 0.3s ease, box-shadow 0.2s ease;
}
.ob-terms-clickable {
    cursor: pointer;
}
.ob-terms-clickable:hover {
    box-shadow: 0 2px 12px rgba(0,0,0,0.06);
}
.ob-terms-clickable:active .ob-check-box {
    transform: scale(0.92);
}

@media (max-width: 480px) {
    .ob-title { font-size: 1.3rem; }
    .ob-option { font-size: 0.82rem; padding: 8px 16px; }
}

/* Search wrapper positioning */
.search-wrapper {
    position: relative;
    max-width: 500px;
    margin: 24px auto 0;
    width: 100%;
}

/* Search results dropdown */
.search-results-dropdown {
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    background: #fff;
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.1);
    z-index: 50;
    max-height: 400px;
    overflow-y: auto;
    margin-top: 4px;
}

.search-result-item {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px 20px;
    transition: var(--transition);
    border-bottom: 1px solid var(--border);
    text-decoration: none;
    color: var(--dark);
}

.search-result-item:last-child {
    border-bottom: none;
}

.search-result-item:hover,
.search-result-item.highlighted {
    background: var(--bg-light);
}

.search-result-icon {
    flex-shrink: 0;
    color: var(--gray);
}

.search-result-title {
    flex: 1;
    font-size: 0.9rem;
    font-weight: 500;
}

.search-result-type {
    font-size: 0.75rem;
    color: var(--gray);
    background: var(--bg-light);
    padding: 2px 10px;
    border-radius: 50px;
    flex-shrink: 0;
}

.search-result-progress {
    font-size: 0.7rem;
    color: var(--blue);
    font-weight: 600;
    flex-shrink: 0;
}

.search-empty {
    padding: 24px 20px;
    text-align: center;
    color: var(--gray);
    font-size: 0.9rem;
}

/* Dashboard section headings */
.dashboard-section-title {
    font-size: 1.2rem;
    font-weight: 700;
    color: var(--dark);
    margin-bottom: 20px;
    padding-bottom: 12px;
    border-bottom: 1px solid var(--border);
}

.dashboard-section {
    margin-bottom: 48px;
}

/* Related list styling for course page */
.course-info-card .related-list a {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 8px 0;
    font-size: 0.9rem;
    color: var(--dark);
    transition: var(--transition);
    text-decoration: none;
}

.course-info-card .related-list a:hover {
    color: var(--blue);
}

.course-info-card .related-list .related-dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    flex-shrink: 0;
}

/* Resume overlay */
.resume-overlay {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    display: flex;
    justify-content: center;
    padding-bottom: 20px;
    z-index: 10;
}

.resume-btn:hover {
    background: var(--blue-dark) !important;
}

/* Lesson nav hover */
.lesson-nav-buttons button:hover {
    transform: translateY(-1px);
}

/* Tool like  -  small corner badge */
.tool-like-btn {
    position: absolute;
    top: 14px;
    left: 14px;
    display: flex;
    align-items: center;
    gap: 4px;
    background: none;
    border: none;
    cursor: pointer;
    padding: 0;
    font-family: var(--font);
    line-height: 1;
    z-index: 2;
    transition: var(--transition);
}

.tool-like-heart {
    transition: transform 0.2s ease;
    display: block;
}

.tool-like-count {
    font-size: 0.72rem;
    color: var(--gray-light);
    font-weight: 500;
    min-width: 12px;
}

.tool-like-btn:hover .tool-like-heart {
    transform: scale(1.2);
}

.tool-like-btn:hover .tool-like-count {
    color: var(--gray);
}

/* Notification item hover */
.notification-item:hover {
    background: var(--bg-light) !important;
}

/* Review star hover */
.review-star:hover {
    transform: scale(1.2);
}

/* Quick action cards hover */
.pa-quick-card:hover {
    border-color: var(--blue) !important;
    transform: translateY(-2px);
    box-shadow: 0 4px 16px rgba(25, 92, 255, 0.08);
}

/* Personal area responsive */
@media (max-width: 1024px) {
    .pa-quick-grid {
        grid-template-columns: repeat(2, 1fr) !important;
    }
    #tab-dashboard .course-bottom-grid {
        grid-template-columns: 1fr !important;
    }
}

@media (max-width: 600px) {
    .pa-quick-grid {
        grid-template-columns: 1fr 1fr !important;
        gap: 10px !important;
    }
    .pa-quick-card {
        padding: 16px 12px !important;
    }
}

/* Responsive: search dropdown on mobile */
@media (max-width: 768px) {
    .search-wrapper {
        max-width: 100%;
        margin: 20px 0 0;
    }

    .search-results-dropdown {
        border-radius: var(--radius-sm);
    }

    .lesson-nav-buttons {
        flex-direction: column !important;
    }

    .lesson-nav-buttons button {
        width: 100%;
        justify-content: center;
    }
}

/* ===== Clients / Partners Section ===== */
.clients-section {
    padding: 64px 0 48px;
}

.clients-section .section-heading {
    margin-bottom: 40px;
}

.clients-logos {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    align-items: center;
    gap: 40px;
}

.clients-logos img {
    max-height: 48px;
    width: auto;
    object-fit: contain;
    filter: grayscale(1) opacity(0.6);
    transition: var(--transition);
}

.clients-logos img:hover {
    filter: grayscale(0) opacity(1);
}

@media (max-width: 600px) {
    .clients-logos {
        gap: 24px;
    }

    .clients-logos img {
        max-height: 36px;
    }
}