/* =========================================
   VOCON AKADEMIE – INNER COURSE SYSTEM
========================================= */

.vocon-course-player {
    --vocon-navy: #0d2b3d;
    --vocon-dark: #071e2c;
    --vocon-green: #119b70;
    --vocon-green-dark: #0b7857;
    --vocon-green-light: #e8f6f1;
    --vocon-green-hover: #f4faf7;
    --vocon-text: #173347;
    --vocon-muted: #71828c;
    --vocon-border: #e2e9e6;
    --vocon-sidebar: #f6f8f7;
    --vocon-white: #ffffff;

    width: 100%;

    color: var(--vocon-text);

    font-family: "Onest","Onest Fallback", sans-serif;
}

.vocon-course-player *,
.vocon-course-player *::before,
.vocon-course-player *::after {
    box-sizing: border-box;
}

.vocon-course-player button {
    font-family: "Onest","Onest Fallback", sans-serif !important;
}


/* =========================================
   SYSTEM LAYOUT
========================================= */

.vocon-course-player__layout {
    display: grid;

    grid-template-columns:
        minmax(0, 1fr)
        minmax(320px, 390px);

    overflow: hidden;

    border: 1px solid var(--vocon-border);
    border-radius: 24px;

    background: var(--vocon-white);

    box-shadow:
        0 24px 70px
        rgba(13, 43, 61, 0.09);
}

.vocon-course-player__main {
    min-width: 0;
}


/* =========================================
   VIDEO
========================================= */

.vocon-course-player__video-wrap {
    overflow: hidden;

    width: 100%;
    aspect-ratio: 16 / 9;

    background: var(--vocon-dark);
}

.vocon-course-player__video {
    display: block;

    width: 100%;
    height: 100%;

    border: 0;

    background: var(--vocon-dark);

    object-fit: contain;
}


/* =========================================
   CURRENT LESSON
========================================= */

.vocon-course-player__content {
    padding: 32px 34px 34px;
}

.vocon-course-player__lesson-label {
    margin-bottom: 9px;

    color: var(--vocon-green);

    font-size: 12px;
    font-weight: 700;
    line-height: 1.4;

    letter-spacing: 0.11em;
    text-transform: uppercase;
}

.vocon-course-player__content h2,
.vocon-course-player__content [data-vocon-current-title] {
    margin: 0;

    color: var(--vocon-navy);

    font-family: "Onest","Onest Fallback", sans-serif !important;
    font-size: clamp(25px, 2.3vw, 35px);
    font-style: normal;
    font-weight: 500 !important;
    line-height: 1.2;

    letter-spacing: -0.025em;
}

.vocon-course-player__description {
    max-width: 760px;

    margin-top: 14px;

    color: var(--vocon-muted);

    font-size: 15px;
    font-weight: 400;
    line-height: 1.7;
}

.vocon-course-player__description p {
    margin: 0;
}


/* =========================================
   NAVIGATION
========================================= */

.vocon-course-player__navigation {
    display: flex;
    align-items: center;
    justify-content: space-between;

    gap: 16px;

    margin-top: 29px;
    padding-top: 24px;

    border-top: 1px solid var(--vocon-border);
}

.vocon-course-player__nav-button {
    display: inline-flex;
    align-items: center;
    justify-content: center;

    gap: 9px;

    min-height: 46px;
    padding: 11px 19px;

    border: 1px solid var(--vocon-border);
    border-radius: 999px;

    background: var(--vocon-white);
    color: var(--vocon-navy);

    font-size: 14px;
    font-weight: 500;

    cursor: pointer;

    transition:
        background-color 0.2s ease,
        border-color 0.2s ease,
        color 0.2s ease,
        transform 0.2s ease;
}

.vocon-course-player__nav-button:hover:not(:disabled) {
    border-color: #abd5c6;

    background: var(--vocon-green-light);
    color: var(--vocon-green-dark);

    transform: translateY(-1px);
}

.vocon-course-player__nav-button--next {
    border-color: var(--vocon-green);

    background: var(--vocon-green);
    color: var(--vocon-white);
}

.vocon-course-player__nav-button--next:hover:not(:disabled) {
    border-color: var(--vocon-green-dark);

    background: var(--vocon-green-dark);
    color: var(--vocon-white);
}

.vocon-course-player__nav-button:disabled {
    opacity: 0.36;

    cursor: not-allowed;
}


/* =========================================
   SIDEBAR
========================================= */

.vocon-course-player__sidebar {
    min-width: 0;

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

    background: var(--vocon-sidebar);
}

.vocon-course-player__sidebar-head {
    padding: 25px 24px 21px;

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

    background: var(--vocon-white);
}

.vocon-course-player__sidebar-title {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;

    gap: 20px;
}

.vocon-course-player__sidebar-title > div > span {
    display: block;

    margin-bottom: 5px;

    color: var(--vocon-navy);

    font-size: 18px;
    font-weight: 500;
    line-height: 1.25;
}

.vocon-course-player__sidebar-title > div > strong {
    display: block;

    color: var(--vocon-muted);

    font-size: 12px;
    font-weight: 400;
}

.vocon-course-player__progress-percent {
    color: var(--vocon-green) !important;

    font-size: 13px !important;
    font-weight: 600 !important;
}


/* =========================================
   PROGRESS
========================================= */

.vocon-course-player__progress {
    overflow: hidden;

    width: 100%;
    height: 7px;

    margin-top: 17px;

    border-radius: 999px;

    background: #e5ece9;
}

.vocon-course-player__progress span {
    display: block;

    width: 0;
    height: 100%;

    border-radius: inherit;

    background: var(--vocon-green);

    transition: width 0.4s ease;
}


/* =========================================
   LESSON LIST
========================================= */

.vocon-course-player__lessons {
    max-height: 650px;

    overflow-x: hidden;
    overflow-y: auto;

    padding: 14px;
}


/* =========================================
   LESSON CARD
========================================= */

.vocon-course-player
.vocon-course-player__lesson {
    display: grid;

    grid-template-columns:
        42px
        minmax(0, 1fr)
        30px;

    align-items: center;

    gap: 12px;

    width: 100%;

    margin: 0 0 8px;
    padding: 13px;

    border: 1px solid var(--vocon-border) !important;
    border-radius: 15px;

    background: var(--vocon-white) !important;
    color: var(--vocon-text) !important;

    text-align: left;

    box-shadow:
        0 2px 8px
        rgba(13, 43, 61, 0.025);

    cursor: pointer;

    transition:
        border-color 0.2s ease,
        background-color 0.2s ease,
        transform 0.2s ease,
        box-shadow 0.2s ease;
}

.vocon-course-player__lesson:last-child {
    margin-bottom: 0;
}

.vocon-course-player
.vocon-course-player__lesson:hover {
    border-color: #b7d9cd !important;

    background: var(--vocon-green-hover) !important;

    transform: translateY(-1px);

    box-shadow:
        0 7px 18px
        rgba(13, 43, 61, 0.06);
}

.vocon-course-player
.vocon-course-player__lesson.is-active {
    border-color: #98d0bc !important;

    background: var(--vocon-green-light) !important;

    box-shadow:
        0 9px 22px
        rgba(17, 155, 112, 0.09);
}

.vocon-course-player
.vocon-course-player__lesson.is-completed:not(.is-active) {
    border-color: #d0e5dd !important;

    background: #f8fcfa !important;
}


/* =========================================
   NUMBER
========================================= */

.vocon-course-player__lesson-number {
    display: grid;
    place-items: center;

    width: 42px;
    height: 42px;

    border: 1px solid #dce6e2;
    border-radius: 11px;

    background: #f7faf9;
    color: #657971;

    font-size: 12px;
    font-weight: 600;
}

.vocon-course-player__lesson.is-active
.vocon-course-player__lesson-number {
    border-color: var(--vocon-green);

    background: var(--vocon-green);
    color: var(--vocon-white);
}


/* =========================================
   LESSON TEXT
========================================= */

.vocon-course-player__lesson-info {
    min-width: 0;
}

.vocon-course-player__lesson-title {
    display: block;

    overflow: hidden;

    color: var(--vocon-navy) !important;

    font-size: 13px;
    font-weight: 500 !important;
    line-height: 1.35;

    text-overflow: ellipsis;
    white-space: nowrap;
}

.vocon-course-player__lesson-duration {
    display: block;

    margin-top: 5px;

    color: var(--vocon-muted) !important;

    font-size: 11px;
    font-weight: 400;
}


/* =========================================
   PLAY ICON
========================================= */

.vocon-course-player__lesson-play {
    display: grid;
    place-items: center;

    width: 28px;
    height: 28px;

    border-radius: 50%;

    background: #eef4f1;
    color: #6c7e77;

    font-size: 9px;
    font-weight: 700;
}

.vocon-course-player__lesson.is-active
.vocon-course-player__lesson-play {
    background: var(--vocon-white);
    color: var(--vocon-green);
}

.vocon-course-player__lesson.is-completed
.vocon-course-player__lesson-play {
    background: #ddf0e9;
    color: var(--vocon-green);

    font-size: 12px;
}


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

@media (max-width: 1024px) {
    .vocon-course-player__layout {
        grid-template-columns: 1fr;
    }

    .vocon-course-player__sidebar {
        border-top: 1px solid var(--vocon-border);
        border-left: 0;
    }

    .vocon-course-player__lessons {
        max-height: 440px;
    }
}


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

@media (max-width: 767px) {
    .vocon-course-player__layout {
        border-radius: 17px;
    }

    .vocon-course-player__content {
        padding: 24px 20px 25px;
    }

    .vocon-course-player__navigation {
        align-items: stretch;
        flex-direction: column;
    }

    .vocon-course-player__nav-button {
        width: 100%;
    }

    .vocon-course-player__sidebar-head {
        padding: 21px 18px 18px;
    }

    .vocon-course-player__lessons {
        max-height: none;

        padding: 10px;
    }

    .vocon-course-player__lesson {
        grid-template-columns:
            39px
            minmax(0, 1fr)
            28px;

        gap: 10px;

        padding: 11px;
    }

    .vocon-course-player__lesson-number {
        width: 39px;
        height: 39px;
    }
}