/* PKTechTrainings: independent 60-lesson scrolling */
.video-playlist-panel,
.video-lessons-panel,
.course-lessons-panel {
    min-height: 0;
}

.video-lessons,
.lesson-list,
.course-lessons {
    min-height: 0;
    max-height: 100%;
    overflow-y: auto !important;
    overflow-x: hidden !important;
    overscroll-behavior: contain;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: thin;
}

/* Desktop: keep the lesson list compact while all 60 lessons remain reachable. */
@media (min-width: 901px) {
    .video-playlist-panel {
        height: 420px;
        min-height: 0;
        overflow: hidden;
    }

    .video-lessons,
    .lesson-list,
    .course-lessons {
        height: 340px;
        max-height: 340px;
        min-height: 0;
        overflow-y: auto !important;
    }
}

/* =========================================================
   FINAL MODAL POLISH / FIX
   Keeps the fixed site header clear of both dialogs.
   ========================================================= */
.course-modal{
    position:fixed !important;
    top:88px !important;
    right:0 !important;
    bottom:0 !important;
    left:0 !important;
    inset:auto 0 0 0 !important;
    z-index:4000 !important;
    display:none !important;
    align-items:center !important;
    justify-content:center !important;
    padding:22px !important;
    box-sizing:border-box !important;
}
.course-modal.active{display:flex !important}
.course-modal-backdrop{
    position:absolute !important;
    inset:0 !important;
    background:rgba(11,27,52,.66) !important;
    backdrop-filter:blur(5px) !important;
}
.course-modal-dialog{
    position:relative !important;
    z-index:1 !important;
    box-sizing:border-box !important;
    overflow:hidden !important;
    margin:0 !important;
    background:#fff !important;
    border:1px solid #dce5f1 !important;
    box-shadow:0 28px 80px rgba(5,22,48,.34) !important;
}

/* ---------------- BUY COURSE ---------------- */
.course-buy-dialog{
    width:min(660px,100%) !important;
    max-height:min(760px,calc(100vh - 110px)) !important;
    border-radius:22px !important;
}
.course-buy-header{
    min-height:82px !important;
    box-sizing:border-box !important;
    padding:18px 64px 16px 22px !important;
    align-items:center !important;
    gap:13px !important;
    border-bottom:1px solid #e8eef6 !important;
}
.course-buy-header .course-modal-icon{
    width:48px !important;
    height:48px !important;
    border-radius:14px !important;
    font-size:22px !important;
}
.course-buy-header .course-modal-title{
    min-width:0 !important;
}
.course-buy-header .course-modal-title small{
    margin:0 0 3px !important;
    font-size:8px !important;
    letter-spacing:.13em !important;
}
.course-buy-header .course-modal-title h2{
    font-size:23px !important;
    line-height:1.1 !important;
    letter-spacing:-.02em !important;
}
.course-buy-subtitle{
    margin:4px 0 0 !important;
    font-size:10px !important;
}
.course-buy-dialog > form{
    max-height:calc(100% - 82px) !important;
    overflow-y:auto !important;
    padding:18px 22px 18px !important;
    gap:10px !important;
}
.course-buy-dialog > form::-webkit-scrollbar{width:6px}
.course-buy-dialog > form::-webkit-scrollbar-track{background:#f7f9fc}
.course-buy-dialog > form::-webkit-scrollbar-thumb{background:#c8d4e3;border-radius:20px}
.course-buy-price-card{
    padding:14px 16px !important;
    min-height:70px !important;
    border-radius:14px !important;
}
.course-buy-price-copy strong{
    font-size:27px !important;
    letter-spacing:-.02em !important;
}
.course-buy-eyebrow{font-size:8px !important}
.course-buy-price-note{font-size:8px !important}
.course-buy-secure-badge{
    padding:7px 10px !important;
    font-size:8px !important;
}
.course-buy-section-heading{
    margin-top:3px !important;
    gap:8px !important;
}
.course-buy-section-number{
    width:24px !important;
    height:24px !important;
    border-radius:7px !important;
}
.course-buy-section-heading strong{font-size:12px !important}
.course-buy-section-heading small{font-size:8px !important}
.course-buy-dialog label{
    margin:0 0 5px !important;
    font-size:11px !important;
}
.course-buy-dialog input[type="text"],
.course-buy-dialog input[type="email"],
.course-buy-dialog input[type="tel"],
.course-buy-dialog select{
    min-height:44px !important;
    padding:10px 12px !important;
    border-radius:11px !important;
    font-size:12px !important;
}
.course-buy-selected{
    padding:10px 12px !important;
    border-radius:11px !important;
}
.course-buy-selected span{font-size:9px !important}
.course-buy-selected strong{font-size:10px !important}
.course-buy-grid{gap:9px 12px !important}
.course-buy-mobile-wrap{min-height:44px !important;border-radius:11px !important}
.course-buy-mobile-wrap > span{font-size:11px !important}
.course-buy-mobile-wrap input{min-height:42px !important}
.course-buy-summary-card{
    padding:10px 12px !important;
    border-radius:11px !important;
}
.course-buy-summary-row{padding:3px 0 !important}
.course-buy-summary-row span{font-size:9px !important}
.course-buy-summary-row strong{font-size:11px !important}
.course-buy-summary-total{margin-top:4px !important;padding-top:7px !important}
.course-buy-summary-total span{font-size:10px !important}
.course-buy-summary-total strong{font-size:17px !important}
.course-buy-pay-button{
    min-height:46px !important;
    margin-top:1px !important;
    border-radius:11px !important;
    font-size:11px !important;
}
.course-buy-pay-button strong{font-size:12px !important}
.course-buy-trust{font-size:8px !important}

/* ---------------- VIDEO ACCESS / OTP ---------------- */
.video-access-dialog{
    width:min(520px,100%) !important;
    max-height:min(560px,calc(100vh - 130px)) !important;
    padding:0 !important;
    border-radius:22px !important;
}
.video-access-dialog .course-modal-close{
    top:15px !important;
    right:15px !important;
    width:36px !important;
    height:36px !important;
    font-size:21px !important;
}
.video-access-head{
    display:flex;
    align-items:center;
    gap:13px;
    padding:22px 60px 18px 22px;
    border-bottom:1px solid #edf2f7;
    background:linear-gradient(180deg,#fff,#fbfdff);
}
.video-access-head .course-modal-icon{
    width:48px !important;
    height:48px !important;
    border-radius:14px !important;
    font-size:21px !important;
}
.video-access-head .course-modal-title small{font-size:8px !important;margin-bottom:3px !important}
.video-access-head .course-modal-title h2{font-size:23px !important}
.video-access-dialog > form{
    max-height:calc(100% - 89px) !important;
    overflow-y:auto !important;
    padding:18px 22px 20px !important;
    gap:9px !important;
}
.video-access-dialog > form::-webkit-scrollbar{width:6px}
.video-access-dialog > form::-webkit-scrollbar-thumb{background:#c8d4e3;border-radius:20px}
.course-radio-group{grid-template-columns:1fr 1fr !important;gap:9px !important;margin:0 0 3px !important}
.course-radio-option{
    min-height:44px !important;
    box-sizing:border-box !important;
    padding:10px 12px !important;
    border-radius:11px !important;
}
.course-radio-option span{font-size:11px !important}
.video-access-dialog label{font-size:11px !important;margin:0 0 5px !important}
.video-access-dialog input[type="email"],
.video-access-dialog input[type="text"]{
    min-height:44px !important;
    border-radius:11px !important;
    font-size:12px !important;
}
.video-access-dialog .course-modal-submit{
    min-height:46px !important;
    border-radius:11px !important;
    font-size:11px !important;
    margin-top:2px !important;
}
.video-access-dialog .course-modal-message{font-size:10px !important}
.trial-access-note{font-size:10px !important}

@media(max-width:700px){
    .course-modal{
        top:72px !important;
        padding:12px !important;
    }
    .course-buy-dialog{
        width:100% !important;
        max-height:calc(100vh - 88px) !important;
        border-radius:18px !important;
    }
    .course-buy-header{padding:16px 54px 14px 16px !important}
    .course-buy-dialog > form{padding:14px 16px 16px !important}
    .video-access-dialog{
        width:100% !important;
        max-height:calc(100vh - 96px) !important;
        border-radius:18px !important;
    }
    .video-access-head{padding:17px 54px 15px 16px !important}
    .video-access-dialog > form{padding:14px 16px 16px !important}
}
@media(max-width:560px){
    .course-modal{top:68px !important;padding:8px !important}
    .course-buy-dialog{max-height:calc(100vh - 78px) !important}
    .course-buy-grid{grid-template-columns:1fr !important}
    .course-buy-header .course-modal-icon,
    .video-access-head .course-modal-icon{width:44px !important;height:44px !important}
    .course-buy-header .course-modal-title h2,
    .video-access-head .course-modal-title h2{font-size:20px !important}
    .course-buy-price-card{padding:12px !important}
    .course-buy-price-copy strong{font-size:24px !important}
    .course-buy-secure-badge{font-size:7px !important;padding:6px 8px !important}
    .video-access-dialog{max-height:calc(100vh - 82px) !important}
    .video-access-head{padding:15px 50px 13px 14px !important}
    .video-access-dialog > form{padding:12px 14px 14px !important}
    .course-radio-group{grid-template-columns:1fr !important}
}


/* =========================================================
   FONT-ONLY UPDATE
   Keep existing design/layout/functionality.
   Reduce heavy/bold appearance across the page.
   ========================================================= */

.courses-page {
    font-weight: 400 !important;
}

.courses-page h1,
.courses-page h2,
.courses-page h3,
.courses-page strong,
.courses-page b,
.courses-page button,
.courses-page .course-button,
.courses-page .course-mode-button,
.courses-page .course-enquire,
.courses-page .video-contact-btn {
    font-weight: 400 !important;
}

.courses-page .courses-sidebar-title h2,
.courses-page .course-selection-message h2,
.courses-page .course-content-title h2,
.courses-page .video-mode-card h3,
.courses-page .course-info-box h3,
.courses-page .category-text strong {
    font-weight: 400 !important;
}

.courses-page .category-arrow,
.courses-page .course-button em {
    font-weight: 400 !important;
}

.courses-page .course-content-title small,
.courses-page .course-info-box li::before {
    font-weight: 400 !important;
}

/* Keep normal reading text at a comfortable weight */
.courses-page p,
.courses-page span,
.courses-page li,
.courses-page small {
    font-weight: 400 !important;
}


/* =========================================================
   PK TECH TRAININGS - COURSES PAGE
   ========================================================= */
.courses-page {
    background: #f7f9fc;
    min-height: calc(100vh - 100px);
}
/* =========================================================
   MAIN LAYOUT
   ========================================================= */
.courses-layout {
    display: grid;
    grid-template-columns:
        390px minmax(0, 1fr);
    gap: 24px;
    /*
     * Reduced from 26px.
     * This removes the large white space
     * below the blue banner.
     */
    padding-top: 8px;
    padding-bottom: 45px;
    align-items: start;
}
/* =========================================================
   LEFT SIDEBAR
   ========================================================= */
.courses-sidebar {
    background: #ffffff;
    border: 1px solid #e3eaf4;
    border-radius: 16px;
    padding: 17px;
    box-shadow:
        0 7px 24px rgba(20, 50, 90, 0.06);
    position: sticky;
    top: 20px;
}
/* =========================================================
   SIDEBAR TITLE
   ========================================================= */
.courses-sidebar-title {
    margin-bottom: 15px;
}
.courses-sidebar-title h2 {
    margin: 0 0 5px;
    color: #102342;
    font-size: 19px;
    font-weight: 800;
}
.courses-sidebar-title p {
    margin: 0;
    color: #748198;
    font-size: 12px;
    line-height: 1.5;
}
/* =========================================================
   TECHNOLOGY CATEGORY
   ========================================================= */
.course-category {
    margin-top: 11px;
}
/* =========================================================
   CATEGORY HEADER
   ========================================================= */
.course-category-header {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    padding: 12px 13px;
    border: 1px solid #dce6f3;
    border-radius: 12px;
    background: #f5f8fd;
    color: #102342;
    cursor: pointer;
    text-align: left;
    transition:
        background .2s ease,
        border-color .2s ease,
        box-shadow .2s ease,
        transform .2s ease;
}
.course-category-header:hover {
    background: #edf4ff;
    border-color: #b9cef0;
}
/* =========================================================
   ACTIVE CATEGORY
   ========================================================= */
.course-category.active
.course-category-header {
    background:
        linear-gradient(
            135deg,
            #0b3f91,
            #145bc1
        );
    border-color: #154a8d;
    color: #ffffff;
    box-shadow:
        0 6px 16px rgba(21, 74, 141, .18);
}
/* =========================================================
   CATEGORY LEFT
   ========================================================= */
.category-left {
    display: flex;
    align-items: center;
    gap: 10px;
    min-width: 0;
}
/* =========================================================
   CATEGORY ICON
   ========================================================= */
.category-icon {
    width: 42px;
    height: 42px;
    flex: 0 0 42px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 12px;
    background: var(--category-bg);
    color: var(--category-color);
    transition: .2s ease;
}
.category-icon svg {
    width: 24px;
    height: 24px;
    display: block;
    fill: none;
    stroke: currentColor;
    stroke-width: 2;
    stroke-linecap: round;
    stroke-linejoin: round;
}
.category-icon svg .fill {
    fill: currentColor;
    stroke: none;
}
.category-icon svg .soft {
    fill: currentColor;
    opacity: .18;
    stroke: none;
}
.course-category.active .category-icon {
    background: rgba(255,255,255,.16);
    color: #ffffff;
}
.category-sap {
    --category-color: #0b63ce;
    --category-bg: #e8f1ff;
    --category-border: #b8d2f5;
    --category-hover: #f1f6ff;
}
.category-cloud {
    --category-color: #7a43d1;
    --category-bg: #f1eaff;
    --category-border: #d7c2f5;
    --category-hover: #f8f4ff;
}
.category-emerging {
    --category-color: #e27a12;
    --category-bg: #fff1df;
    --category-border: #f2d0a3;
    --category-hover: #fff8ee;
}
.category-development {
    --category-color: #14855b;
    --category-bg: #e5f7ef;
    --category-border: #b7e2ce;
    --category-hover: #f1fbf6;
}
.course-category .course-category-header {
    border-color: var(--category-border);
    background: var(--category-hover);
}
.course-category .course-category-header:hover {
    border-color: var(--category-color);
    box-shadow: 0 5px 14px rgba(20,50,90,.07);
}
/* =========================================================
   CATEGORY TEXT
   ========================================================= */
.category-text {
    min-width: 0;
}
.category-text strong {
    display: block;
    font-size: 14px;
    font-weight: 800;
    margin-bottom: 2px;
}
.category-text span {
    display: block;
    font-size: 10.5px;
    line-height: 1.4;
    color: #70809a;
}
.course-category.active
.category-text span {
    color: #dbe9ff;
}
/* =========================================================
   CATEGORY ARROW
   ========================================================= */
.category-arrow {
    flex: 0 0 auto;
    font-size: 15px;
    font-weight: 700;
    transition:
        transform .2s ease;
}
.course-category.active
.category-arrow {
    transform:
        rotate(180deg);
}
/* =========================================================
   COURSE BUTTON GRID
   ========================================================= */
.course-items {
    display: none;
    grid-template-columns:
        repeat(2, minmax(0, 1fr));
    gap: 7px;
    padding:
        9px 2px 3px;
}
.course-category.active
.course-items {
    display: grid;
}
/* =========================================================
   COURSE BUTTON
   ========================================================= */
.course-button {
    width: 100%;
    min-width: 0;
    min-height: 44px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 6px;
    padding:
        8px 11px;
    border:
        1px solid #d7e2f0;
    border-radius:
        8px;
    background:
        #f1f6ff;
    color:
        #16325c;
    font-size:
        12px;
    font-weight:
        700;
    cursor:
        pointer;
    text-align:
        left;
    transition:
        all .2s ease;
}
/* =========================================================
   COURSE NAME
   ========================================================= */
.course-button span {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
/* =========================================================
   COURSE ARROW
   ========================================================= */
.course-button em {
    flex: 0 0 auto;
    font-style: normal;
    font-size: 14px;
    font-weight: 600;
    color: #3974c6;
}
/* =========================================================
   COURSE BUTTON HOVER
   ========================================================= */
.course-button:hover {
    background:
        #e2edff;
    border-color:
        #8db5f5;
    color:
        #0b55c7;
    transform:
        translateY(-1px);
    box-shadow:
        0 3px 8px
        rgba(23,105,255,.08);
}
/* =========================================================
   SELECTED COURSE
   ========================================================= */
.course-button.selected {
    background:
        #1769ff;
    border-color:
        #1769ff;
    color:
        #ffffff;
    box-shadow:
        0 4px 10px
        rgba(23,105,255,.16);
}
.course-button.selected em {
    color:
        #ffffff;
}
/* =========================================================
   RIGHT CONTENT PANEL
   ========================================================= */
.course-content-panel {
    min-width: 0;
    background:
        #ffffff;
    border:
        1px solid #e3eaf4;
    border-radius:
        16px;
    overflow:
        hidden;
    box-shadow:
        0 7px 24px
        rgba(20,50,90,.06);
}
/* =========================================================
   INITIAL SELECTION MESSAGE
   ========================================================= */
.course-selection-message {
    min-height:
        600px;
    display:
        flex;
    flex-direction:
        column;
    align-items:
        center;
    justify-content:
        center;
    text-align:
        center;
    padding:
        40px;
}
/* =========================================================
   SELECTION ICON
   ========================================================= */
.selection-icon {
    width:
        72px;
    height:
        72px;
    display:
        flex;
    align-items:
        center;
    justify-content:
        center;
    margin-bottom:
        18px;
    border-radius:
        50%;
    background:
        #edf4ff;
    color:
        #1769ff;
    font-size:
        30px;
}
/* =========================================================
   SELECTION MESSAGE
   ========================================================= */
.course-selection-message h2 {
    margin:
        0 0 8px;
    color:
        #102342;
    font-size:
        23px;
    font-weight:
        800;
}
.course-selection-message p {
    max-width:
        430px;
    margin:
        0;
    color:
        #718096;
    font-size:
        14px;
    line-height:
        1.6;
}
/* =========================================================
   CONTENT HEADER
   ========================================================= */
.course-content-header {
    min-height:
        72px;
    display:
        flex;
    align-items:
        center;
    justify-content:
        space-between;
    gap:
        18px;
    padding:
        16px 20px;
    border-bottom:
        1px solid #e4eaf2;
    background:
        #ffffff;
}
.course-content-title {
    min-width:
        0;
}
.course-content-title small {
    display:
        block;
    margin-bottom:
        4px;
    color:
        #748198;
    font-size:
        10px;
    font-weight:
        700;
    text-transform:
        uppercase;
    letter-spacing:
        .08em;
}
.course-content-title h2 {
    margin:
        0;
    color:
        #102342;
    font-size:
        18px;
    font-weight:
        800;
}
/* =========================================================
   COURSE ACTIONS
   ========================================================= */
.course-header-actions {
    flex: 0 0 auto;
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 7px;
    flex-wrap: nowrap;
}
/* =========================================================
   COURSE MODE BUTTONS
   ========================================================= */
.course-mode-button {
    border: 1px solid #1769ff;
    background: linear-gradient(135deg, #1769ff, #0d5bd7);
    color: #ffffff;
    border-radius: 10px;
    padding: 12px 18px;
    min-height: 44px;
    font-size: 12px;
    font-weight: 800;
    cursor: pointer;
    white-space: nowrap;
    transition: all .2s ease;
    box-shadow: 0 5px 14px rgba(23,105,255,.18);
}
.course-mode-button:hover {
    background: linear-gradient(135deg, #0d5bd7, #084bb8);
    border-color: #084bb8;
    color: #ffffff;
    transform: translateY(-2px);
    box-shadow: 0 7px 18px rgba(23,105,255,.24);
}
.course-mode-button.active {
    background: linear-gradient(135deg, #1769ff, #0d5bd7);
    border-color: #1769ff;
    color: #ffffff;
    box-shadow: 0 6px 16px rgba(23,105,255,.25);
}
.course-mode-button.video {
    background: linear-gradient(135deg, #f97316, #ea580c) !important;
    border-color: #f97316 !important;
    color: #ffffff !important;
    box-shadow: 0 5px 14px rgba(249,115,22,.24) !important;
}
.course-mode-button.video:hover,
.course-mode-button.video.active {
    background: linear-gradient(135deg, #fb923c, #f97316) !important;
    border-color: #ea580c !important;
    color: #ffffff !important;
    box-shadow: 0 8px 20px rgba(249,115,22,.32) !important;
    transform: translateY(-2px);
}
/* =========================================================
   ENQUIRE BUTTON
   ========================================================= */
.course-enquire {
    flex:
        0 0 auto;
    display:
        inline-flex;
    align-items:
        center;
    justify-content:
        center;
    min-height:
        44px;
    padding:
        12px 18px;
    border-radius:
        10px;
    background:
        linear-gradient(135deg, #f59e0b, #d97706);
    color:
        #ffffff !important;
    text-decoration:
        none;
    font-size:
        12px;
    font-weight:
        800;
    transition:
        .2s ease;
    box-shadow:
        0 5px 14px rgba(23,105,255,.18);
}
.course-enquire:hover {
    background:
        #0d56d7;
    color:
        #ffffff;
    transform:
        translateY(-1px);
}
/* =========================================================
   VIDEO COMING SOON
   ========================================================= */
.video-mode-content {
    padding: 28px 20px;
    background: #f7f9fc;
}

.video-mode-card {
    max-width: 560px;
    margin: 0 auto;
    padding: 30px 24px;
    text-align: center;
    background: #ffffff;
    border: 1px solid #e3eaf4;
    border-radius: 14px;
    box-shadow: 0 6px 20px rgba(20, 50, 90, .06);
}

.video-mode-icon {
    width: 54px;
    height: 54px;
    margin: 0 auto 14px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    background: #f1eaff;
    color: #6d28d9;
}

.video-mode-icon svg {
    width: 28px;
    height: 28px;
    fill: none;
    stroke: currentColor;
    stroke-width: 2;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.video-mode-card h3 {
    margin: 0 0 8px;
    color: #102342;
    font-size: 18px;
    font-weight: 800;
}

.video-mode-card p {
    margin: 0 auto 8px;
    max-width: 470px;
    color: #53657d;
    font-size: 13px;
    line-height: 1.6;
}

.video-mode-card .video-note {
    margin-bottom: 18px;
    color: #748198;
}

.video-contact-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 42px;
    padding: 10px 18px;
    border-radius: 9px;
    background: linear-gradient(135deg, #f59e0b, #d97706);
    color: #ffffff !important;
    text-decoration: none;
    font-size: 12px;
    font-weight: 800;
    transition: .2s ease;
}

.video-contact-btn:hover {
    transform: translateY(-1px);
}

@media (max-width: 560px) {
    .video-mode-content {
        padding: 20px 14px;
    }

    .video-mode-card {
        padding: 24px 16px;
    }

    .video-mode-card h3 {
        font-size: 16px;
    }
}

/* =========================================================
   COURSE INFORMATION
   ========================================================= */

.course-info {
    padding: 18px 20px 20px;
    background: #ffffff;
    border-bottom: 1px solid #e4eaf2;
}

.course-info-intro {
    margin-bottom: 16px;
}

.course-info-intro p {
    margin: 0;
    color: #53657d;
    font-size: 13px;
    line-height: 1.65;
}

.course-info-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 12px;
}

.course-info-box {
    padding: 13px 14px;
    border: 1px solid #e3eaf4;
    border-radius: 11px;
    background: #f8faff;
}

.course-info-box h3 {
    margin: 0 0 7px;
    color: #102342;
    font-size: 12px;
    font-weight: 800;
}

.course-info-box ul {
    margin: 0;
    padding: 0;
    list-style: none;
}

.course-info-box li {
    position: relative;
    padding-left: 15px;
    margin: 0 0 5px;
    color: #53657d;
    font-size: 12px;
    line-height: 1.45;
}

.course-info-box li:last-child {
    margin-bottom: 0;
}

.course-info-box li::before {
    content: "✓";
    position: absolute;
    left: 0;
    top: 0;
    color: #1769ff;
    font-weight: 800;
}

@media (max-width: 560px) {
    .course-info {
        padding: 15px;
    }

    .course-info-grid {
        grid-template-columns: 1fr;
        gap: 9px;
    }

    .course-info-intro p {
        font-size: 12px;
    }
}

/* =========================================================
   STABLE PDF.JS VIEWER
   ========================================================= */
.course-viewer{
    position:relative;
    width:100%;
    height:920px;
    background:#eef2f7;
    overflow:auto;
    overflow-x:hidden;
    overflow-y:auto;
    box-sizing:border-box;
    overscroll-behavior:auto;
    overscroll-behavior-y:auto;
    -webkit-overflow-scrolling:touch;
    touch-action:pan-y;
        overscroll-behavior:auto;
}
.course-pdf-pages{
    display:flex;
    flex-direction:column;
    align-items:center;
    gap:14px;
    padding:14px;
    box-sizing:border-box;
}
.course-pdf-page{
    position:relative;
    width:max-content;
    max-width:100%;
    background:#fff;
    box-shadow:0 2px 12px rgba(20,40,70,.12);
}
.course-pdf-canvas{
    display:block;
    max-width:100%;
    height:auto;
    user-select:none;
    -webkit-user-select:none;
    pointer-events:none;
}
.course-pdf-page-number{
    display:none;
}
.course-pdf-loading,
.course-pdf-error{
    position:absolute;
    inset:0;
    z-index:4;
    display:flex;
    flex-direction:column;
    align-items:center;
    justify-content:center;
    gap:8px;
    background:#fff;
    color:#53657d;
    text-align:center;
    font-size:13px;
}
.course-pdf-loading strong,
.course-pdf-error strong{
    color:#102342;
    font-size:15px;
}
.course-pdf-loading span,
.course-pdf-error span{
    color:#8a98ab;
    font-size:11px;
}
.pdf-spinner{
    width:28px;
    height:28px;
    border:3px solid #dbe5f2;
    border-top-color:#1769ff;
    border-radius:50%;
    animation:pdfSpin .8s linear infinite;
}
@keyframes pdfSpin{
    to{transform:rotate(360deg)}
}
@media (max-width:850px), (hover: none) and (pointer: coarse), (orientation: landscape) and (max-width:1100px) and (max-height:700px){
    .course-viewer{
        height:62vh;
        min-height:360px;
        max-height:560px;
    }
    .course-pdf-pages{
        padding:8px;
        gap:10px;
    }
}

/* =========================================================
   RESPONSIVE - TABLET
   ========================================================= */
@media (max-width: 1050px) {
    .courses-layout {
        grid-template-columns:
            330px minmax(0, 1fr);
        gap:
            18px;
    }
}
/* =========================================================
   RESPONSIVE - SMALL TABLET
   ========================================================= */
@media (max-width:850px), (hover: none) and (pointer: coarse), (orientation: landscape) and (max-width:1100px) and (max-height:700px) {
    .courses-layout {
        grid-template-columns:
            1fr;
        padding-top:
            8px;
    }
    .courses-sidebar {
        position:
            static;
    }
    .course-content-panel {
        min-height:
            500px;
    }
}
/* =========================================================
   RESPONSIVE - MOBILE
   ========================================================= */
@media (max-width: 560px) {
    .courses-layout {
        padding-top:
            8px;
    }
    /*
     * Two course buttons per row on mobile.
     */
    .course-items {
        grid-template-columns:
            repeat(2, minmax(0, 1fr));
    }
    .course-content-header {
        align-items:
            flex-start;
        flex-direction:
            column;
    }
    .course-header-actions {
        width:
            100%;
        flex-wrap:
            wrap;
        justify-content:
            flex-start;
    }
    .course-mode-button {
        padding:
            11px 15px;
        min-height:
            42px;
        font-size:
            11px;
    }
    .course-enquire {
        width:
            100%;
    }
    .course-viewer {
        height:
            560px;
    }
    .course-selection-message {
        min-height:
            430px;
        padding:
            30px 20px;
    }
}
/* =========================================================
   MOBILE COURSE CONTENT DRAWER
   ========================================================= */
.mobile-course-close{display:none}
.course-mobile-overlay{display:none}

@media (max-width:850px), (hover: none) and (pointer: coarse), (orientation: landscape) and (max-width:1100px) and (max-height:700px){

    /*
     * TRUE MOBILE POPUP:
     * The course-content panel must not remain in the normal page flow
     * after the popup is closed. This prevents the Course Content section
     * from appearing underneath the course list after closing the popup.
     *
     * The HTML remains in the DOM, so the existing course data/SEO markup
     * is preserved; this rule only controls its mobile presentation.
     */
    .course-content-panel{
        display:none;
    }

    /*
     * Mobile drawer:
     * Keep the drawer completely inside the viewport.
     * The header and course information stay visible while
     * the PDF area becomes the scrollable area.
     */
    .course-content-panel.mobile-open{
        position:fixed;
        left:10px;
        right:10px;
        /* Keep the drawer below the fixed mobile site header.
         * The header is fixed by header.php, so opening the drawer at
         * top:10px places the close button underneath the header.
         */
        top:78px;
        bottom:10px;
        z-index:9999;
        width:auto;
        height:auto;
        max-height:none;
        min-height:0;
        display:flex;
        flex-direction:column;
        overflow:hidden;
        border-radius:16px;
        box-shadow:0 18px 55px rgba(10,30,70,.30);
        animation:courseDrawerUp .22s ease-out;
    }

    .course-content-panel.mobile-open .course-selection-message{
        display:none;
    }

    .course-content-panel.mobile-open .course-content-header{
        position:relative;
        z-index:20;
        flex:0 0 auto;
        min-height:0;
        padding:12px 14px;
        gap:10px;
        flex-direction:column;
        align-items:stretch;
        background:#ffffff;
    }

    .course-content-panel.mobile-open .course-content-title{
        padding-right:42px;
        position:relative;
    }

    .course-content-panel.mobile-open .course-content-title h2{
        font-size:16px;
        line-height:1.25;
    }

    .course-content-panel.mobile-open .course-header-actions{
        width:100%;
        display:grid;
        grid-template-columns:1fr 1fr;
        gap:7px;
    }

    .course-content-panel.mobile-open .course-mode-button{
        width:100%;
        min-height:40px;
        padding:9px 7px;
        font-size:10px;
    }

    .course-content-panel.mobile-open .course-enquire{
        grid-column:1/-1;
        width:100%;
        min-height:40px;
        padding:9px 12px;
        font-size:11px;
    }

    /*
     * Keep the information section above the viewer.
     * It must not push the PDF outside the viewport.
     */
    .course-content-panel.mobile-open .course-info{
        flex:0 0 auto;
        max-height:25vh;
        overflow-y:auto;
        -webkit-overflow-scrolling:touch;
    }

    /*
     * This is the important part:
     * the mode content gets the remaining viewport height.
     */
    .course-content-panel.mobile-open #course-mode-content{
        flex:1 1 0;
        min-height:0;
        overflow:hidden;
        display:flex;
        flex-direction:column;
    }

    .course-content-panel.mobile-open .course-viewer{
        flex:1 1 0;
        min-height:0;
        height:auto;
        max-height:none;
        width:100%;
        overflow-y:auto;
        overflow-x:hidden;
        -webkit-overflow-scrolling:touch;
        overscroll-behavior-y:auto;
        touch-action:pan-y;
        overscroll-behavior:auto;
    }

    /*
     * Video content also uses the remaining available space.
     */
    .course-content-panel.mobile-open .video-mode-content{
        flex:1 1 auto;
        min-height:0;
        overflow-y:auto;
        -webkit-overflow-scrolling:touch;
    }

    /*
     * Close button:
     * position it against the mobile drawer itself, not the
     * PDF/header content. This keeps it visible in Live Mode.
     */
    .course-content-panel.mobile-open .mobile-course-close {
        display: flex !important;
        position: absolute !important;
        top: 10px !important;
        right: 10px !important;
        width: 34px !important;
        height: 34px !important;
        align-items: center;
        justify-content: center;
        border: 1px solid #d7e2f0;
        border-radius: 50%;
        background: #ffffff !important;
        color: #102342 !important;
        font-size: 22px;
        line-height: 1;
        font-weight: 700;
        cursor: pointer;
        z-index: 100000 !important;
        pointer-events: auto !important;
        touch-action: manipulation;
        -webkit-tap-highlight-color: transparent;
        box-shadow: 0 2px 8px rgba(20,50,90,.12);
    }

    .mobile-course-close:active{
        background:#edf4ff;
        transform:scale(.96);
    }

    /* The close button is a direct child of the mobile drawer.
       Keep it above every drawer section and always tappable. */
    .course-content-panel.mobile-open > .mobile-course-close {
        display:flex !important;
        position:absolute !important;
        top:10px !important;
        right:10px !important;
        z-index:100001 !important;
        pointer-events:auto !important;
    }

    .course-mobile-overlay{
        position:fixed;
        inset:0;
        z-index:9998;
        background:rgba(8,25,55,.42);
        backdrop-filter:blur(2px);
    }

    .course-mobile-overlay.active{
        display:block;
    }

    body.course-drawer-open{
        overflow:hidden;
        overscroll-behavior:none;
    }
}

@keyframes courseDrawerUp{
    from{opacity:0;transform:translateY(30px)}
    to{opacity:1;transform:translateY(0)}
}

/* =========================================================
   VERY SMALL MOBILE
   ========================================================= */
@media (max-width: 380px) {
    .courses-sidebar {
        padding:
            12px;
    }
    .course-button {
        font-size:
            11px;
        min-height:
            42px;
        padding:
            7px 9px;
    }
}


/* =========================================================
   PKTechTrainings - ENHANCED COURSE DISCOVERY PANEL
   Presentation-only update. Existing course/payment/video
   functionality and selectors are preserved.
   ========================================================= */

.course-selection-message.course-welcome-panel {
    min-height: 600px;
    padding: 34px 38px 38px;
    box-sizing: border-box;
    align-items: stretch;
    justify-content: center;
    text-align: left;
    background:
        radial-gradient(circle at 88% 8%, rgba(23,105,255,.08), transparent 28%),
        linear-gradient(180deg, #ffffff 0%, #fbfdff 100%);
}

.course-welcome-top {
    max-width: 760px;
    margin: 0 auto;
    width: 100%;
    text-align: center;
}

.course-welcome-badge {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    padding: 7px 11px;
    border: 1px solid #d8e6fb;
    border-radius: 999px;
    background: #f3f8ff;
    color: #1769ff;
    font-size: 9px;
    font-weight: 800;
    letter-spacing: .08em;
    text-transform: uppercase;
}

.course-welcome-badge::before {
    content: "✓";
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 16px;
    height: 16px;
    border-radius: 50%;
    background: #1769ff;
    color: #fff;
    font-size: 9px;
}

.course-welcome-panel h2 {
    margin: 14px 0 8px;
    color: #102342;
    font-size: clamp(25px, 3vw, 34px);
    line-height: 1.12;
    letter-spacing: -.025em;
    font-weight: 800 !important;
}

.course-welcome-panel .welcome-lead {
    max-width: 650px;
    margin: 0 auto;
    color: #53657d;
    font-size: 14px;
    line-height: 1.65;
}

.course-welcome-divider {
    width: 58px;
    height: 3px;
    margin: 18px auto 20px;
    border-radius: 99px;
    background: #1769ff;
}

.course-welcome-features {
    width: 100%;
    max-width: 760px;
    margin: 0 auto;
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 10px;
}

.course-welcome-feature {
    min-width: 0;
    padding: 13px 11px;
    border: 1px solid #e0e8f3;
    border-radius: 12px;
    background: rgba(255,255,255,.9);
    box-shadow: 0 4px 14px rgba(20,50,90,.045);
}

.course-welcome-feature-icon {
    width: 32px;
    height: 32px;
    margin: 0 auto 8px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 9px;
    background: #edf4ff;
    color: #1769ff;
    font-size: 15px;
}

.course-welcome-feature strong {
    display: block;
    color: #17345e;
    font-size: 11px;
    line-height: 1.3;
    font-weight: 700 !important;
}

.course-welcome-feature span {
    display: block;
    margin-top: 4px;
    color: #75849a;
    font-size: 9px;
    line-height: 1.4;
}

.course-welcome-popular {
    width: 100%;
    max-width: 760px;
    margin: 22px auto 0;
    padding-top: 17px;
    border-top: 1px solid #e5ebf3;
    text-align: center;
}

.course-welcome-popular-label {
    display: block;
    margin-bottom: 9px;
    color: #748198;
    font-size: 9px;
    font-weight: 800;
    letter-spacing: .08em;
    text-transform: uppercase;
}

.course-welcome-tags {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-wrap: wrap;
    gap: 7px;
}

.course-welcome-tag {
    padding: 7px 10px;
    border: 1px solid #dbe5f1;
    border-radius: 8px;
    background: #f8faff;
    color: #27476f;
    font-size: 10px;
    font-weight: 600;
}

.course-welcome-hint {
    margin: 18px 0 0;
    color: #8a98ab;
    font-size: 10px;
    line-height: 1.5;
    text-align: center;
}

.course-welcome-hint strong {
    color: #1769ff;
    font-weight: 700 !important;
}

@media (max-width: 1050px) {
    .course-selection-message.course-welcome-panel {
        padding: 30px 24px;
    }

    .course-welcome-features {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (max-width:850px), (hover: none) and (pointer: coarse), (orientation: landscape) and (max-width:1100px) and (max-height:700px) {
    .course-selection-message.course-welcome-panel {
        min-height: 430px;
        padding: 28px 20px;
    }

    .course-welcome-panel h2 {
        font-size: 25px;
    }

    .course-welcome-features {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 560px) {
    .course-selection-message.course-welcome-panel {
        padding: 24px 14px;
    }

    .course-welcome-panel h2 {
        font-size: 22px;
    }

    .course-welcome-panel .welcome-lead {
        font-size: 12px;
    }

    .course-welcome-feature {
        padding: 11px 8px;
    }

    .course-welcome-feature strong {
        font-size: 10px;
    }

    .course-welcome-feature span {
        font-size: 8.5px;
    }

    .course-welcome-popular {
        margin-top: 17px;
    }

    .course-welcome-hint {
        margin-top: 14px;
    }
}


/* =========================================================
   PKTechTrainings - BUY VIDEO COURSE POPUP
   Premium checkout presentation only.
   Existing functionality/IDs are preserved.
   ========================================================= */

#course-buy-modal .course-buy-dialog {
    width: min(700px, 100%) !important;
    max-height: min(800px, calc(100vh - 70px)) !important;
    border-radius: 24px !important;
    background: #ffffff !important;
    box-shadow: 0 28px 90px rgba(8, 25, 55, .28) !important;
    border: 1px solid #dfe7f2 !important;
    overflow: hidden !important;
}

/* Header */
#course-buy-modal .course-buy-header {
    min-height: 96px !important;
    padding: 18px 66px 16px 22px !important;
    gap: 13px !important;
    background: linear-gradient(180deg, #ffffff 0%, #f8fbff 100%) !important;
    border-bottom: 1px solid #e5ebf3 !important;
}

#course-buy-modal .course-buy-header .course-modal-icon {
    width: 50px !important;
    height: 50px !important;
    flex: 0 0 50px !important;
    border-radius: 15px !important;
    background: #edf4ff !important;
    color: #1769ff !important;
    box-shadow: inset 0 0 0 1px #dce9fb !important;
}

#course-buy-modal .course-buy-header .course-modal-title small {
    margin: 0 0 4px !important;
    color: #1769ff !important;
    font-size: 9px !important;
    font-weight: 800 !important;
    letter-spacing: .12em !important;
}

#course-buy-modal .course-buy-header .course-modal-title h2 {
    margin: 0 !important;
    color: #0f1f38 !important;
    font-size: 24px !important;
    line-height: 1.1 !important;
    font-weight: 800 !important;
    letter-spacing: -.025em !important;
}

#course-buy-modal .course-buy-subtitle {
    margin: 5px 0 0 !important;
    color: #000000 !important;
    font-size: 10px !important;
    line-height: 1.45 !important;
}

/* Close button */
#course-buy-modal .course-modal-close {
    top: 16px !important;
    right: 16px !important;
    width: 38px !important;
    height: 38px !important;
    border-radius: 50% !important;
    border: 1px solid #dbe4ef !important;
    background: #ffffff !important;
    color: #17345e !important;
    z-index: 10 !important;
}

/* Form body */
#course-buy-modal .course-buy-dialog > form {
    max-height: calc(100% - 96px) !important;
    padding: 18px 22px 20px !important;
    gap: 12px !important;
    overflow-y: auto !important;
    background: #ffffff !important;
}

/* Price hero */
#course-buy-modal .course-buy-price-card {
    position: relative !important;
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    gap: 16px !important;
    min-height: 92px !important;
    padding: 17px 18px !important;
    border: 1px solid #dbe7f7 !important;
    border-radius: 16px !important;
    background:
        radial-gradient(circle at 90% 10%, rgba(23,105,255,.10), transparent 35%),
        linear-gradient(135deg, #f7fbff 0%, #edf5ff 100%) !important;
    box-shadow: 0 8px 24px rgba(20, 65, 130, .07) !important;
}

#course-buy-modal .course-buy-price-copy {
    min-width: 0 !important;
}

#course-buy-modal .course-buy-eyebrow {
    display: block !important;
    margin-bottom: 3px !important;
    color: #1769ff !important;
    font-size: 8px !important;
    font-weight: 800 !important;
    letter-spacing: .12em !important;
    text-transform: uppercase !important;
}

#course-buy-modal #buy-summary-fee {
    display: block !important;
    color: #0b1d36 !important;
    font-size: 31px !important;
    line-height: 1 !important;
    font-weight: 800 !important;
    letter-spacing: -.03em !important;
}

#course-buy-modal .course-buy-price-note {
    display: inline-block !important;
    margin-top: 5px !important;
    color: #000000 !important;
    font-size: 9px !important;
    font-weight: 600 !important;
}

#course-buy-modal .course-buy-secure-badge {
    flex: 0 0 auto !important;
    align-self: center !important;
    padding: 8px 11px !important;
    border: 1px solid #cfe0f7 !important;
    border-radius: 999px !important;
    background: #ffffff !important;
    color: #17345e !important;
    font-size: 8px !important;
    font-weight: 800 !important;
    box-shadow: 0 4px 10px rgba(20,50,90,.05) !important;
}

/* Explicit access/validity note beside the price */
#course-buy-modal .course-buy-price-card::after {
    content: "1-Year Video Access" !important;
    position: absolute !important;
    left: 18px !important;
    bottom: 13px !important;
    color: #000000 !important;
    font-size: 9px !important;
    font-weight: 700 !important;
}

/* Section headers */
#course-buy-modal .course-buy-section-heading {
    margin-top: 2px !important;
    gap: 9px !important;
}

#course-buy-modal .course-buy-section-number {
    width: 26px !important;
    height: 26px !important;
    flex: 0 0 26px !important;
    border-radius: 8px !important;
    background: #1769ff !important;
    color: #ffffff !important;
    font-size: 9px !important;
    font-weight: 800 !important;
    box-shadow: 0 4px 10px rgba(23,105,255,.16) !important;
}

#course-buy-modal .course-buy-section-heading strong {
    color: #102342 !important;
    font-size: 12px !important;
    font-weight: 800 !important;
}

#course-buy-modal .course-buy-section-heading small {
    color: #000000 !important;
    font-size: 8px !important;
}

/* Selected course */
#course-buy-modal .course-buy-selected {
    padding: 11px 13px !important;
    border: 1px solid #dce5f0 !important;
    border-radius: 12px !important;
    background: #f9fbfe !important;
}

#course-buy-modal .course-buy-selected span {
    color: #000000 !important;
    font-size: 8px !important;
    font-weight: 600 !important;
}

#course-buy-modal .course-buy-selected strong {
    display: block !important;
    margin-top: 3px !important;
    color: #102342 !important;
    font-size: 11px !important;
    font-weight: 800 !important;
}

/* Inputs/select */
#course-buy-modal .course-buy-dialog label {
    color: #000000 !important;
    font-size: 10px !important;
    font-weight: 700 !important;
}

#course-buy-modal .course-buy-dialog input[type="text"],
#course-buy-modal .course-buy-dialog input[type="email"],
#course-buy-modal .course-buy-dialog input[type="tel"],
#course-buy-modal .course-buy-dialog select {
    min-height: 45px !important;
    border: 1px solid #d6e0eb !important;
    border-radius: 11px !important;
    background: #ffffff !important;
    color: #102342 !important;
    font-size: 11px !important;
    font-weight: 500 !important;
    outline: none !important;
    transition: border-color .18s ease, box-shadow .18s ease !important;
}

#course-buy-modal .course-buy-dialog input[type="text"]:focus,
#course-buy-modal .course-buy-dialog input[type="email"]:focus,
#course-buy-modal .course-buy-dialog input[type="tel"]:focus,
#course-buy-modal .course-buy-dialog select:focus {
    border-color: #1769ff !important;
    box-shadow: 0 0 0 3px rgba(23,105,255,.10) !important;
}

/* Mobile prefix */
#course-buy-modal .course-buy-mobile-wrap {
    min-height: 45px !important;
    border: 1px solid #d6e0eb !important;
    border-radius: 11px !important;
    background: #ffffff !important;
}

#course-buy-modal .course-buy-mobile-wrap > span {
    color: #102342 !important;
    font-size: 10px !important;
    font-weight: 800 !important;
}

#course-buy-modal .course-buy-mobile-wrap input {
    min-height: 43px !important;
}

/* Summary */
#course-buy-modal .course-buy-summary-card {
    padding: 12px 14px !important;
    border: 1px solid #dce5f0 !important;
    border-radius: 13px !important;
    background: #fbfcfe !important;
}

#course-buy-modal .course-buy-summary-row {
    padding: 4px 0 !important;
}

#course-buy-modal .course-buy-summary-row span {
    color: #000000 !important;
    font-size: 9px !important;
}

#course-buy-modal .course-buy-summary-row strong {
    color: #102342 !important;
    font-size: 11px !important;
    font-weight: 700 !important;
}

#course-buy-modal .course-buy-summary-total {
    margin-top: 6px !important;
    padding-top: 8px !important;
    border-top: 1px solid #e1e7ef !important;
}

#course-buy-modal .course-buy-summary-total span {
    color: #102342 !important;
    font-size: 10px !important;
    font-weight: 700 !important;
}

#course-buy-modal .course-buy-summary-total strong {
    color: #0b1d36 !important;
    font-size: 20px !important;
    font-weight: 800 !important;
}

/* Pay button */
#course-buy-modal .course-buy-pay-button {
    min-height: 49px !important;
    margin-top: 2px !important;
    border-radius: 12px !important;
    font-size: 11px !important;
    font-weight: 800 !important;
    box-shadow: 0 8px 18px rgba(23,105,255,.16) !important;
}

/* Trust note */
#course-buy-modal .course-buy-trust {
    color: #000000 !important;
    font-size: 8px !important;
    line-height: 1.45 !important;
}

/* Error/success messaging readability */
#course-buy-modal .course-field-error,
#course-buy-modal .course-modal-message {
    font-size: 9px !important;
}

/* Mobile */
@media (max-width: 700px) {
    #course-buy-modal .course-buy-dialog {
        width: calc(100vw - 20px) !important;
        max-width: calc(100vw - 20px) !important;
        max-height: calc(100vh - 20px) !important;
        border-radius: 19px !important;
    }

    #course-buy-modal .course-buy-header {
        min-height: 90px !important;
        padding: 16px 54px 14px 16px !important;
    }

    #course-buy-modal .course-buy-header .course-modal-icon {
        width: 44px !important;
        height: 44px !important;
        flex-basis: 44px !important;
    }

    #course-buy-modal .course-buy-header .course-modal-title h2 {
        font-size: 20px !important;
    }

    #course-buy-modal .course-buy-dialog > form {
        max-height: calc(100vh - 90px) !important;
        padding: 14px 15px 16px !important;
    }

    #course-buy-modal .course-buy-price-card {
        min-height: 92px !important;
        padding: 15px !important;
    }

    #course-buy-modal #buy-summary-fee {
        font-size: 27px !important;
    }
}

@media (max-width: 480px) {
    #course-buy-modal .course-buy-dialog {
        width: calc(100vw - 12px) !important;
        max-width: calc(100vw - 12px) !important;
        max-height: calc(100vh - 12px) !important;
        border-radius: 17px !important;
    }

    #course-buy-modal .course-buy-header {
        padding: 14px 50px 12px 13px !important;
    }

    #course-buy-modal .course-buy-header .course-modal-title h2 {
        font-size: 19px !important;
    }

    #course-buy-modal .course-buy-subtitle {
        font-size: 9px !important;
    }

    #course-buy-modal .course-buy-dialog > form {
        max-height: calc(100vh - 88px) !important;
        padding: 12px 12px 14px !important;
    }

    #course-buy-modal .course-buy-price-card {
        align-items: flex-start !important;
        flex-direction: column !important;
        gap: 8px !important;
        padding-bottom: 34px !important;
    }

    #course-buy-modal .course-buy-secure-badge {
        align-self: flex-start !important;
    }

    #course-buy-modal .course-buy-price-card::after {
        left: 15px !important;
        bottom: 11px !important;
    }
}


/* =========================================================
   PKTechTrainings - FINAL COURSE / CHECKOUT POLISH
   Presentation improvements only. Existing functionality,
   IDs, endpoints, course catalog and video/OTP flows preserved.
   ========================================================= */

/* Selected-course header: make the two products self-explanatory. */
.course-content-header {
    gap: 20px !important;
}

.course-content-title h2 {
    color: #0b1d36 !important;
    font-weight: 800 !important;
}

.course-product-note {
    display: flex;
    align-items: stretch;
    gap: 8px;
    flex-wrap: wrap;
    margin-top: 8px;
}

.course-product-chip {
    min-width: 0;
    padding: 8px 10px;
    border: 1px solid #dce6f2;
    border-radius: 10px;
    background: #f8fbff;
}

.course-product-chip.video {
    border-color: #ddd2fb;
    background: #fbf9ff;
}

.course-product-chip strong {
    display: block;
    margin-bottom: 2px;
    color: #000000 !important;
    font-size: 9px;
    font-weight: 800 !important;
    letter-spacing: .04em;
}

.course-product-chip span {
    display: block;
    color: #000000 !important;
    font-size: 8.5px;
    line-height: 1.35;
}

.course-product-chip.video strong {
    color: #5b21b6 !important;
}

/* Keep the main course CTA visually dominant. */
.course-header-actions .course-buy-now {
    font-weight: 800 !important;
    box-shadow: 0 7px 18px rgba(245,158,11,.18);
}

/* Welcome panel: requested typography. */
.course-welcome-panel .course-welcome-badge {
    color: #000000 !important;
    font-weight: 800 !important;
}

.course-welcome-panel .welcome-lead,
.course-welcome-panel .course-welcome-feature span,
.course-welcome-panel .course-welcome-hint {
    color: #000000 !important;
}

.course-welcome-panel .course-welcome-feature strong {
    color: #000000 !important;
    font-weight: 700 !important;
}

.course-welcome-panel .course-welcome-popular-label {
    color: #1769ff !important;
    font-weight: 800 !important;
}

.course-welcome-panel .course-welcome-tag,
.course-welcome-panel .course-welcome-hint strong {
    color: #000000 !important;
}

/* Buy popup: clean hierarchy and no price/access overlap. */
#course-buy-modal .course-buy-header .course-modal-title h2 {
    color: #0b1d36 !important;
    font-weight: 800 !important;
}

#course-buy-modal .course-buy-subtitle {
    color: #000000 !important;
}

#course-buy-modal .course-buy-price-card {
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    gap: 16px !important;
    min-height: 92px !important;
    padding: 16px 18px !important;
    border: 1px solid #d8e5f6 !important;
    border-radius: 16px !important;
    background: linear-gradient(135deg,#f8fbff 0%,#edf5ff 100%) !important;
}

#course-buy-modal .course-buy-price-copy {
    min-width: 0 !important;
}

#course-buy-modal .course-buy-eyebrow {
    color: #1769ff !important;
    font-weight: 800 !important;
    letter-spacing: .10em !important;
}

#course-buy-modal #buy-summary-fee {
    display: block !important;
    margin-top: 3px !important;
    color: #0b1d36 !important;
    font-size: 30px !important;
    line-height: 1 !important;
    font-weight: 800 !important;
}

#course-buy-modal .course-buy-price-note {
    display: block !important;
    margin-top: 5px !important;
    color: #000000 !important;
    font-size: 9px !important;
    font-weight: 700 !important;
}

#course-buy-modal .course-buy-secure-badge {
    flex: 0 0 auto !important;
}

#course-buy-modal .course-buy-selected strong,
#course-buy-modal .course-buy-summary-total strong {
    color: #0b1d36 !important;
    font-weight: 800 !important;
}

#course-buy-modal .course-buy-dialog label,
#course-buy-modal .course-buy-section-heading small,
#course-buy-modal .course-buy-selected span,
#course-buy-modal .course-buy-summary-row span,
#course-buy-modal .course-buy-trust {
    color: #000000 !important;
}

#course-buy-modal .course-buy-pay-button {
    min-height: 48px !important;
    border-radius: 12px !important;
    font-weight: 800 !important;
}

#course-buy-modal .course-buy-trust {
    line-height: 1.5 !important;
}

@media (max-width:850px), (hover: none) and (pointer: coarse), (orientation: landscape) and (max-width:1100px) and (max-height:700px) {
    .course-product-note {
        display: grid;
        grid-template-columns: 1fr 1fr;
    }
}

@media (max-width: 560px) {
    .course-product-note {
        grid-template-columns: 1fr;
    }

    .course-product-chip {
        width: 100%;
    }

    #course-buy-modal .course-buy-price-card {
        align-items: flex-start !important;
        flex-direction: column !important;
    }

    #course-buy-modal .course-buy-secure-badge {
        align-self: flex-start !important;
    }

    #course-buy-modal #buy-summary-fee {
        font-size: 27px !important;
    }
}


/* =========================================================
   COURSE FEATURE MODALS
   ========================================================= */
.course-modal{
    position:fixed;
    inset:0;
    z-index:20000;
    display:none;
    align-items:center;
    justify-content:center;
    padding:12px;
    box-sizing:border-box;
}
.course-modal.active{display:flex}
.course-modal-backdrop{
    position:absolute;
    inset:0;
    background:rgba(7,20,43,.64);
    backdrop-filter:blur(6px);
}
.course-modal-dialog{
    position:relative;
    z-index:1;
    width:min(560px,100%);
    max-height:calc(100dvh - 24px);
    overflow:hidden;
    box-sizing:border-box;
    border:1px solid rgba(214,226,242,.95);
    border-radius:24px;
    background:#fff;
    box-shadow:0 30px 90px rgba(5,24,55,.34);
    animation:courseModalIn .2s ease-out;
}
.course-modal-close{
    position:absolute;
    top:14px;
    right:14px;
    z-index:5;
    width:38px;
    height:38px;
    border:1px solid #d7e2f0;
    border-radius:50%;
    background:#fff;
    color:#102342;
    font-size:22px;
    line-height:1;
    cursor:pointer;
    transition:.18s ease;
}
.course-modal-close:hover{
    border-color:#1769ff;
    color:#1769ff;
    transform:rotate(90deg);
}
.course-modal-icon{
    width:52px;
    height:52px;
    display:flex;
    align-items:center;
    justify-content:center;
    flex:0 0 auto;
    border-radius:16px;
    font-size:24px;
    font-weight:800;
}
.course-modal-icon.buy{background:linear-gradient(145deg,#fff4df,#ffebc8);color:#d97706}
.course-modal-icon.video{background:#f1eaff;color:#6d28d9}
.course-modal-title small{
    display:block;
    margin-bottom:4px;
    color:#72829a;
    font-size:9px;
    font-weight:800;
    letter-spacing:.11em;
}
.course-modal-title h2{
    margin:0;
    color:#102342;
    font-size:24px;
    line-height:1.15;
    font-weight:800;
}
.course-modal-dialog form{
    display:flex;
    flex-direction:column;
    gap:10px;
}
.course-modal-dialog label{
    display:block;
    margin:0 0 6px;
    color:#243957;
    font-size:12px;
    font-weight:700;
}
.course-modal-dialog label span{color:#d97706}
.course-modal-dialog input[type="text"],
.course-modal-dialog input[type="email"],
.course-modal-dialog input[type="tel"],
.course-modal-dialog input[type="password"],
.course-modal-dialog select{
    width:100%;
    min-height:46px;
    box-sizing:border-box;
    padding:11px 13px;
    border:1px solid #d6e1ef;
    border-radius:12px;
    outline:none;
    background:#fbfdff;
    color:#102342;
    font-size:13px;
    font-weight:500;
    transition:.18s ease;
}
.course-modal-dialog input::placeholder{color:#9aa8ba}
.course-modal-dialog input:focus,
.course-modal-dialog select:focus{
    border-color:#1769ff;
    box-shadow:0 0 0 4px rgba(23,105,255,.09);
    background:#fff;
}
.course-field-error{
    min-height:0;
    margin-top:4px;
    color:#c62828;
    font-size:10px;
    line-height:1.3;
}
.course-modal-message{
    display:none;
    padding:10px 12px;
    border-radius:10px;
    font-size:11px;
    line-height:1.45;
}
.course-modal-message.success{display:block;background:#eaf8f0;color:#176b3a;border:1px solid #bde7ce}
.course-modal-message.error{display:block;background:#fff0f0;color:#a32121;border:1px solid #f0c2c2}
.course-modal-submit{
    width:100%;
    min-height:50px;
    margin-top:2px;
    border:1px solid #1769ff;
    border-radius:13px;
    background:linear-gradient(135deg,#1769ff,#0d5bd7);
    color:#fff;
    font-size:13px;
    font-weight:800;
    cursor:pointer;
    box-shadow:0 10px 24px rgba(23,105,255,.20);
    transition:.18s ease;
}
.course-modal-submit:hover:not(:disabled){
    transform:translateY(-1px);
    box-shadow:0 14px 28px rgba(23,105,255,.25);
}
.course-modal-submit.video-submit{
    border-color:#7c3aed;
    background:linear-gradient(135deg,#7c3aed,#5b21b6);
}
.course-modal-submit:disabled{opacity:.65;cursor:wait;transform:none}
body.course-modal-open{overflow:hidden !important}
@keyframes courseModalIn{
    from{opacity:0;transform:translateY(10px) scale(.985)}
    to{opacity:1;transform:translateY(0) scale(1)}
}

/* =========================================================
   REDESIGNED BUY COURSE MODAL
   ========================================================= */
.course-buy-dialog{
    display:flex;
    flex-direction:column;
}
.course-buy-header{
    position:relative;
    display:flex;
    align-items:flex-start;
    gap:14px;
    padding:24px 58px 16px 24px;
    border-bottom:1px solid #edf2f8;
    background:linear-gradient(180deg,#fff,#fbfdff);
}
.course-buy-subtitle{
    margin:5px 0 0;
    color:#718198;
    font-size:11px;
    line-height:1.45;
}
.course-buy-dialog form{
    overflow-y:auto;
    overscroll-behavior:contain;
    padding:18px 24px 20px;
}
.course-buy-dialog form::-webkit-scrollbar{width:7px}
.course-buy-dialog form::-webkit-scrollbar-track{background:#f5f8fc;border-radius:20px}
.course-buy-dialog form::-webkit-scrollbar-thumb{background:#cbd7e6;border-radius:20px}
.course-buy-price-card{
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:16px;
    padding:16px 18px;
    border:1px solid #d9e6f7;
    border-radius:16px;
    background:linear-gradient(135deg,#f4f8ff,#edf5ff);
    box-shadow:inset 0 1px 0 rgba(255,255,255,.8);
}
.course-buy-price-copy{
    min-width:0;
    display:flex;
    flex-direction:column;
}
.course-buy-eyebrow{
    color:#6b7d95;
    font-size:9px;
    font-weight:800;
    letter-spacing:.1em;
}
.course-buy-price-copy strong{
    margin-top:2px;
    color:#102342;
    font-size:29px;
    line-height:1.1;
    font-weight:900;
}
.course-buy-price-note{
    margin-top:3px;
    color:#718198;
    font-size:9px;
}
.course-buy-secure-badge{
    flex:0 0 auto;
    display:flex;
    align-items:center;
    gap:6px;
    padding:8px 10px;
    border:1px solid #cfe0f5;
    border-radius:999px;
    background:#fff;
    color:#1769ff;
    font-size:9px;
    font-weight:800;
    white-space:nowrap;
}
.course-buy-secure-dot{
    display:inline-flex;
    align-items:center;
    justify-content:center;
    width:17px;
    height:17px;
    border-radius:50%;
    background:#eaf2ff;
    font-size:10px;
}
.course-buy-section-heading{
    display:flex;
    align-items:center;
    gap:9px;
    margin-top:2px;
}
.course-buy-section-number{
    display:flex;
    align-items:center;
    justify-content:center;
    width:25px;
    height:25px;
    border-radius:8px;
    background:#eef4ff;
    color:#1769ff;
    font-size:9px;
    font-weight:900;
}
.course-buy-section-heading div{
    display:flex;
    flex-direction:column;
}
.course-buy-section-heading strong{
    color:#172b49;
    font-size:12px;
    font-weight:800;
}
.course-buy-section-heading small{
    margin-top:1px;
    color:#8290a4;
    font-size:9px;
}
.course-buy-field{min-width:0}
.course-buy-select-wrap{position:relative}
.course-buy-select-wrap:after{
    content:'⌄';
    position:absolute;
    top:50%;
    right:13px;
    transform:translateY(-52%);
    color:#53657d;
    font-size:16px;
    pointer-events:none;
}
.course-buy-select-wrap select{
    appearance:none;
    padding-right:38px;
    cursor:pointer;
    font-weight:600;
}
.course-buy-selected{
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:12px;
    padding:11px 13px;
    border:1px solid #e0e8f3;
    border-radius:12px;
    background:#f8faff;
}
.course-buy-selected span{
    color:#7b8ba0;
    font-size:10px;
    flex:0 0 auto;
}
.course-buy-selected strong{
    min-width:0;
    color:#172b49;
    font-size:11px;
    font-weight:800;
    text-align:right;
    overflow-wrap:anywhere;
}
.course-buy-divider{
    height:1px;
    margin:2px 0;
    background:#edf2f8;
}
.course-buy-grid{
    display:grid;
    grid-template-columns:1fr 1fr;
    gap:10px 12px;
}
.course-buy-field-full{grid-column:1 / -1}
.course-buy-mobile-wrap{
    display:flex;
    align-items:center;
    min-height:46px;
    border:1px solid #d6e1ef;
    border-radius:12px;
    background:#fbfdff;
    overflow:hidden;
    transition:.18s ease;
}
.course-buy-mobile-wrap:focus-within{
    border-color:#1769ff;
    box-shadow:0 0 0 4px rgba(23,105,255,.09);
    background:#fff;
}
.course-buy-mobile-wrap > span{
    display:flex;
    align-items:center;
    align-self:stretch;
    padding:0 11px;
    border-right:1px solid #dce6f2;
    color:#53657d;
    background:#f5f8fc;
    font-size:12px;
    font-weight:700;
}
.course-buy-mobile-wrap input{
    min-height:44px !important;
    border:0 !important;
    border-radius:0 !important;
    box-shadow:none !important;
    background:transparent !important;
}
.course-buy-summary-card{
    padding:12px 14px;
    border:1px solid #e0e8f3;
    border-radius:13px;
    background:#f8faff;
}
.course-buy-summary-row{
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:12px;
    padding:4px 0;
}
.course-buy-summary-row span{
    color:#748198;
    font-size:10px;
}
.course-buy-summary-row strong{
    color:#243957;
    font-size:12px;
    font-weight:800;
}
.course-buy-summary-total{
    margin-top:5px;
    padding-top:9px;
    border-top:1px dashed #d8e2ef;
}
.course-buy-summary-total span{
    color:#243957;
    font-size:11px;
    font-weight:800;
}
.course-buy-summary-total strong{
    color:#0d5bd7;
    font-size:19px;
    font-weight:900;
}
.course-buy-pay-button{
    display:flex;
    align-items:center;
    justify-content:center;
    gap:8px;
}
.course-buy-pay-button strong{font-size:14px}
.course-buy-trust{
    margin:0;
    color:#8592a5;
    font-size:9px;
    line-height:1.45;
    text-align:center;
}
.course-buy-dialog .course-modal-message{margin:0}
@media(max-width:700px){
    .course-modal{padding:8px}
    .course-modal-dialog{
        width:min(560px,100%);
        max-height:calc(100dvh - 16px);
        border-radius:20px;
    }
    .course-buy-header{padding:18px 52px 14px 17px;gap:11px}
    .course-buy-dialog form{padding:14px 17px 17px}
    .course-buy-price-card{padding:13px 14px}
    .course-buy-price-copy strong{font-size:25px}
}
@media(max-width:560px){
    .course-modal{padding:6px}
    .course-modal-dialog{
        max-height:calc(100dvh - 12px);
        border-radius:18px;
    }
    .course-buy-header{padding:16px 48px 13px 14px}
    .course-modal-icon{width:44px;height:44px;border-radius:13px;font-size:21px}
    .course-modal-title h2{font-size:21px}
    .course-buy-subtitle{font-size:10px}
    .course-buy-dialog form{padding:12px 14px 14px;gap:9px}
    .course-buy-price-card{align-items:flex-start;gap:10px;padding:12px}
    .course-buy-price-copy strong{font-size:23px}
    .course-buy-secure-badge{padding:7px 8px;font-size:8px}
    .course-buy-grid{grid-template-columns:1fr}
    .course-buy-field-full{grid-column:auto}
    .course-buy-selected{align-items:flex-start;flex-direction:column;gap:4px}
    .course-buy-selected strong{text-align:left}
    .course-buy-section-heading small{font-size:8px}
    .course-buy-pay-button{min-height:48px}
}
@media(max-height:680px) and (min-width:561px){
    .course-buy-header{padding-top:15px;padding-bottom:10px}
    .course-buy-dialog form{padding-top:11px;padding-bottom:12px;gap:7px}
    .course-buy-price-card{padding:11px 14px}
    .course-buy-price-copy strong{font-size:24px}
    .course-buy-section-heading{margin-top:0}
    .course-buy-dialog input,
    .course-buy-dialog select,
    .course-buy-mobile-wrap{min-height:42px}
}
.course-radio-group{
    display:grid;
    grid-template-columns:1fr 1fr;
    gap:8px;
    margin-bottom:8px;
}
.course-radio-option{
    display:flex !important;
    align-items:center;
    gap:8px;
    margin:0 !important;
    padding:12px;
    border:1px solid #d7e2f0;
    border-radius:10px;
    background:#f8faff;
    cursor:pointer;
}
.course-radio-option input{margin:0}
.course-radio-option span{color:#243957;font-size:11px;font-weight:600}
.trial-access-note{
    display:none;
    margin:6px 0 8px;
    padding:11px 12px;
    border:1px solid #dce6f3;
    border-radius:10px;
    background:#f7f9fc;
    color:#53657d;
    font-size:11px;
    line-height:1.5;
}

/* =========================================================
   PREMIUM EMAIL OTP
   ========================================================= */
.otp-sent-message{
    margin:8px 0 2px;
    padding:10px 12px;
    border:1px solid #dce6f3;
    border-radius:10px;
    background:#f7f9fc;
    color:#53657d;
    font-size:11px;
    line-height:1.5;
}
.otp-sent-message strong{
    color:#243957;
    font-weight:700;
}
#video-email[readonly]{
    background:#f5f7fb;
    color:#53657d;
    cursor:not-allowed;
}
#video-otp{
    text-align:center;
    letter-spacing:.32em;
    font-size:18px !important;
    font-weight:700;
    padding-left:18px !important;
}
.otp-actions{
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:10px;
    margin:2px 0 2px;
    min-height:28px;
}
.otp-actions span{
    color:#748198;
    font-size:10px;
    line-height:1.4;
}
.otp-resend-button{
    flex:0 0 auto;
    border:0;
    padding:3px 0;
    background:transparent;
    color:#1769ff;
    font-size:10px;
    font-weight:700;
    cursor:pointer;
}
.otp-resend-button:hover:not(:disabled){
    text-decoration:underline;
}
.otp-resend-button:disabled{
    color:#9aa8ba;
    cursor:not-allowed;
}
@media (max-width:560px){
    .otp-actions{
        align-items:flex-start;
    }
    .otp-actions span{
        max-width:58%;
    }
    #video-otp{
        font-size:17px !important;
        letter-spacing:.24em;
    }
}
.course-modal-message{
    display:none;
    padding:10px 12px;
    border-radius:9px;
    font-size:11px;
    line-height:1.45;
}
.course-modal-message.success{display:block;background:#eaf8f0;color:#176b3a;border:1px solid #bde7ce}
.course-modal-message.error{display:block;background:#fff0f0;color:#a32121;border:1px solid #f0c2c2}
.course-modal-submit{
    width:100%;
    min-height:44px;
    margin-top:8px;
    border:1px solid #1769ff;
    border-radius:10px;
    background:linear-gradient(135deg,#1769ff,#0d5bd7);
    color:#fff;
    font-size:12px;
    font-weight:600;
    cursor:pointer;
}
.course-modal-submit.video-submit{
    border-color:#7c3aed;
    background:linear-gradient(135deg,#7c3aed,#5b21b6);
}
.course-modal-submit:disabled{opacity:.65;cursor:wait}
body.course-modal-open{overflow:hidden !important}
@keyframes courseModalIn{
    from{opacity:0;transform:translateY(12px) scale(.985)}
    to{opacity:1;transform:translateY(0) scale(1)}
}
@media(max-width:560px){
    .course-modal{padding:10px}
    .course-modal-dialog{padding:21px 17px;border-radius:15px;max-height:94vh}
    .course-radio-group{grid-template-columns:1fr}
    .course-modal-title h2{font-size:18px}
}


/* =========================================================
   COURSE VIDEO LEARNING AREA
   Added without changing the existing course/sidebar layout.
   ========================================================= */

/* Video Mode: remove the course-information block to give
   the lesson list and player more vertical space. */
.course-content-panel .course-info.video-mode-hidden{
    display:none !important;
}

/* =========================================================
   DYNAMIC PREMIUM MEMBER / LESSON META
   ========================================================= */
.video-member-meta {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 10px;
    min-width: 0;
}

.video-member-email {
    display: inline-flex;
    align-items: center;
    max-width: 220px;
    padding: 7px 11px;
    border: 1px solid #d9e3f2;
    border-radius: 10px;
    background: #f7faff;
    color: #24518d;
    font-size: 11px;
    font-weight: 600;
    line-height: 1.2;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.video-member-validity {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 30px;
    padding: 6px 10px;
    border: 1px solid #bfe7cf;
    border-radius: 10px;
    background: #effbf3;
    color: #16834a;
    font-size: 10px;
    font-weight: 700;
    line-height: 1.2;
    white-space: nowrap;
}

.video-member-validity.trial {
    border-color: #d9e3f2;
    background: #f7faff;
    color: #53657d;
}

.video-member-validity.expiring {
    border-color: #f2d49b;
    background: #fff8e8;
    color: #a35a00;
}

.video-member-validity.expired {
    border-color: #f2b8b8;
    background: #fff1f1;
    color: #b42318;
}

.video-current-progress {
    position:absolute;
    top:14px;
    right:16px;
    z-index:2;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 auto;
    min-height: 34px;
    padding: 7px 12px;
    border: 1px solid #d9e5f5;
    border-radius: 10px;
    background: #f5f8ff;
    color: #24518d;
    font-size: 11px;
    font-weight: 700;
    white-space: nowrap;
}

@media (max-width:850px), (hover: none) and (pointer: coarse), (orientation: landscape) and (max-width:1100px) and (max-height:700px) {
    .video-playlist-header,
    .video-player-heading {
        gap: 8px;
    }

    .video-member-meta {
        flex-direction: column;
        align-items: flex-end;
        gap: 5px;
    }

    .video-member-email {
        max-width: 145px;
        font-size: 9px;
        padding: 6px 8px;
    }

    .video-member-validity {
        max-width: 145px;
        min-height: 28px;
        padding: 5px 8px;
        font-size: 8px;
    }

    .video-current-progress {
        top:12px;
        right:12px;
        min-height: 30px;
        padding: 6px 8px;
        font-size: 9px;
    }

    .video-player-heading {
        padding-right:120px;
    }
}

.video-learning-area{
    display:grid;
    grid-template-columns:minmax(250px, 34%) minmax(0, 1fr);
    gap:14px;
    padding:14px;
    background:#f7f9fc;
    box-sizing:border-box;
}

.video-playlist-panel,
.video-player-panel{
    min-width:0;
    background:#ffffff;
    border:1px solid #e3eaf4;
    border-radius:14px;
    box-shadow:0 5px 18px rgba(20,50,90,.06);
}

.video-playlist-panel{
    display:flex;
    flex-direction:column;
    height:420px;
    min-height:0;
    overflow:hidden;
}

.video-playlist-header{
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:10px;
    padding:14px 15px;
    border-bottom:1px solid #e6ebf2;
}

.video-eyebrow{
    display:block;
    margin-bottom:4px;
    color:#1769ff;
    font-size:9px;
    font-weight:800;
    letter-spacing:.08em;
    text-transform:uppercase;
}

.video-playlist-header h3,
.video-player-heading h3{
    margin:0;
    color:#102342;
    font-size:15px;
    font-weight:800;
}

.video-count{
    flex:0 0 auto;
    padding:5px 8px;
    border-radius:999px;
    background:#edf4ff;
    color:#1769ff;
    font-size:10px;
    font-weight:800;
}

.video-playlist{
    flex:1 1 auto;
    min-height:0;
    max-height:none;
    height:100%;
    overflow-y:auto;
    overflow-x:hidden;
    padding:8px;
    scrollbar-width:thin;
    overscroll-behavior:contain;
    -webkit-overflow-scrolling:touch;
}

.video-lesson{
    width:100%;
    min-height:58px;
    display:grid;
    grid-template-columns:30px minmax(0,1fr) 20px;
    align-items:center;
    gap:9px;
    margin:0 0 6px;
    padding:8px 9px;
    border:1px solid #e1e8f2;
    border-radius:10px;
    background:#f8faff;
    color:#17325c;
    text-align:left;
    cursor:pointer;
    transition:.18s ease;
}

.video-lesson:last-child{
    margin-bottom:0;
}

.video-lesson:hover{
    border-color:#a9c7f7;
    background:#eef5ff;
    transform:translateY(-1px);
}

.video-lesson.active{
    border-color:#1769ff;
    background:#1769ff;
    color:#ffffff;
    box-shadow:0 4px 12px rgba(23,105,255,.16);
}

.video-lesson-number{
    width:28px;
    height:28px;
    display:flex;
    align-items:center;
    justify-content:center;
    border-radius:8px;
    background:#e8f1ff;
    color:#1769ff;
    font-size:10px;
    font-weight:800;
}

.video-lesson.active .video-lesson-number{
    background:rgba(255,255,255,.16);
    color:#ffffff;
}

.video-lesson-info{
    min-width:0;
}

.video-lesson-info strong{
    display:block;
    overflow:hidden;
    text-overflow:ellipsis;
    white-space:nowrap;
    font-size:11px;
    font-weight:800;
}

.video-lesson-info small{
    display:block;
    margin-top:3px;
    color:#7a899e;
    font-size:9px;
}

.video-lesson.active .video-lesson-info small{
    color:#dbe9ff;
}

.video-lesson-status{
    color:#1769ff;
    font-size:13px;
    font-weight:800;
    text-align:center;
}

.video-lesson.active .video-lesson-status{
    color:#ffffff;
}

.video-player-panel{
    display:flex;
    flex-direction:column;
    overflow:hidden;
}

.video-player-heading{
    position:relative;
    padding:14px 16px 11px;
    padding-right:170px;
    border-bottom:1px solid #e6ebf2;
}

.video-player{
    position:relative;
    width:100%;
    aspect-ratio:16/9;
    min-height:300px;
    background:#081d3d;
    overflow:hidden;
}

.video-embed{
    display:block;
    width:100%;
    height:100%;
    min-height:300px;
    border:0;
    background:#081d3d;
}

.video-player video{
    object-fit:contain;
}

.video-player-placeholder{
    position:absolute;
    inset:0;
    display:flex;
    flex-direction:column;
    align-items:center;
    justify-content:center;
    padding:24px;
    box-sizing:border-box;
    background:
        radial-gradient(circle at center, rgba(23,105,255,.18), transparent 45%),
        #081d3d;
    color:#ffffff;
    text-align:center;
}

.video-play-circle{
    width:64px;
    height:64px;
    display:flex;
    align-items:center;
    justify-content:center;
    margin-bottom:14px;
    border:1px solid rgba(255,255,255,.25);
    border-radius:50%;
    background:rgba(255,255,255,.10);
    color:#ffffff;
}

.video-play-circle svg{
    width:30px;
    height:30px;
    fill:none;
    stroke:currentColor;
    stroke-width:2;
    stroke-linecap:round;
    stroke-linejoin:round;
}

.video-player-placeholder h4{
    margin:0 0 7px;
    font-size:16px;
    font-weight:800;
}

.video-player-placeholder p{
    max-width:390px;
    margin:0;
    color:#c7d5ea;
    font-size:11px;
    line-height:1.6;
}

.video-player-footer{
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:12px;
    padding:10px 14px;
    border-top:1px solid #e6ebf2;
    background:#ffffff;
}

.video-course-label{
    min-width:0;
    overflow:hidden;
    color:#53657d;
    font-size:10px;
    font-weight:700;
    text-overflow:ellipsis;
    white-space:nowrap;
}

.video-protected-note{
    flex:0 0 auto;
    color:#7b899d;
    font-size:9px;
}

@media (max-width:1050px){
    .video-learning-area{
        grid-template-columns:minmax(220px,38%) minmax(0,1fr);
        gap:10px;
        padding:10px;
    }

    .video-playlist{
        max-height:460px;
    }
}

@media (max-width:850px), (hover: none) and (pointer: coarse), (orientation: landscape) and (max-width:1100px) and (max-height:700px){
    .video-learning-area{
        grid-template-columns:1fr;
        gap:10px;
        padding:10px;
    }

    .video-playlist-panel{
        height:300px;
    }

    .video-playlist{
        height:100%;
        max-height:none;
    }

    .video-player{
        aspect-ratio:16/9;
        min-height:220px;
    }

    .video-embed{
        min-height:220px;
    }
}

@media (max-width:560px){
    .video-learning-area{
        padding:8px;
    }

    .video-playlist-header{
        padding:12px;
    }

    .video-player-heading{
        padding:12px;
    }

    .video-playlist-panel{
        height:280px;
    }

    .video-playlist{
        height:100%;
    }

    .video-player{
        min-height:190px;
    }

    .video-embed{
        min-height:190px;
    }

    .video-player-footer{
        align-items:flex-start;
        flex-direction:column;
        gap:5px;
    }
}


/* =========================================================
   COURSE CONTENT - REDUCE EMPTY VERTICAL SPACING
   Only affects the course content panel.
   ========================================================= */

/* Space 1: header/buttons -> course description */
.course-content-panel .course-info {
    padding-top: 8px !important;
    padding-bottom: 10px !important;
}

/* Space 2: description -> information cards */
.course-content-panel .course-info-intro {
    margin-bottom: 8px !important;
}

/* Space 3: information cards -> PDF viewer */
.course-content-panel .course-info-grid {
    margin-bottom: 0 !important;
}

/* Keep the PDF directly after the information section */
.course-content-panel #course-mode-content {
    margin-top: 0 !important;
    padding-top: 0 !important;
}

/* Desktop: compact but comfortable */
@media (min-width: 851px) {
    .course-content-panel .course-info {
        padding: 8px 20px 10px !important;
    }

    .course-content-panel .course-info-intro {
        margin-bottom: 8px !important;
    }
}

/* Mobile: save even more vertical space for the PDF */
@media (max-width:850px), (hover: none) and (pointer: coarse), (orientation: landscape) and (max-width:1100px) and (max-height:700px) {
    .course-content-panel.mobile-open .course-info {
        padding: 8px 12px 8px !important;
        max-height: 25vh;
    }

    .course-content-panel.mobile-open .course-info-intro {
        margin-bottom: 6px !important;
    }
}


/* =========================================================
   PKTechTrainings - COURSE PAGE BODY SHAKE / LAYOUT SHIFT FIX
   Keeps the viewport width identical when Courses is opened.
   ========================================================= */

/* Always reserve the vertical scrollbar space. */
html {
    overflow-y: scroll !important;
    scrollbar-gutter: stable !important;
}

/* Never allow the Courses page to create horizontal reflow. */
html,
body {
    max-width: 100%;
}

body {
    margin-left: 0 !important;
    margin-right: 0 !important;
    overflow-x: hidden !important;
    width: 100% !important;
}

/* Keep the course page itself inside the viewport. */
.courses-page {
    width: 100%;
    max-width: 100%;
    overflow-x: clip;
}

/* The main course container must not change width when the
   scrollbar appears/disappears. */
.courses-page .container,
.courses-layout,
.courses-sidebar,
.course-content-panel {
    box-sizing: border-box;
    min-width: 0;
    max-width: 100%;
}

/* Do not animate layout-affecting properties. */
.course-category-header,
.course-button,
.course-mode-button,
.course-enquire,
.main-nav a {
    transition:
        color .2s ease,
        background-color .2s ease,
        border-color .2s ease,
        box-shadow .2s ease,
        opacity .2s ease !important;
}

/* Active navigation must occupy exactly the same space as
   the normal navigation item. */
.main-nav a {
    box-sizing: border-box;
}

/* Sticky header must stay exactly inside the viewport. */
.site-header {
    width: 100%;
    max-width: 100%;
    box-sizing: border-box;
}

/* Desktop/tablet: prevent grid children from expanding the
   document width during course/PDF initialization. */
.courses-layout > * {
    min-width: 0;
    max-width: 100%;
}

/* PDF/video internals must never create page-level horizontal
   overflow. Their own containers handle scrolling. */
.course-viewer,
.video-learning-area,
.video-player-panel,
.video-player,
.video-embed {
    max-width: 100%;
    box-sizing: border-box;
}

/* Mobile drawer already locks body scrolling. Preserve that
   behavior without introducing horizontal movement. */
@media (max-width:850px), (hover: none) and (pointer: coarse), (orientation: landscape) and (max-width:1100px) and (max-height:700px) {
    html {
        overflow-y: scroll !important;
        scrollbar-gutter: stable !important;
    }

    body {
        overflow-x: hidden !important;
    }

    body.course-drawer-open {
        overflow: hidden !important;
        width: 100% !important;
    }

    .course-content-panel.mobile-open {
        left: 10px !important;
        right: 10px !important;
        top: 78px !important;
        bottom: 10px !important;
        width: auto !important;
        box-sizing: border-box !important;
    }
}


/*    Premium Member Text */
/* =========================================
   PREMIUM USER DISPLAY
   DOES NOT AFFECT CENTER NAVIGATION
   ========================================= */

#pk-premium-user-display {
    position: absolute !important;

    right: 250px;
    top: 50%;
    transform: translateY(-50%);

    display: flex;
    align-items: center;

    margin: 0 !important;
    padding: 0;

    z-index: 20;
}

.pk-user-welcome {
    display: flex;
    align-items: center;
    gap: 9px;

    padding: 7px 12px;

    min-height: 42px;
    max-width: 240px;

    box-sizing: border-box;

    border: 1px solid #d9c7ff;
    border-radius: 13px;

    background: linear-gradient(
        135deg,
        #faf7ff 0%,
        #f1eaff 100%
    );

    box-shadow:
        0 4px 14px rgba(91, 45, 180, 0.10);
}

.pk-user-icon {
    width: 30px;
    height: 30px;
    min-width: 30px;

    display: flex;
    align-items: center;
    justify-content: center;

    border-radius: 50%;

    background: #6d28d9;

    color: #ffffff;

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

.pk-user-info {
    display: flex;
    flex-direction: column;
    justify-content: center;

    min-width: 0;

    line-height: 1.15;
}

.pk-user-name {
    max-width: 180px;

    font-size: 12px;
    font-weight: 700;

    color: #172b4d;

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

.pk-user-status {
    margin-top: 3px;

    font-size: 10px;
    font-weight: 600;

    color: #6d28d9;

    white-space: nowrap;
}


/* =========================================
   DESKTOP
   ========================================= */

@media (min-width: 1100px) {

    #pk-premium-user-display {
        right: 250px;
    }

}


/* =========================================
   MEDIUM DESKTOP / TABLET
   ========================================= */

@media (min-width: 769px) and (max-width: 1099px) {

    #pk-premium-user-display {
        right: 190px;
    }

    .pk-user-welcome {
        max-width: 190px;
        padding: 6px 9px;
    }

    .pk-user-name {
        max-width: 135px;
    }
}


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

@media (max-width: 768px) {

    #pk-premium-user-display {
        position: absolute !important;

        right: 70px;
        top: 50%;

        transform: translateY(-50%);
    }

    .pk-user-welcome {
        min-height: 34px;

        padding: 5px 7px;

        gap: 6px;

        border-radius: 10px;
    }

    .pk-user-icon {
        width: 25px;
        height: 25px;
        min-width: 25px;

        font-size: 11px;
    }

    .pk-user-name {
        max-width: 95px;

        font-size: 9px;
    }

    .pk-user-status {
        font-size: 8px;
    }
}


/* =========================================================
   VIDEO TRAINING META - TEXT ONLY
   Presentation-only override. No authentication, lesson,
   video, payment or course-selection logic is changed.
   ========================================================= */
.video-playlist-header {
    display: flex !important;
    flex-direction: column !important;
    align-items: flex-start !important;
    justify-content: flex-start !important;
    gap: 5px !important;
    width: 100%;
    padding: 14px 15px 12px !important;
    border-bottom: 1px solid #e6ebf2;
    box-sizing: border-box;
}

.video-training-title {
    width: 100%;
    line-height: 1;
}

.video-eyebrow {
    display: block !important;
    margin: 0 !important;
    color: #2563eb !important;
    font-size: 12px !important;
    font-weight: 800 !important;
    letter-spacing: 1px !important;
    line-height: 1.2 !important;
    text-transform: uppercase;
}

.video-member-meta {
    display: flex !important;
    align-items: center !important;
    justify-content: flex-start !important;
    flex-wrap: wrap !important;
    gap: 0 !important;
    width: 100%;
    min-width: 0;
    min-height: 24px;
    line-height: 1.4;
}

.video-member-access,
.video-member-email,
.video-member-validity,
.video-count {
    display: inline !important;
    width: auto !important;
    max-width: none !important;
    min-height: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
    border: 0 !important;
    border-radius: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
    white-space: nowrap;
    overflow: visible !important;
    text-overflow: clip !important;
}

.video-member-access {
    color: #166534 !important;
    font-size: 13px !important;
    font-weight: 800 !important;
}

.video-member-access::before {
    content: "✓";
    display: inline-block;
    margin-right: 5px;
    color: #16a34a;
    font-weight: 900;
}

.video-member-email {
    color: #1d4ed8 !important;
    font-size: 13px !important;
    font-weight: 700 !important;
}

.video-member-validity {
    color: #15803d !important;
    font-size: 13px !important;
    font-weight: 800 !important;
}

.video-member-validity.trial {
    color: #7c3aed !important;
}

.video-member-validity.expiring {
    color: #b45309 !important;
}

.video-member-validity.expired {
    color: #dc2626 !important;
}

.video-count {
    color: #6d28d9 !important;
    font-size: 13px !important;
    font-weight: 800 !important;
}

.video-member-access:not(:empty)::after,
.video-member-email:not(:empty)::after,
.video-member-validity:not(:empty)::after {
    content: "  •  ";
    color: #94a3b8;
    font-weight: 600;
    margin: 0 7px;
}

@media (max-width:850px), (hover: none) and (pointer: coarse), (orientation: landscape) and (max-width:1100px) and (max-height:700px) {
    .video-playlist-header {
        flex-direction: column !important;
        align-items: flex-start !important;
        gap: 5px !important;
        padding: 12px !important;
    }

    .video-member-meta {
        flex-direction: row !important;
        align-items: center !important;
        justify-content: flex-start !important;
        flex-wrap: wrap !important;
        gap: 0 !important;
    }

    .video-member-access,
    .video-member-email,
    .video-member-validity,
    .video-count {
        font-size: 12px !important;
    }
}

@media (max-width: 560px) {
    .video-playlist-header {
        padding: 11px 12px !important;
    }

    .video-member-meta {
        line-height: 1.6;
    }

    .video-member-access,
    .video-member-email,
    .video-member-validity,
    .video-count {
        font-size: 11px !important;
    }
}


/* VIDEO ACCESS POPUP — CENTER ONLY. Buy Course popup and OTP logic untouched. */
#course-video-modal.course-modal {
    position: fixed !important;
    inset: 0 !important;
    top: 0 !important;
    right: 0 !important;
    bottom: 0 !important;
    left: 0 !important;
    width: 100vw !important;
    height: 100vh !important;
    height: 100dvh !important;
    margin: 0 !important;
    padding: 16px !important;
    box-sizing: border-box !important;
    display: none !important;
    align-items: center !important;
    justify-content: center !important;
}
#course-video-modal.course-modal.active {
    display: flex !important;
}
#course-video-modal .video-access-dialog {
    position: relative !important;
    top: auto !important;
    right: auto !important;
    bottom: auto !important;
    left: auto !important;
    margin: auto !important;
    transform: none !important;
    flex: 0 0 auto !important;
}
@media (max-width: 700px) {
    #course-video-modal.course-modal {
        inset: 0 !important;
        width: 100vw !important;
        height: 100dvh !important;
        padding: 12px !important;
        align-items: center !important;
        justify-content: center !important;
    }
    #course-video-modal .video-access-dialog {
        width: min(520px, 100%) !important;
        max-height: calc(100dvh - 24px) !important;
        margin: auto !important;
    }
}
@media (max-width: 560px) {
    #course-video-modal.course-modal {
        padding: 8px !important;
    }
    #course-video-modal .video-access-dialog {
        max-height: calc(100dvh - 16px) !important;
        margin: auto !important;
    }
}


/*
 * FINAL VIDEO ACCESS MODAL POSITIONING
 * Buy Course popup is intentionally untouched.
 */
#course-video-modal.course-modal {
    position: fixed !important;
    inset: 0 !important;
    width: 100% !important;
    height: 100% !important;
    min-height: 100vh !important;
    min-height: 100svh !important;
    max-height: none !important;
    margin: 0 !important;
    padding: 16px !important;
    box-sizing: border-box !important;
    display: none !important;
    align-items: center !important;
    justify-content: center !important;
    overflow: auto !important;
    overflow-x: hidden !important;
    overscroll-behavior: contain !important;
    -webkit-overflow-scrolling: touch !important;
    z-index: 2147483000 !important;
}

#course-video-modal.course-modal.active {
    display: flex !important;
}

#course-video-modal .course-modal-backdrop {
    position: fixed !important;
    inset: 0 !important;
    width: 100% !important;
    height: 100% !important;
    z-index: 0 !important;
}

#course-video-modal .video-access-dialog {
    position: relative !important;
    z-index: 1 !important;
    top: auto !important;
    right: auto !important;
    bottom: auto !important;
    left: auto !important;
    margin: auto !important;
    transform: none !important;
    width: min(520px, calc(100vw - 32px)) !important;
    max-width: 520px !important;
    max-height: calc(100vh - 32px) !important;
    max-height: calc(100svh - 32px) !important;
    flex: 0 0 auto !important;
    overflow: hidden !important;
}

/* Phones */
@media screen and (max-width: 700px) {
    #course-video-modal.course-modal {
        inset: 0 !important;
        width: 100% !important;
        height: 100% !important;
        min-height: 100vh !important;
        min-height: 100svh !important;
        padding: 12px !important;
        align-items: center !important;
        justify-content: center !important;
    }

    #course-video-modal .video-access-dialog {
        width: calc(100vw - 24px) !important;
        max-width: calc(100vw - 24px) !important;
        max-height: calc(100vh - 24px) !important;
        max-height: calc(100svh - 24px) !important;
        margin: auto !important;
        border-radius: 18px !important;
    }

    #course-video-modal .video-access-head {
        flex-shrink: 0 !important;
    }

    #course-video-modal .video-access-dialog > form {
        max-height: calc(100vh - 120px) !important;
        max-height: calc(100svh - 120px) !important;
        overflow-y: auto !important;
        -webkit-overflow-scrolling: touch !important;
    }
}

/* Small phones */
@media screen and (max-width: 480px) {
    #course-video-modal.course-modal {
        padding: 8px !important;
    }

    #course-video-modal .video-access-dialog {
        width: calc(100vw - 16px) !important;
        max-width: calc(100vw - 16px) !important;
        max-height: calc(100vh - 16px) !important;
        max-height: calc(100svh - 16px) !important;
        border-radius: 17px !important;
    }

    #course-video-modal .video-access-head {
        padding: 15px 52px 13px 14px !important;
        gap: 10px !important;
    }

    #course-video-modal .video-access-head .course-modal-icon {
        width: 44px !important;
        height: 44px !important;
        flex: 0 0 44px !important;
    }

    #course-video-modal .video-access-head .course-modal-title h2 {
        font-size: 20px !important;
    }

    #course-video-modal .video-access-dialog > form {
        max-height: calc(100vh - 105px) !important;
        max-height: calc(100svh - 105px) !important;
        padding: 12px 14px 14px !important;
    }

    #course-video-modal .course-modal-close {
        top: 11px !important;
        right: 11px !important;
        width: 34px !important;
        height: 34px !important;
    }
}

/* Very small / short screens */
@media screen and (max-width: 380px), screen and (max-height: 600px) {
    #course-video-modal .video-access-head {
        padding-top: 12px !important;
        padding-bottom: 10px !important;
    }

    #course-video-modal .video-access-dialog > form {
        padding-top: 10px !important;
        padding-bottom: 12px !important;
        gap: 8px !important;
    }
}


/* =========================================================
   BUY NOW — FINAL MOBILE FIX
   Does not modify Video Access / OTP modal.
   ========================================================= */

#course-buy-modal.course-modal {
    position: fixed !important;
    inset: 0 !important;
    width: 100vw !important;
    height: 100vh !important;
    height: 100svh !important;
    margin: 0 !important;
    padding: 16px !important;
    box-sizing: border-box !important;
    display: none !important;
    align-items: center !important;
    justify-content: center !important;
    overflow: auto !important;
    overflow-x: hidden !important;
    z-index: 2147483001 !important;
}

#course-buy-modal.course-modal.active {
    display: flex !important;
}

#course-buy-modal .course-modal-backdrop {
    position: fixed !important;
    inset: 0 !important;
    width: 100% !important;
    height: 100% !important;
    z-index: 0 !important;
    pointer-events: auto !important;
}

#course-buy-modal .course-buy-dialog {
    position: relative !important;
    z-index: 1 !important;
    width: min(680px, calc(100vw - 32px)) !important;
    max-width: 680px !important;
    max-height: calc(100vh - 32px) !important;
    max-height: calc(100svh - 32px) !important;
    margin: auto !important;
    transform: none !important;
    flex: 0 0 auto !important;
    overflow: hidden !important;
}

#course-buy-modal .course-buy-dialog form {
    max-height: calc(100vh - 150px) !important;
    max-height: calc(100svh - 150px) !important;
    overflow-y: auto !important;
    -webkit-overflow-scrolling: touch !important;
}

@media screen and (max-width: 700px) {
    #course-buy-modal.course-modal {
        padding: 10px !important;
        align-items: center !important;
        justify-content: center !important;
    }

    #course-buy-modal .course-buy-dialog {
        width: calc(100vw - 20px) !important;
        max-width: calc(100vw - 20px) !important;
        max-height: calc(100vh - 20px) !important;
        max-height: calc(100svh - 20px) !important;
        border-radius: 18px !important;
    }

    #course-buy-modal .course-buy-dialog form {
        max-height: calc(100vh - 125px) !important;
        max-height: calc(100svh - 125px) !important;
    }

    #course-buy-modal .course-modal-close {
        z-index: 5 !important;
    }
}

@media screen and (max-width: 480px) {
    #course-buy-modal.course-modal {
        padding: 7px !important;
    }

    #course-buy-modal .course-buy-dialog {
        width: calc(100vw - 14px) !important;
        max-width: calc(100vw - 14px) !important;
        max-height: calc(100vh - 14px) !important;
        max-height: calc(100svh - 14px) !important;
        border-radius: 16px !important;
    }

    #course-buy-modal .course-buy-dialog form {
        max-height: calc(100vh - 112px) !important;
        max-height: calc(100svh - 112px) !important;
    }
}

/* Make sure the actual button remains tappable on mobile. */
.course-content .course-buy-now,
.course-header-actions .course-buy-now {
    position: relative !important;
    z-index: 10 !important;
    pointer-events: auto !important;
    touch-action: manipulation !important;
    cursor: pointer !important;
}


/* USER-REQUESTED TYPOGRAPHY ONLY */

/* 1. Practical, Career-Focused Training -> bold */
.course-welcome-panel .course-welcome-badge {
    font-weight: 800 !important;
}

/* 2. Supporting descriptions -> black */
.course-welcome-panel .welcome-lead,
.course-welcome-panel .course-welcome-feature span {
    color: #000000 !important;
}

/* 3. Popular/Featured Learning Paths -> bold blue */
.course-welcome-panel .course-welcome-popular-label {
    color: #1769ff !important;
    font-weight: 800 !important;
}

/* 4. Learning path names -> black */
.course-welcome-panel .course-welcome-tag {
    color: #000000 !important;
}

/* 5. Bottom instruction -> black */
.course-welcome-panel .course-welcome-hint,
.course-welcome-panel .course-welcome-hint strong {
    color: #000000 !important;
}


/* =========================================================
   FINAL BUY VIDEO COURSE POPUP LAYOUT
   Fixes price-card text overlap and visual hierarchy.
   Only popup presentation is changed.
   ========================================================= */

#course-buy-modal .course-buy-dialog {
    width: min(680px, calc(100vw - 40px)) !important;
    max-height: min(780px, calc(100vh - 40px)) !important;
    border-radius: 22px !important;
    overflow: hidden !important;
    background: #ffffff !important;
}

#course-buy-modal .course-buy-header {
    min-height: 92px !important;
    padding: 17px 62px 16px 20px !important;
    align-items: center !important;
    gap: 12px !important;
    background: #ffffff !important;
}

#course-buy-modal .course-buy-header .course-modal-icon {
    width: 48px !important;
    height: 48px !important;
    flex: 0 0 48px !important;
    border-radius: 14px !important;
}

#course-buy-modal .course-buy-header .course-modal-title small {
    color: #1769ff !important;
    font-size: 8px !important;
    font-weight: 800 !important;
    letter-spacing: .12em !important;
}

#course-buy-modal .course-buy-header .course-modal-title h2 {
    margin: 2px 0 0 !important;
    color: #081b35 !important;
    font-size: 23px !important;
    line-height: 1.12 !important;
    font-weight: 800 !important;
    letter-spacing: -.025em !important;
}

#course-buy-modal .course-buy-subtitle {
    margin: 5px 0 0 !important;
    color: #000000 !important;
    font-size: 10px !important;
    line-height: 1.4 !important;
    font-weight: 400 !important;
}

/* Remove the old pseudo-element entirely: it was causing the overlap. */
#course-buy-modal .course-buy-price-card::after {
    content: none !important;
    display: none !important;
}

#course-buy-modal .course-buy-dialog > form {
    max-height: calc(100% - 92px) !important;
    padding: 18px 20px 22px !important;
    gap: 12px !important;
    overflow-y: auto !important;
}

/* Price card: two clean columns, no absolute positioning. */
#course-buy-modal .course-buy-price-card {
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    gap: 16px !important;
    min-height: 88px !important;
    padding: 16px 18px !important;
    box-sizing: border-box !important;
    border: 1px solid #d8e6f8 !important;
    border-radius: 16px !important;
    background: linear-gradient(135deg, #f7fbff 0%, #edf5ff 100%) !important;
}

#course-buy-modal .course-buy-price-copy {
    display: flex !important;
    flex-direction: column !important;
    align-items: flex-start !important;
    min-width: 0 !important;
}

#course-buy-modal .course-buy-eyebrow {
    margin: 0 0 4px !important;
    color: #1769ff !important;
    font-size: 8px !important;
    line-height: 1.2 !important;
    font-weight: 800 !important;
    letter-spacing: .12em !important;
}

#course-buy-modal #buy-summary-fee {
    margin: 0 !important;
    color: #071b34 !important;
    font-size: 30px !important;
    line-height: 1 !important;
    font-weight: 800 !important;
    letter-spacing: -.035em !important;
}

#course-buy-modal .course-buy-price-note {
    display: block !important;
    margin: 6px 0 0 !important;
    color: #000000 !important;
    font-size: 9px !important;
    line-height: 1.25 !important;
    font-weight: 700 !important;
}

#course-buy-modal .course-buy-secure-badge {
    display: inline-flex !important;
    align-items: center !important;
    gap: 6px !important;
    flex: 0 0 auto !important;
    padding: 8px 11px !important;
    border: 1px solid #cfe0f4 !important;
    border-radius: 999px !important;
    background: #ffffff !important;
    color: #16345d !important;
    font-size: 8px !important;
    line-height: 1 !important;
    font-weight: 800 !important;
    white-space: nowrap !important;
}

/* Keep section spacing tight and consistent. */
#course-buy-modal .course-buy-section-heading {
    margin-top: 4px !important;
    margin-bottom: 0 !important;
}

#course-buy-modal .course-buy-section-heading strong {
    color: #0d2340 !important;
    font-weight: 800 !important;
}

#course-buy-modal .course-buy-section-heading small {
    color: #000000 !important;
}

/* Selected course must remain readable on one/two lines. */
#course-buy-modal .course-buy-selected {
    display: flex !important;
    flex-direction: column !important;
    align-items: flex-start !important;
    gap: 3px !important;
    min-height: 52px !important;
    box-sizing: border-box !important;
}

#course-buy-modal .course-buy-selected span {
    color: #000000 !important;
    font-size: 8px !important;
    font-weight: 600 !important;
}

#course-buy-modal .course-buy-selected strong {
    color: #0d2340 !important;
    font-size: 11px !important;
    line-height: 1.35 !important;
    font-weight: 800 !important;
}

/* Inputs: balanced height and clear focus. */
#course-buy-modal .course-buy-dialog label {
    color: #000000 !important;
    font-size: 10px !important;
    font-weight: 700 !important;
}

#course-buy-modal .course-buy-dialog input[type="text"],
#course-buy-modal .course-buy-dialog input[type="email"],
#course-buy-modal .course-buy-dialog input[type="tel"],
#course-buy-modal .course-buy-dialog select {
    min-height: 44px !important;
    box-sizing: border-box !important;
    border-radius: 11px !important;
    font-size: 11px !important;
}

#course-buy-modal .course-buy-grid {
    gap: 10px 12px !important;
}

/* Summary should read like an order total, not another field. */
#course-buy-modal .course-buy-summary-card {
    padding: 12px 14px !important;
    border-radius: 13px !important;
}

#course-buy-modal .course-buy-summary-row {
    padding: 4px 0 !important;
}

#course-buy-modal .course-buy-summary-row span {
    color: #000000 !important;
    font-size: 9px !important;
}

#course-buy-modal .course-buy-summary-row strong {
    color: #0d2340 !important;
    font-size: 11px !important;
}

#course-buy-modal .course-buy-summary-total strong {
    color: #071b34 !important;
    font-size: 20px !important;
    font-weight: 800 !important;
}

@media (max-width: 700px) {
    #course-buy-modal .course-buy-dialog {
        width: calc(100vw - 20px) !important;
        max-width: calc(100vw - 20px) !important;
        max-height: calc(100vh - 20px) !important;
        border-radius: 19px !important;
    }

    #course-buy-modal .course-buy-header {
        min-height: 88px !important;
        padding: 15px 52px 13px 15px !important;
    }

    #course-buy-modal .course-buy-header .course-modal-icon {
        width: 44px !important;
        height: 44px !important;
        flex-basis: 44px !important;
    }

    #course-buy-modal .course-buy-header .course-modal-title h2 {
        font-size: 20px !important;
    }

    #course-buy-modal .course-buy-dialog > form {
        max-height: calc(100% - 88px) !important;
        padding: 14px 15px 17px !important;
    }

    #course-buy-modal .course-buy-price-card {
        min-height: 86px !important;
        padding: 15px !important;
    }

    #course-buy-modal #buy-summary-fee {
        font-size: 27px !important;
    }
}

@media (max-width: 480px) {
    #course-buy-modal .course-buy-dialog {
        width: calc(100vw - 12px) !important;
        max-width: calc(100vw - 12px) !important;
        max-height: calc(100vh - 12px) !important;
        border-radius: 17px !important;
    }

    #course-buy-modal .course-buy-header {
        padding: 13px 49px 12px 13px !important;
    }

    #course-buy-modal .course-buy-header .course-modal-title h2 {
        font-size: 19px !important;
    }

    #course-buy-modal .course-buy-subtitle {
        font-size: 9px !important;
    }

    #course-buy-modal .course-buy-dialog > form {
        max-height: calc(100% - 84px) !important;
        padding: 12px 12px 14px !important;
    }

    #course-buy-modal .course-buy-price-card {
        align-items: flex-start !important;
        flex-direction: column !important;
        gap: 9px !important;
        min-height: 0 !important;
        padding: 14px !important;
    }

    #course-buy-modal .course-buy-secure-badge {
        align-self: flex-start !important;
    }
}


/* =========================================================
   MOBILE COURSE POPUP - CONTENT SCROLL ONLY
   Existing layout, colors, sizes, buttons and functionality
   are preserved. The header/buttons stay visible while the
   course content below them becomes the scrollable area.
   ========================================================= */

@media (max-width:850px), (hover: none) and (pointer: coarse), (orientation: landscape) and (max-width:1100px) and (max-height:700px) {

    /* The popup itself becomes the single vertical scroll area. */
    .course-content-panel.mobile-open {
        overflow-y: auto !important;
        overflow-x: hidden !important;
        -webkit-overflow-scrolling: touch !important;
        touch-action: pan-y !important;
        overscroll-behavior-y: contain !important;
        scrollbar-width: thin !important;
    }

    /*
     * Keep the course title + Live/Video/Buy buttons visible.
     * Existing design is preserved; only the header is made sticky.
     */
    .course-content-panel.mobile-open .course-content-header {
        position: sticky !important;
        top: 0 !important;
        z-index: 30 !important;
        flex: 0 0 auto !important;
        background: #ffffff !important;
    }

    /*
     * Course information should be part of the popup scroll,
     * not a second small scroll box.
     */
    .course-content-panel.mobile-open .course-info {
        flex: 0 0 auto !important;
        max-height: none !important;
        overflow: visible !important;
    }

    /*
     * Let the mode content grow naturally so the popup can scroll
     * through the complete PDF/video area.
     */
    .course-content-panel.mobile-open #course-mode-content {
        flex: 0 0 auto !important;
        min-height: 0 !important;
        overflow: visible !important;
        display: block !important;
    }

    /*
     * Live/PDF mode:
     * the PDF viewer becomes normal flowing content inside the popup.
     * This removes the small nested scroll area on mobile.
     */
    .course-content-panel.mobile-open .course-viewer {
        flex: 0 0 auto !important;
        width: 100% !important;
        height: auto !important;
        min-height: 0 !important;
        max-height: none !important;
        overflow: visible !important;
        touch-action: auto !important;
    }

    .course-content-panel.mobile-open .course-pdf-pages {
        overflow: visible !important;
    }

    /*
     * Video mode:
     * playlist and player remain exactly as designed, but the popup
     * can scroll from the playlist down to the full video player.
     */
    .course-content-panel.mobile-open .video-mode-content,
    .course-content-panel.mobile-open .video-learning-area {
        flex: 0 0 auto !important;
        min-height: 0 !important;
        overflow: visible !important;
    }

    /*
     * Keep the existing lesson list independently usable when it
     * has more lessons than the visible playlist height.
     */
    .course-content-panel.mobile-open .video-playlist-panel,
    .course-content-panel.mobile-open .video-playlist {
        -webkit-overflow-scrolling: touch !important;
        touch-action: pan-y !important;
    }
}


/* =========================================================
   MOBILE BUY VIDEO COURSE POPUP - OVERLAP FIX ONLY
   Desktop design and all existing functionality are untouched.
   ========================================================= */

@media (max-width: 560px) {

    /* Keep the existing header layout, but give its text a stable height. */
    #course-buy-modal .course-buy-header {
        align-items: flex-start !important;
        min-height: 0 !important;
    }

    #course-buy-modal .course-buy-header .course-modal-title {
        min-width: 0 !important;
        flex: 1 1 auto !important;
    }

    #course-buy-modal .course-buy-header .course-buy-subtitle {
        display: block !important;
        height: auto !important;
        max-height: none !important;
        overflow: visible !important;
        line-height: 1.35 !important;
    }

    /* Give the price card enough vertical space for all its own content. */
    #course-buy-modal .course-buy-price-card {
        min-height: 96px !important;
        height: auto !important;
        box-sizing: border-box !important;
        display: grid !important;
        grid-template-columns: minmax(0, 1fr) auto !important;
        align-items: center !important;
        gap: 10px !important;
        padding: 13px 12px 15px !important;
        overflow: visible !important;
    }

    #course-buy-modal .course-buy-price-copy {
        min-width: 0 !important;
        overflow: visible !important;
    }

    #course-buy-modal #buy-summary-fee {
        display: block !important;
        line-height: 1.05 !important;
        margin: 2px 0 0 !important;
    }

    #course-buy-modal .course-buy-price-note {
        display: block !important;
        margin-top: 4px !important;
        line-height: 1.25 !important;
    }

    /*
     * The earlier premium popup style added the same validity text
     * with ::after. Hide that duplicate on mobile so it cannot overlap
     * the "01 Choose your course" section.
     */
    #course-buy-modal .course-buy-price-card::after {
        content: none !important;
        display: none !important;
    }

    #course-buy-modal .course-buy-secure-badge {
        position: static !important;
        align-self: center !important;
        margin: 0 !important;
        white-space: nowrap !important;
        transform: none !important;
    }

    /*
     * Force the next section to begin after the complete price card.
     * No other section styling is changed.
     */
    #course-buy-modal .course-buy-price-card + .course-buy-section-heading {
        position: static !important;
        clear: both !important;
        margin-top: 2px !important;
    }
}

@media (max-width: 380px) {
    #course-buy-modal .course-buy-price-card {
        grid-template-columns: minmax(0, 1fr) auto !important;
        gap: 7px !important;
        padding-left: 11px !important;
        padding-right: 10px !important;
    }

    #course-buy-modal .course-buy-secure-badge {
        padding: 6px 7px !important;
        font-size: 7px !important;
    }
}


/* =========================================================
   PKTechTrainings Courses - Device Compatibility Layer
   Presentation/interaction hardening only.
   ========================================================= */

/* Prevent text/images from escaping narrow containers. */
.courses-page,
.courses-page * {
    box-sizing: border-box;
}

.courses-page img,
.courses-page canvas,
.courses-page iframe,
.courses-page video {
    max-width: 100%;
}

/* Better touch behavior without changing the visual design. */
.course-button,
.course-category-header,
.course-mode-button,
.course-enquire,
.course-modal-close,
.course-modal-submit,
.course-radio-option {
    -webkit-tap-highlight-color: transparent;
    touch-action: manipulation;
}

/* Respect safe areas on modern phones. */
@supports (padding: max(0px)) {
    .course-modal {
        padding-left: max(8px, env(safe-area-inset-left)) !important;
        padding-right: max(8px, env(safe-area-inset-right)) !important;
        padding-bottom: max(8px, env(safe-area-inset-bottom)) !important;
    }
}

/* Reduce accidental horizontal page movement. */
html,
body {
    overscroll-behavior-x: none;
}

/* Accessible focus indication. */
.course-button:focus-visible,
.course-category-header:focus-visible,
.course-mode-button:focus-visible,
.course-enquire:focus-visible,
.course-modal-close:focus-visible,
.course-modal-submit:focus-visible,
.course-buy-dialog input:focus-visible,
.course-buy-dialog select:focus-visible,
.video-access-dialog input:focus-visible,
.video-access-dialog select:focus-visible {
    outline: 3px solid rgba(23,105,255,.24) !important;
    outline-offset: 2px !important;
}

/* Do not let long course titles break the mobile modal. */
.course-content-title h2,
.course-buy-header .course-modal-title h2,
.course-buy-selected strong,
.video-access-head .course-modal-title h2 {
    overflow-wrap: anywhere;
}

/* Mobile drawer: keep the existing sticky header and make the content
   easier to scroll on iOS/Android without changing dimensions. */
@media (max-width:850px), (hover: none) and (pointer: coarse), (orientation: landscape) and (max-width:1100px) and (max-height:700px) {
    .course-content-panel.mobile-open {
        overscroll-behavior: contain !important;
        -webkit-overflow-scrolling: touch !important;
    }

    .course-content-panel.mobile-open .course-content-header {
        backdrop-filter: blur(10px);
        -webkit-backdrop-filter: blur(10px);
    }

    .course-content-panel.mobile-open .course-viewer,
    .course-content-panel.mobile-open .video-mode-content,
    .course-content-panel.mobile-open .video-lessons,
    .course-content-panel.mobile-open .lesson-list,
    .course-content-panel.mobile-open .course-lessons {
        -webkit-overflow-scrolling: touch !important;
    }
}

/* On very small screens keep form controls fully visible. */
@media (max-width: 380px) {
    .course-buy-dialog > form,
    .video-access-dialog > form {
        padding-left: 12px !important;
        padding-right: 12px !important;
    }

    .course-buy-dialog input[type="text"],
    .course-buy-dialog input[type="email"],
    .course-buy-dialog input[type="tel"],
    .course-buy-dialog select,
    .video-access-dialog input[type="text"],
    .video-access-dialog input[type="email"] {
        min-width: 0;
        width: 100%;
    }
}


/* =========================================================
   DESKTOP COURSE WORKSPACE
   Left course explorer stays fixed in the viewport.
   Right course content becomes the main scroll area.
   Mobile/tablet presentation is intentionally untouched.
   ========================================================= */

@media (min-width: 851px) {

    .courses-page {
        height: calc(100dvh - 100px) !important;
        min-height: 0 !important;
        overflow: hidden !important;
    }

    .courses-layout {
        height: 100% !important;
        min-height: 0 !important;
        align-items: stretch !important;
        overflow: hidden !important;
    }

    /* Left: fixed/stationary course explorer */
    .courses-sidebar {
        position: relative !important;
        top: auto !important;
        height: 100% !important;
        max-height: 100% !important;
        min-height: 0 !important;
        overflow-y: auto !important;
        overflow-x: hidden !important;
        overscroll-behavior: contain !important;
        -webkit-overflow-scrolling: touch !important;
        scrollbar-width: thin !important;
    }

    /* Right: independently scrollable course workspace */
    .course-content-panel {
        height: 100% !important;
        max-height: 100% !important;
        min-height: 0 !important;
        overflow-y: auto !important;
        overflow-x: hidden !important;
        overscroll-behavior-y: contain !important;
        -webkit-overflow-scrolling: touch !important;
        scrollbar-width: thin !important;
        scroll-behavior: smooth;
    }

    /* Keep the selected-course header visible while the right side scrolls */
    .course-content-panel:not(.mobile-open) .course-content-header {
        position: sticky !important;
        top: 0 !important;
        z-index: 40 !important;
        background: rgba(255,255,255,.97) !important;
        backdrop-filter: blur(10px) !important;
        -webkit-backdrop-filter: blur(10px) !important;
    }
}


/* =========================================================
   DESKTOP WORKSPACE - FOOTER OVERLAP FIX
   The course workspace gets a bounded height, while the
   page itself remains in normal document flow so the footer
   stays below the workspace instead of covering it.
   Mobile/tablet behavior is untouched.
   ========================================================= */

@media (min-width: 851px) {

    /* Cancel the earlier full-page clipping rule. */
    .courses-page {
        height: auto !important;
        min-height: 0 !important;
        overflow: visible !important;
    }

    /*
     * The two-column workspace itself owns the viewport-sized
     * working area. Footer remains outside this block.
     */
    .courses-layout {
        height: calc(100dvh - 120px) !important;
        min-height: 560px !important;
        align-items: stretch !important;
        overflow: hidden !important;
    }

    /* Left explorer: stationary within the workspace. */
    .courses-sidebar {
        position: relative !important;
        top: auto !important;
        height: 100% !important;
        max-height: 100% !important;
        min-height: 0 !important;
        overflow-y: auto !important;
        overflow-x: hidden !important;
        overscroll-behavior: contain !important;
    }

    /* Right content: independent scroll container. */
    .course-content-panel {
        height: 100% !important;
        max-height: 100% !important;
        min-height: 0 !important;
        overflow-y: auto !important;
        overflow-x: hidden !important;
        overscroll-behavior-y: contain !important;
        -webkit-overflow-scrolling: touch !important;
    }

    /*
     * Keep the course header visible only inside the right
     * scroll container. It no longer conflicts with the footer.
     */
    .course-content-panel:not(.mobile-open) .course-content-header {
        position: sticky !important;
        top: 0 !important;
        z-index: 40 !important;
        background: rgba(255,255,255,.98) !important;
        backdrop-filter: blur(10px) !important;
        -webkit-backdrop-filter: blur(10px) !important;
    }

    /*
     * Give the scrollable right panel a little bottom breathing
     * room so the last PDF/video content is never visually hidden.
     */
    .course-content-panel:not(.mobile-open) {
        scroll-padding-bottom: 24px !important;
    }

    .course-content-panel:not(.mobile-open)::after {
        content: "";
        display: block;
        height: 24px;
        flex: 0 0 24px;
    }
}


/* =========================================================
   DESKTOP WORKSPACE - SINGLE MAIN SCROLLER
   Remove nested PDF/video scrollbars.
   Remove excess space directly below the course header.
   Desktop only; mobile/tablet styles remain unchanged.
   ========================================================= */

@media (min-width: 851px) {

    /*
     * The right course panel owns the single vertical scrollbar.
     * PDF/video components flow naturally inside it.
     */
    .course-content-panel {
        overflow-y: auto !important;
        overflow-x: hidden !important;
    }

    .course-content-panel .course-viewer {
        height: auto !important;
        min-height: 0 !important;
        max-height: none !important;
        overflow: visible !important;
        -webkit-overflow-scrolling: auto !important;
        touch-action: auto !important;
    }

    .course-content-panel .video-mode-content {
        height: auto !important;
        min-height: 0 !important;
        max-height: none !important;
        overflow: visible !important;
    }

    .course-content-panel .video-learning-area {
        height: auto !important;
        min-height: 0 !important;
        overflow: visible !important;
    }

    /*
     * Keep the 60-lesson playlist usable without creating another
     * page-level scrollbar. The lesson list itself can still scroll.
     */
    .course-content-panel .video-playlist-panel {
        overflow: hidden !important;
    }

    .course-content-panel .video-lessons,
    .course-content-panel .lesson-list,
    .course-content-panel .course-lessons {
        overflow-y: auto !important;
        overflow-x: hidden !important;
    }

    /*
     * The course header is sticky. Remove the visual gap below it
     * so the course description starts immediately underneath.
     */
    .course-content-panel .course-content-header {
        margin-bottom: 0 !important;
        box-shadow: none !important;
    }

    .course-content-panel .course-info {
        padding-top: 8px !important;
        margin-top: 0 !important;
    }

    .course-content-panel #course-mode-content {
        margin-top: 0 !important;
        padding-top: 0 !important;
    }

    /*
     * Tighten the PDF area directly after the information section.
     */
    .course-content-panel .course-viewer {
        margin-top: 0 !important;
    }

    .course-content-panel .course-pdf-pages {
        padding-top: 8px !important;
    }
}


/* =========================================================
   DESKTOP VIDEO WORKSPACE
   Video lesson list scrolls independently.
   Current video/player stays visible while the lesson list
   is being browsed.
   Mobile/tablet behavior is untouched.
   ========================================================= */

@media (min-width: 851px) {

    /* The video workspace itself stays compact inside the
       right-side main scroll container. */
    .course-content-panel .video-learning-area {
        display: grid !important;
        grid-template-columns: minmax(260px, 34%) minmax(0, 1fr) !important;
        align-items: start !important;
        gap: 14px !important;
        height: auto !important;
        min-height: 0 !important;
        overflow: visible !important;
        padding: 14px !important;
    }

    /* LEFT: lesson list gets its own scrollbar */
    .course-content-panel .video-playlist-panel {
        height: calc(100dvh - 285px) !important;
        min-height: 360px !important;
        max-height: 620px !important;
        display: flex !important;
        flex-direction: column !important;
        overflow: hidden !important;
        position: relative !important;
    }

    .course-content-panel .video-playlist {
        flex: 1 1 auto !important;
        min-height: 0 !important;
        height: auto !important;
        max-height: none !important;
        overflow-y: auto !important;
        overflow-x: hidden !important;
        overscroll-behavior: contain !important;
        -webkit-overflow-scrolling: touch !important;
        scrollbar-width: thin !important;
    }

    /* RIGHT: current video stays visible while the lesson list
       is scrolled. It moves with the video workspace rather than
       creating another full-height page scrollbar. */
    .course-content-panel .video-player-panel {
        position: sticky !important;
        top: 168px !important;
        align-self: start !important;
        height: calc(100dvh - 285px) !important;
        min-height: 360px !important;
        max-height: 620px !important;
        overflow: hidden !important;
        z-index: 10 !important;
    }

    .course-content-panel .video-player {
        flex: 1 1 auto !important;
        min-height: 0 !important;
        height: auto !important;
        aspect-ratio: auto !important;
        overflow: hidden !important;
    }

    .course-content-panel .video-embed {
        width: 100% !important;
        height: 100% !important;
        min-height: 0 !important;
    }

    /*
     * Keep the player heading visible as part of the sticky
     * player card and make the video fill the remaining space.
     */
    .course-content-panel .video-player-heading {
        flex: 0 0 auto !important;
    }

    .course-content-panel .video-player-footer {
        flex: 0 0 auto !important;
    }
}


/* =========================================================
   DESKTOP - REMOVE EXTRA SPACE BELOW SITE HEADER
   Only the desktop top spacing is tightened.
   Mobile/tablet layout remains unchanged.
   ========================================================= */

@media (min-width: 851px) {

    .courses-page {
        margin-top: 0 !important;
        padding-top: 0 !important;
    }

    .courses-layout {
        margin-top: 0 !important;
        padding-top: 0 !important;
    }

    /* Pull the course workspace directly under the site header. */
    .courses-page > .courses-layout,
    .courses-page .courses-layout {
        transform: none !important;
    }
}


/* =========================================================
   DESKTOP - REMOVE THE ACTUAL CONTENT SECTION TOP GAP
   The gap is coming from the generic .content/.container
   layout outside the Courses component. Override only this
   page's direct content wrapper on desktop.
   ========================================================= */

@media (min-width: 851px) {

    .courses-page > .content {
        margin-top: 0 !important;
        padding-top: 0 !important;
    }

    .courses-page > .content > .container {
        margin-top: 0 !important;
        padding-top: 0 !important;
    }

    .courses-page > .content > .container > .courses-layout {
        margin-top: 0 !important;
        padding-top: 0 !important;
    }
}


/* =========================================================
   DESKTOP VIDEO AREA - FIT INSIDE AVAILABLE WORKSPACE
   Keeps the lesson list and player completely inside the
   visible course-content section.
   ========================================================= */

@media (min-width: 851px) {

    /*
     * The course header + course information consume part of the
     * right workspace. Give Video Mode a bounded height that scales
     * with the viewport instead of extending below the section.
     */
    .course-content-panel .video-learning-area {
        height: clamp(360px, 52vh, 480px) !important;
        min-height: 360px !important;
        max-height: 480px !important;
        box-sizing: border-box !important;
        overflow: visible !important;
        align-items: stretch !important;
    }

    /* Lesson list panel exactly matches the available video height. */
    .course-content-panel .video-playlist-panel {
        height: 100% !important;
        min-height: 0 !important;
        max-height: none !important;
        box-sizing: border-box !important;
        overflow: hidden !important;
    }

    .course-content-panel .video-playlist {
        flex: 1 1 auto !important;
        min-height: 0 !important;
        max-height: none !important;
        height: 0 !important;
        overflow-y: auto !important;
        overflow-x: hidden !important;
        box-sizing: border-box !important;
        overscroll-behavior: contain !important;
        -webkit-overflow-scrolling: touch !important;
    }

    /* Current player stays within the same exact vertical bounds. */
    .course-content-panel .video-player-panel {
        height: 100% !important;
        min-height: 0 !important;
        max-height: none !important;
        box-sizing: border-box !important;
        overflow: hidden !important;
        position: sticky !important;
        top: 0 !important;
        align-self: stretch !important;
    }

    .course-content-panel .video-player {
        flex: 1 1 auto !important;
        min-height: 0 !important;
        height: 0 !important;
        max-height: none !important;
        box-sizing: border-box !important;
        overflow: hidden !important;
    }

    .course-content-panel .video-embed {
        width: 100% !important;
        height: 100% !important;
        min-height: 0 !important;
        max-height: 100% !important;
    }

    /*
     * Keep the workspace itself from exposing a second scrollbar at
     * the lesson/player block while still allowing the main right
     * panel to scroll when the overall course page has more content.
     */
    .course-content-panel .video-learning-area {
        scroll-margin-top: 8px !important;
    }
}


/* =========================================================
   FINAL RESPONSIVE ARCHITECTURE - ONE COURSE SCROLLER
   ---------------------------------------------------------
   The course-content-panel is the ONLY vertical scroll
   container for both desktop and mobile.
   ========================================================= */

.course-content-panel .course-info,
.course-content-panel #course-mode-content,
.course-content-panel .course-viewer,
.course-content-panel .course-pdf-pages,
.course-content-panel .video-mode-content,
.course-content-panel .video-learning-area,
.course-content-panel .video-playlist-panel,
.course-content-panel .video-playlist,
.course-content-panel .video-lessons,
.course-content-panel .lesson-list,
.course-content-panel .course-lessons,
.course-content-panel .video-player-panel {
    overflow-y: visible !important;
    overflow-x: visible !important;
    max-height: none !important;
    -webkit-overflow-scrolling: auto !important;
    overscroll-behavior: auto !important;
}

@media (min-width:851px) {
    .course-content-panel {
        overflow-y: auto !important;
        overflow-x: hidden !important;
        min-width: 0 !important;
        min-height: 0 !important;
        box-sizing: border-box !important;
        -webkit-overflow-scrolling: auto !important;
    }

    .course-content-panel .course-content-header {
        position: sticky !important;
        top: 0 !important;
        z-index: 40 !important;
        background: #ffffff !important;
    }

    .course-content-panel .course-info,
    .course-content-panel #course-mode-content,
    .course-content-panel .course-viewer,
    .course-content-panel .course-pdf-pages,
    .course-content-panel .video-mode-content,
    .course-content-panel .video-learning-area {
        height: auto !important;
        min-height: 0 !important;
        max-height: none !important;
        overflow: visible !important;
    }

    .course-content-panel .course-viewer {
        display: block !important;
        width: 100% !important;
        touch-action: auto !important;
    }

    .course-content-panel .video-learning-area {
        display: grid !important;
        grid-template-columns: minmax(260px,34%) minmax(0,1fr) !important;
        align-items: start !important;
        gap: 14px !important;
        padding: 14px !important;
        box-sizing: border-box !important;
    }

    .course-content-panel .video-playlist-panel {
        display: flex !important;
        flex-direction: column !important;
        height: auto !important;
        min-height: 0 !important;
        max-height: none !important;
        overflow: visible !important;
        position: static !important;
    }

    .course-content-panel .video-playlist {
        display: block !important;
        flex: none !important;
        width: 100% !important;
        height: auto !important;
        min-height: 0 !important;
        max-height: none !important;
        overflow: visible !important;
        padding: 8px !important;
    }

    .course-content-panel .video-lessons,
    .course-content-panel .lesson-list,
    .course-content-panel .course-lessons {
        height: auto !important;
        min-height: 0 !important;
        max-height: none !important;
        overflow: visible !important;
    }

    .course-content-panel .video-player-panel {
        position: static !important;
        height: auto !important;
        min-height: 0 !important;
        max-height: none !important;
        overflow: hidden !important;
        align-self: start !important;
    }

    .course-content-panel .video-player {
        width: 100% !important;
        height: auto !important;
        min-height: 300px !important;
        max-height: none !important;
        aspect-ratio: 16 / 9 !important;
        overflow: hidden !important;
    }

    .course-content-panel .video-embed {
        width: 100% !important;
        height: 100% !important;
        min-height: 300px !important;
        max-height: none !important;
    }
}

@media (max-width:850px), (hover: none) and (pointer: coarse),
       (orientation: landscape) and (max-width:1100px) and (max-height:700px) {

    .course-content-panel.mobile-open {
        display: flex !important;
        position: fixed !important;
        left: 10px !important;
        right: 10px !important;
        top: 78px !important;
        bottom: 10px !important;
        width: auto !important;
        height: auto !important;
        max-width: none !important;
        max-height: none !important;
        min-height: 0 !important;
        flex-direction: column !important;
        overflow-y: auto !important;
        overflow-x: hidden !important;
        -webkit-overflow-scrolling: touch !important;
        overscroll-behavior-y: contain !important;
        touch-action: pan-y !important;
        box-sizing: border-box !important;
        z-index: 9999 !important;
    }

    .course-content-panel.mobile-open .course-selection-message {
        display: none !important;
    }

    .course-content-panel.mobile-open .course-content-header {
        position: sticky !important;
        top: 0 !important;
        z-index: 40 !important;
        flex: 0 0 auto !important;
        background: #ffffff !important;
    }

    .course-content-panel.mobile-open .course-info,
    .course-content-panel.mobile-open #course-mode-content,
    .course-content-panel.mobile-open .course-viewer,
    .course-content-panel.mobile-open .course-pdf-pages,
    .course-content-panel.mobile-open .video-mode-content,
    .course-content-panel.mobile-open .video-learning-area {
        flex: none !important;
        height: auto !important;
        min-height: 0 !important;
        max-height: none !important;
        overflow: visible !important;
    }

    .course-content-panel.mobile-open .course-viewer {
        display: block !important;
        width: 100% !important;
        touch-action: auto !important;
    }

    .course-content-panel.mobile-open .course-pdf-pages {
        display: flex !important;
        flex-direction: column !important;
        width: 100% !important;
    }

    .course-content-panel.mobile-open .video-learning-area {
        display: grid !important;
        grid-template-columns: 1fr !important;
        gap: 10px !important;
        padding: 10px !important;
        align-items: start !important;
    }

    .course-content-panel.mobile-open .video-playlist-panel {
        display: flex !important;
        flex-direction: column !important;
        width: 100% !important;
        height: auto !important;
        min-height: 0 !important;
        max-height: none !important;
        overflow: visible !important;
        position: static !important;
    }

    .course-content-panel.mobile-open .video-playlist {
        display: block !important;
        flex: none !important;
        width: 100% !important;
        height: auto !important;
        min-height: 0 !important;
        max-height: none !important;
        overflow: visible !important;
        padding: 8px !important;
    }

    .course-content-panel.mobile-open .video-lessons,
    .course-content-panel.mobile-open .lesson-list,
    .course-content-panel.mobile-open .course-lessons {
        height: auto !important;
        min-height: 0 !important;
        max-height: none !important;
        overflow: visible !important;
    }

    .course-content-panel.mobile-open .video-player-panel {
        position: static !important;
        width: 100% !important;
        height: auto !important;
        min-height: 0 !important;
        max-height: none !important;
        overflow: hidden !important;
        align-self: start !important;
    }

    .course-content-panel.mobile-open .video-player {
        width: 100% !important;
        height: auto !important;
        min-height: 220px !important;
        max-height: none !important;
        aspect-ratio: 16 / 9 !important;
        overflow: hidden !important;
    }

    .course-content-panel.mobile-open .video-embed {
        width: 100% !important;
        height: 100% !important;
        min-height: 220px !important;
        max-height: none !important;
    }

    .course-content-panel.mobile-open > .mobile-course-close,
    .course-content-panel.mobile-open .mobile-course-close {
        display: flex !important;
        position: absolute !important;
        top: 8px !important;
        right: 8px !important;
        z-index: 100001 !important;
        pointer-events: auto !important;
    }

    body.course-drawer-open {
        overflow: hidden !important;
        overscroll-behavior: none !important;
    }

    .course-mobile-overlay.active {
        display: block !important;
    }
}

@media (orientation: landscape) and (max-width:1100px) and (max-height:700px) {
    .course-content-panel.mobile-open {
        top: 70px !important;
        bottom: 8px !important;
    }

    .course-content-panel.mobile-open .course-content-header {
        flex-direction: row !important;
        align-items: center !important;
        padding: 10px 52px 10px 14px !important;
        gap: 8px !important;
    }

    .course-content-panel.mobile-open .course-content-title {
        flex: 1 1 auto !important;
        min-width: 0 !important;
        padding-right: 0 !important;
    }

    .course-content-panel.mobile-open .course-content-title h2 {
        font-size: 16px !important;
        line-height: 1.2 !important;
        white-space: nowrap !important;
        overflow: hidden !important;
        text-overflow: ellipsis !important;
    }

    .course-content-panel.mobile-open .course-header-actions {
        flex: 0 0 auto !important;
        width: auto !important;
        display: grid !important;
        grid-template-columns: repeat(2,minmax(125px,1fr)) !important;
        gap: 6px !important;
    }

    .course-content-panel.mobile-open .course-mode-button {
        width: auto !important;
        min-width: 0 !important;
        min-height: 38px !important;
        padding: 8px 10px !important;
        font-size: 10px !important;
        white-space: nowrap !important;
    }

    .course-content-panel.mobile-open .course-enquire {
        grid-column: 1 / -1 !important;
        width: 100% !important;
        min-height: 36px !important;
        padding: 7px 10px !important;
        font-size: 10px !important;
    }
}

/* =========================================================
   PKTECHTRAININGS - MOBILE SCROLL / CLOSE BUTTON FIX
   ---------------------------------------------------------
   This is the ONLY final mobile scroll correction.
   Desktop styles and all existing functionality remain intact.

   Mobile behavior:
   - .course-content-panel is the single vertical scroller.
   - Header is sticky.
   - Close button lives inside the sticky header.
   - PDF/video/lesson containers do not create nested vertical
     scrollbars.
   ========================================================= */

@media (max-width:850px), (hover: none) and (pointer: coarse),
       (orientation: landscape) and (max-width:1100px) and (max-height:700px) {

    /* The popup itself owns the vertical scroll. */
    .course-content-panel.mobile-open {
        display: flex !important;
        position: fixed !important;
        left: 10px !important;
        right: 10px !important;
        top: 78px !important;
        bottom: 10px !important;
        width: auto !important;
        height: auto !important;
        max-width: none !important;
        max-height: none !important;
        min-height: 0 !important;

        flex-direction: column !important;

        overflow-y: auto !important;
        overflow-x: hidden !important;
        -webkit-overflow-scrolling: touch !important;
        overscroll-behavior-y: contain !important;
        touch-action: pan-y !important;
        scrollbar-width: thin !important;

        box-sizing: border-box !important;
        z-index: 9999 !important;
    }

    /*
     * The header is part of the popup but remains visible while
     * the popup's single scrollbar moves through the content.
     */
    .course-content-panel.mobile-open .course-content-header {
        position: sticky !important;
        top: 0 !important;
        z-index: 100 !important;
        flex: 0 0 auto !important;
        background: #ffffff !important;
    }

    /*
     * The close button is now INSIDE the sticky header.
     * Therefore it stays at the top while the course content scrolls.
     */
    .course-content-panel.mobile-open .course-content-header .mobile-course-close {
        display: flex !important;
        position: absolute !important;
        top: 10px !important;
        right: 10px !important;
        width: 34px !important;
        height: 34px !important;
        align-items: center !important;
        justify-content: center !important;

        border: 1px solid #d7e2f0 !important;
        border-radius: 50% !important;
        background: #ffffff !important;
        color: #102342 !important;
        font-size: 22px !important;
        line-height: 1 !important;
        font-weight: 700 !important;

        cursor: pointer !important;
        z-index: 101 !important;
        pointer-events: auto !important;
        touch-action: manipulation !important;
        -webkit-tap-highlight-color: transparent !important;
        box-shadow: 0 2px 8px rgba(20,50,90,.12) !important;
    }

    /*
     * Header already reserves space for the close button in the
     * existing portrait/landscape rules. Keep title from touching it.
     */
    .course-content-panel.mobile-open .course-content-title {
        min-width: 0 !important;
    }

    /*
     * ONE SCROLLER:
     * Every child below must contribute its natural height to the
     * popup. No child may capture the vertical scrollbar.
     */
    .course-content-panel.mobile-open .course-info,
    .course-content-panel.mobile-open #course-mode-content,
    .course-content-panel.mobile-open .course-viewer,
    .course-content-panel.mobile-open .course-pdf-pages,
    .course-content-panel.mobile-open .video-mode-content,
    .course-content-panel.mobile-open .video-learning-area,
    .course-content-panel.mobile-open .video-playlist-panel,
    .course-content-panel.mobile-open .video-playlist,
    .course-content-panel.mobile-open .video-lessons,
    .course-content-panel.mobile-open .lesson-list,
    .course-content-panel.mobile-open .course-lessons {
        flex: none !important;
        height: auto !important;
        min-height: 0 !important;
        max-height: none !important;
        overflow: visible !important;
        overflow-x: visible !important;
        overflow-y: visible !important;
        -webkit-overflow-scrolling: auto !important;
        overscroll-behavior: auto !important;
    }

    /*
     * PDF: let all rendered pages determine the popup height.
     * This is what makes long PDF content use the SAME scrollbar
     * as the rest of the mobile course content.
     */
    .course-content-panel.mobile-open .course-viewer {
        display: block !important;
        width: 100% !important;
        box-sizing: border-box !important;
        touch-action: auto !important;
    }

    .course-content-panel.mobile-open .course-pdf-pages {
        display: flex !important;
        flex-direction: column !important;
        align-items: center !important;
        width: 100% !important;
        box-sizing: border-box !important;
    }

    /*
     * Video: one natural-flow section. Playlist and player are both
     * part of the popup scroll rather than separate scroll boxes.
     */
    .course-content-panel.mobile-open .video-learning-area {
        display: grid !important;
        grid-template-columns: 1fr !important;
        gap: 10px !important;
        padding: 10px !important;
        align-items: start !important;
        box-sizing: border-box !important;
    }

    .course-content-panel.mobile-open .video-playlist-panel {
        display: flex !important;
        flex-direction: column !important;
        position: static !important;
        width: 100% !important;
        box-sizing: border-box !important;
    }

    .course-content-panel.mobile-open .video-playlist,
    .course-content-panel.mobile-open .video-lessons,
    .course-content-panel.mobile-open .lesson-list,
    .course-content-panel.mobile-open .course-lessons {
        width: 100% !important;
        box-sizing: border-box !important;
    }

    .course-content-panel.mobile-open .video-player-panel {
        position: static !important;
        width: 100% !important;
        height: auto !important;
        min-height: 0 !important;
        max-height: none !important;
        overflow: hidden !important;
        box-sizing: border-box !important;
    }

    .course-content-panel.mobile-open .video-player {
        width: 100% !important;
        height: auto !important;
        min-height: 220px !important;
        max-height: none !important;
        aspect-ratio: 16 / 9 !important;
        overflow: hidden !important;
        box-sizing: border-box !important;
    }

    .course-content-panel.mobile-open .video-embed {
        width: 100% !important;
        height: 100% !important;
        min-height: 220px !important;
        max-height: none !important;
        box-sizing: border-box !important;
    }
}

/* Landscape phone: keep the existing compact header arrangement. */
@media (orientation: landscape) and (max-width:1100px) and (max-height:700px) {
    .course-content-panel.mobile-open {
        top: 70px !important;
        bottom: 8px !important;
    }
}

/* =========================================================
   FINAL MOBILE FIX - OTP SUBMIT + VIDEO PLAYLIST
   ---------------------------------------------------------
   Scope is mobile/tablet only.
   Desktop behavior is intentionally untouched.

   1) OTP submit button stays visible while the verification
      form scrolls, including when the mobile keyboard is open.
   2) Video player stays fixed/sticky while the lesson list
      keeps its own internal scrollbar, matching desktop.
   ========================================================= */

@media (max-width:850px), (hover: none) and (pointer: coarse),
       (orientation: landscape) and (max-width:1100px) and (max-height:700px) {

    /* ---------------- OTP SUBMIT BUTTON ---------------- */

    .video-access-dialog > form {
        position: relative !important;
        overflow-y: auto !important;
        overflow-x: hidden !important;
        -webkit-overflow-scrolling: touch !important;
        overscroll-behavior-y: contain !important;
    }

    .video-access-dialog #video-submit-button {
        position: sticky !important;
        bottom: 0 !important;
        z-index: 20 !important;
        display: block !important;
        width: 100% !important;
        box-sizing: border-box !important;
        margin-top: 4px !important;
        margin-bottom: 0 !important;
        background: #1769ff !important;
        box-shadow: 0 -8px 18px rgba(255,255,255,.96) !important;
    }

    /* ---------------- MOBILE VIDEO WORKSPACE ----------------
       Keep the player visible and give the lesson list its
       own compact scroll area, just like desktop. */

    .course-content-panel.mobile-open .video-learning-area {
        display: grid !important;
        grid-template-columns: 1fr !important;
        grid-template-areas:
            "player"
            "playlist" !important;
        gap: 10px !important;
        align-items: start !important;
        overflow: visible !important;
    }

    .course-content-panel.mobile-open .video-player-panel {
        grid-area: player !important;
        order: -1 !important;
        position: sticky !important;
        top: 140px !important;
        z-index: 60 !important;
        width: 100% !important;
        height: auto !important;
        min-height: 0 !important;
        max-height: none !important;
        overflow: hidden !important;
        align-self: start !important;
        background: #ffffff !important;
    }

    .course-content-panel.mobile-open .video-playlist-panel {
        grid-area: playlist !important;
        order: 0 !important;
        display: flex !important;
        flex-direction: column !important;
        width: 100% !important;
        height: 280px !important;
        min-height: 0 !important;
        max-height: 280px !important;
        overflow: hidden !important;
        position: relative !important;
        background: #ffffff !important;
    }

    .course-content-panel.mobile-open .video-playlist {
        flex: 1 1 auto !important;
        width: 100% !important;
        height: 0 !important;
        min-height: 0 !important;
        max-height: none !important;
        overflow-y: auto !important;
        overflow-x: hidden !important;
        -webkit-overflow-scrolling: touch !important;
        overscroll-behavior: contain !important;
        scrollbar-width: thin !important;
        box-sizing: border-box !important;
    }

    .course-content-panel.mobile-open .video-lessons,
    .course-content-panel.mobile-open .lesson-list,
    .course-content-panel.mobile-open .course-lessons {
        height: auto !important;
        min-height: 0 !important;
        max-height: none !important;
        overflow: visible !important;
    }

    .course-content-panel.mobile-open .video-player {
        width: 100% !important;
        height: auto !important;
        min-height: 220px !important;
        max-height: none !important;
        aspect-ratio: 16 / 9 !important;
        overflow: hidden !important;
        box-sizing: border-box !important;
    }

    .course-content-panel.mobile-open .video-embed {
        width: 100% !important;
        height: 100% !important;
        min-height: 220px !important;
        max-height: none !important;
        box-sizing: border-box !important;
    }
}

/* Portrait phones: the course header is taller because its
   action buttons are stacked. Keep the player below it. */
@media (max-width:850px) and (orientation: portrait) {
    .course-content-panel.mobile-open .video-player-panel {
        top: 140px !important;
    }
}

/* Small phones: slightly reduce the playlist height so the
   player and playlist fit comfortably together. */
@media (max-width:560px) and (orientation: portrait) {
    .course-content-panel.mobile-open .video-playlist-panel {
        height: 260px !important;
        max-height: 260px !important;
    }

    .course-content-panel.mobile-open .video-player {
        min-height: 190px !important;
    }

    .course-content-panel.mobile-open .video-embed {
        min-height: 190px !important;
    }
}

/* Landscape phones have a compact one-row course header. */
@media (orientation: landscape) and (max-width:1100px) and (max-height:700px) {
    .course-content-panel.mobile-open .video-player-panel {
        top: 70px !important;
    }

    .course-content-panel.mobile-open .video-playlist-panel {
        height: 220px !important;
        max-height: 220px !important;
    }
}

/* =========================================================
   FINAL MOBILE VIDEO LAYOUT - PLAYLIST MUST REMAIN VISIBLE
   ---------------------------------------------------------
   The previous mobile override placed the player first and the
   playlist below it. On short mobile viewports this made the
   playlist appear to be missing.

   Tablet / landscape mobile (601-850px): keep playlist + player
   side-by-side, matching the desktop learning workspace.

   Phone portrait (<=600px): show a compact scrollable playlist
   first, followed by the player. The playlist itself owns the
   lesson scrollbar.
   ========================================================= */

@media (min-width:601px) and (max-width:850px) {
    .course-content-panel.mobile-open .video-learning-area {
        display:grid !important;
        grid-template-columns:minmax(190px,34%) minmax(0,1fr) !important;
        grid-template-areas:"playlist player" !important;
        gap:10px !important;
        padding:10px !important;
        align-items:stretch !important;
        overflow:visible !important;
    }

    .course-content-panel.mobile-open .video-playlist-panel {
        grid-area:playlist !important;
        display:flex !important;
        flex-direction:column !important;
        width:100% !important;
        height:calc(100vh - 170px) !important;
        min-height:260px !important;
        max-height:430px !important;
        overflow:hidden !important;
        position:sticky !important;
        top:78px !important;
        box-sizing:border-box !important;
    }

    .course-content-panel.mobile-open .video-playlist {
        flex:1 1 auto !important;
        height:0 !important;
        min-height:0 !important;
        max-height:none !important;
        overflow-y:auto !important;
        overflow-x:hidden !important;
        -webkit-overflow-scrolling:touch !important;
        overscroll-behavior:contain !important;
        scrollbar-width:thin !important;
        padding:8px !important;
    }

    .course-content-panel.mobile-open .video-player-panel {
        grid-area:player !important;
        order:0 !important;
        position:sticky !important;
        top:78px !important;
        width:100% !important;
        height:calc(100vh - 170px) !important;
        min-height:260px !important;
        max-height:430px !important;
        overflow:hidden !important;
        align-self:start !important;
        box-sizing:border-box !important;
    }

    .course-content-panel.mobile-open .video-player {
        width:100% !important;
        height:auto !important;
        min-height:0 !important;
        aspect-ratio:16/9 !important;
        overflow:hidden !important;
        box-sizing:border-box !important;
    }
}

@media (max-width:600px) {
    .course-content-panel.mobile-open .video-learning-area {
        display:flex !important;
        flex-direction:column !important;
        gap:8px !important;
        padding:8px !important;
        overflow:visible !important;
    }

    /* Playlist is intentionally FIRST on portrait phones so it
       is immediately visible after entering Video Mode. */
    .course-content-panel.mobile-open .video-playlist-panel {
        order:1 !important;
        display:flex !important;
        flex-direction:column !important;
        width:100% !important;
        height:150px !important;
        min-height:150px !important;
        max-height:150px !important;
        overflow:hidden !important;
        position:relative !important;
        box-sizing:border-box !important;
    }

    .course-content-panel.mobile-open .video-playlist {
        flex:1 1 auto !important;
        height:0 !important;
        min-height:0 !important;
        max-height:none !important;
        overflow-y:auto !important;
        overflow-x:hidden !important;
        -webkit-overflow-scrolling:touch !important;
        overscroll-behavior:contain !important;
        scrollbar-width:thin !important;
        padding:6px !important;
        box-sizing:border-box !important;
    }

    .course-content-panel.mobile-open .video-player-panel {
        order:2 !important;
        position:sticky !important;
        top:78px !important;
        width:100% !important;
        height:auto !important;
        min-height:0 !important;
        max-height:none !important;
        overflow:hidden !important;
        box-sizing:border-box !important;
        background:#fff !important;
    }

    .course-content-panel.mobile-open .video-player {
        width:100% !important;
        height:auto !important;
        min-height:190px !important;
        aspect-ratio:16/9 !important;
        max-height:none !important;
        overflow:hidden !important;
        box-sizing:border-box !important;
    }

    .course-content-panel.mobile-open .video-embed {
        width:100% !important;
        height:100% !important;
        min-height:190px !important;
        box-sizing:border-box !important;
    }

    .course-content-panel.mobile-open .video-playlist-header {
        flex:0 0 auto !important;
    }
}

@media (max-width:400px) {
    .course-content-panel.mobile-open .video-playlist-panel {
        height:135px !important;
        min-height:135px !important;
        max-height:135px !important;
    }

    .course-content-panel.mobile-open .video-player {
        min-height:180px !important;
    }

    .course-content-panel.mobile-open .video-embed {
        min-height:180px !important;
    }
}
/* =========================================================
   PKTECHTRAININGS - FINAL OTP CLOSE BUTTON FIX
   ========================================================= */
#course-video-modal .video-access-dialog{
 position:relative !important; overflow:visible !important; isolation:isolate !important;
}
#course-video-modal .video-access-dialog .course-modal-close{
 display:flex !important; position:absolute !important; top:12px !important; right:12px !important;
 z-index:2147483647 !important; width:38px !important; height:38px !important;
 min-width:38px !important; min-height:38px !important; max-width:38px !important; max-height:38px !important;
 margin:0 !important; padding:0 !important; align-items:center !important; justify-content:center !important;
 flex:0 0 38px !important; border:1px solid #cbd7e6 !important; border-radius:50% !important;
 background:#fff !important; color:#102342 !important; font-family:Arial,Helvetica,sans-serif !important;
 font-size:0 !important; line-height:1 !important; visibility:visible !important; opacity:1 !important;
 pointer-events:auto !important; cursor:pointer !important; overflow:visible !important;
 box-sizing:border-box !important; appearance:none !important; -webkit-appearance:none !important;
}
#course-video-modal .video-access-dialog .course-modal-close>span{
 display:flex !important; width:100% !important; height:100% !important; align-items:center !important;
 justify-content:center !important; color:#102342 !important; font-family:Arial,Helvetica,sans-serif !important;
 font-size:25px !important; font-weight:400 !important; line-height:1 !important;
 visibility:visible !important; opacity:1 !important; pointer-events:none !important;
}
#course-video-modal .video-access-dialog .course-modal-close:hover,
#course-video-modal .video-access-dialog .course-modal-close:focus,
#course-video-modal .video-access-dialog .course-modal-close:active{
 display:flex !important; visibility:visible !important; opacity:1 !important;
 color:#1769ff !important; border-color:#1769ff !important; background:#fff !important;
 outline:none !important; transform:none !important;
}
#course-video-modal .video-access-dialog .course-modal-close:hover>span,
#course-video-modal .video-access-dialog .course-modal-close:focus>span{color:#1769ff !important;}
#course-video-modal .video-access-head{position:relative !important; z-index:1 !important;}
@media (max-width:850px), (hover: none) and (pointer: coarse){
 #course-video-modal .video-access-dialog .course-modal-close{
  display:flex !important; top:10px !important; right:10px !important; width:36px !important; height:36px !important;
  min-width:36px !important; min-height:36px !important; max-width:36px !important; max-height:36px !important;
  flex-basis:36px !important; z-index:2147483647 !important;
 }
 #course-video-modal .video-access-dialog .course-modal-close>span{font-size:24px !important;}
}
/* line-count preservation: existing stylesheet structure retained. */























/* =========================================================
   LANDSCAPE MOBILE / SHORT LANDSCAPE VIEWPORT
   Playlist = LEFT, Player = RIGHT
   ========================================================= */
@media (orientation:landscape) and (max-height:700px) {

    .course-content-panel.mobile-open .video-mode-content {
        display:block !important;
        width:100% !important;
        height:auto !important;
        min-height:0 !important;
        max-height:none !important;
        overflow:visible !important;
        box-sizing:border-box !important;
    }

    .course-content-panel.mobile-open .video-learning-area {
        display:grid !important;
        grid-template-columns:minmax(190px,34%) minmax(0,1fr) !important;
        grid-template-areas:"playlist player" !important;
        gap:10px !important;
        width:100% !important;
        height:auto !important;
        min-height:0 !important;
        max-height:none !important;
        padding:10px !important;
        overflow:visible !important;
        align-items:stretch !important;
        box-sizing:border-box !important;
    }

    .course-content-panel.mobile-open .video-playlist-panel {
        grid-area:playlist !important;
        order:0 !important;
        display:flex !important;
        flex-direction:column !important;
        width:100% !important;
        height:clamp(180px,calc(100svh - 150px),360px) !important;
        min-height:180px !important;
        max-height:360px !important;
        overflow:hidden !important;
        position:relative !important;
        visibility:visible !important;
        opacity:1 !important;
        box-sizing:border-box !important;
    }

    .course-content-panel.mobile-open .video-playlist {
        display:block !important;
        flex:1 1 auto !important;
        width:100% !important;
        height:0 !important;
        min-height:0 !important;
        max-height:none !important;
        overflow-y:auto !important;
        overflow-x:hidden !important;
        visibility:visible !important;
        opacity:1 !important;
        -webkit-overflow-scrolling:touch !important;
        overscroll-behavior:contain !important;
        scrollbar-width:thin !important;
        box-sizing:border-box !important;
    }

    .course-content-panel.mobile-open .video-player-panel {
        grid-area:player !important;
        order:0 !important;
        position:relative !important;
        top:auto !important;
        z-index:1 !important;
        width:100% !important;
        height:clamp(180px,calc(100svh - 150px),360px) !important;
        min-height:180px !important;
        max-height:360px !important;
        overflow:hidden !important;
        align-self:stretch !important;
        box-sizing:border-box !important;
    }

    .course-content-panel.mobile-open .video-player {
        width:100% !important;
        height:100% !important;
        min-height:0 !important;
        max-height:none !important;
        aspect-ratio:auto !important;
        overflow:hidden !important;
        box-sizing:border-box !important;
    }

    .course-content-panel.mobile-open .video-embed {
        width:100% !important;
        height:100% !important;
        min-height:0 !important;
        max-height:100% !important;
        box-sizing:border-box !important;
    }
}

/* Portrait phones: playlist first, player below. */
@media (orientation:portrait) and (max-width:600px) {
    .course-content-panel.mobile-open .video-learning-area {
        display:flex !important;
        flex-direction:column !important;
        gap:8px !important;
        width:100% !important;
        overflow:visible !important;
    }

    .course-content-panel.mobile-open .video-playlist-panel {
        order:1 !important;
        display:flex !important;
        width:100% !important;
        height:150px !important;
        min-height:150px !important;
        max-height:150px !important;
        overflow:hidden !important;
        position:relative !important;
    }

    .course-content-panel.mobile-open .video-playlist {
        flex:1 1 auto !important;
        height:0 !important;
        min-height:0 !important;
        overflow-y:auto !important;
        overflow-x:hidden !important;
        -webkit-overflow-scrolling:touch !important;
        scrollbar-width:thin !important;
    }

    .course-content-panel.mobile-open .video-player-panel {
        order:2 !important;
        position:relative !important;
        top:auto !important;
        width:100% !important;
        height:auto !important;
        min-height:0 !important;
    }
}

@media (orientation:portrait) and (max-width:400px) {
    .course-content-panel.mobile-open .video-playlist-panel {
        height:135px !important;
        min-height:135px !important;
        max-height:135px !important;
    }
}

/* =========================================================
   MOBILE COURSE HEADER - HIDE TRAINING COMPARISON CHIPS
   ---------------------------------------------------------
   The Live Training / Video Course comparison is useful on
   desktop, but on mobile it appears directly below the mode
   buttons and consumes valuable header space.

   Mobile only:
   - Hide the comparison chips.
   - Keep them in the DOM.
   - Do not change Live/Video/Buy functionality.
   - Desktop behavior remains unchanged.
   ========================================================= */
@media (max-width:850px), (hover: none) and (pointer: coarse),
       (orientation: landscape) and (max-width:1100px) and (max-height:700px) {
    .course-content-panel.mobile-open .course-product-note {
        display: none !important;
    }
}


/* =========================================================
   PKTECHTRAININGS - SOFT VIDEO ACCESS POPUP
   Visual-only refinement.
   Functionality, HTML, JavaScript and OTP behavior unchanged.
   ========================================================= */

#course-video-modal .course-modal-backdrop {
    background: rgba(11, 27, 52, 0.48) !important;
    backdrop-filter: blur(7px) saturate(105%) !important;
    -webkit-backdrop-filter: blur(7px) saturate(105%) !important;
}

#course-video-modal .video-access-dialog {
    background: #ffffff !important;
    border: 1px solid rgba(218, 228, 240, 0.92) !important;
    border-radius: 26px !important;
    box-shadow:
        0 10px 24px rgba(15, 35, 65, 0.08),
        0 28px 70px rgba(15, 35, 65, 0.18),
        0 2px 8px rgba(15, 35, 65, 0.05) !important;
    isolation: isolate !important;
}

#course-video-modal .video-access-head {
    background: linear-gradient(
        180deg,
        #ffffff 0%,
        #fcfdff 100%
    ) !important;
    border-bottom: 1px solid rgba(231, 237, 245, 0.72) !important;
    border-top-left-radius: 26px !important;
    border-top-right-radius: 26px !important;
}

#course-video-modal .video-access-head .course-modal-icon {
    border-radius: 16px !important;
    box-shadow: 0 6px 16px rgba(124, 58, 237, 0.08) !important;
}

#course-video-modal .course-modal-close {
    border: 1px solid #dce5f0 !important;
    background: rgba(255, 255, 255, 0.96) !important;
    color: #36506f !important;
    box-shadow:
        0 4px 12px rgba(15, 35, 65, 0.08),
        0 1px 3px rgba(15, 35, 65, 0.05) !important;
    transition:
        transform .18s ease,
        box-shadow .18s ease,
        border-color .18s ease,
        background .18s ease !important;
}

#course-video-modal .course-modal-close:hover {
    border-color: #c8d7e8 !important;
    background: #ffffff !important;
    transform: scale(1.04) !important;
    box-shadow:
        0 7px 18px rgba(15, 35, 65, 0.11),
        0 2px 5px rgba(15, 35, 65, 0.06) !important;
}

#course-video-modal .course-modal-close:focus-visible {
    outline: none !important;
    box-shadow:
        0 0 0 3px rgba(23, 105, 255, 0.12),
        0 6px 16px rgba(15, 35, 65, 0.10) !important;
}

#course-video-modal .course-radio-option {
    border: 1px solid #dfe7f1 !important;
    border-radius: 14px !important;
    background: #fbfcff !important;
    box-shadow: 0 2px 8px rgba(15, 35, 65, 0.025) !important;
    transition:
        border-color .18s ease,
        background .18s ease,
        box-shadow .18s ease,
        transform .18s ease !important;
}

#course-video-modal .course-radio-option:hover {
    border-color: #cbd9e9 !important;
    background: #ffffff !important;
    box-shadow: 0 5px 14px rgba(15, 35, 65, 0.055) !important;
}

#course-video-modal .course-radio-option:has(input:checked) {
    border-color: #b9cff0 !important;
    background: #f7faff !important;
    box-shadow: 0 5px 15px rgba(23, 105, 255, 0.06) !important;
}

/* =========================================================
   FULL-COLOR ACCESS MODE RADIO CARDS
   Premium = blue | Trial = green
   ========================================================= */
.course-radio-option{
    position:relative !important;
    overflow:hidden !important;
}
.course-radio-option input{
    width:18px !important;
    height:18px !important;
    margin:0 !important;
    flex:0 0 18px !important;
    accent-color:#1769ff !important;
    cursor:pointer !important;
}
.course-radio-option input[value="trial"]{
    accent-color:#16a34a !important;
}
.course-radio-option:has(input[value="premium"]:checked){
    background:linear-gradient(135deg,#1769ff 0%,#0d5bd7 100%) !important;
    border-color:#1769ff !important;
    color:#ffffff !important;
    box-shadow:0 7px 18px rgba(23,105,255,.24) !important;
    transform:translateY(-1px);
}
.course-radio-option:has(input[value="premium"]:checked) span{
    color:#ffffff !important;
    font-weight:700 !important;
}
.course-radio-option:has(input[value="trial"]:checked){
    background:linear-gradient(135deg,#16a34a 0%,#15803d 100%) !important;
    border-color:#16a34a !important;
    color:#ffffff !important;
    box-shadow:0 7px 18px rgba(22,163,74,.22) !important;
    transform:translateY(-1px);
}
.course-radio-option:has(input[value="trial"]:checked) span{
    color:#ffffff !important;
    font-weight:700 !important;
}
.course-radio-option:focus-within{
    outline:3px solid rgba(23,105,255,.14) !important;
    outline-offset:1px !important;
}


#course-video-modal input[type="email"],
#course-video-modal input[type="text"] {
    border: 1px solid #dce5ef !important;
    border-radius: 14px !important;
    background: #ffffff !important;
    box-shadow:
        inset 0 1px 2px rgba(15, 35, 65, 0.025),
        0 1px 3px rgba(15, 35, 65, 0.02) !important;
    transition:
        border-color .18s ease,
        box-shadow .18s ease,
        background .18s ease !important;
}

#course-video-modal input[type="email"]:focus,
#course-video-modal input[type="text"]:focus {
    border-color: #8eb8ff !important;
    background: #ffffff !important;
    box-shadow:
        0 0 0 3px rgba(23, 105, 255, 0.10),
        0 4px 12px rgba(23, 105, 255, 0.05) !important;
    outline: none !important;
}

#course-video-modal .otp-sent-message {
    border-radius: 13px !important;
    box-shadow: 0 3px 10px rgba(15, 35, 65, 0.035) !important;
}

#course-video-modal .trial-access-note {
    border-radius: 13px !important;
    box-shadow: 0 3px 10px rgba(15, 35, 65, 0.03) !important;
}

#course-video-modal .course-modal-submit {
    border-radius: 14px !important;
    box-shadow:
        0 7px 18px rgba(91, 33, 182, 0.16),
        0 2px 5px rgba(91, 33, 182, 0.08) !important;
}

#course-video-modal .video-access-dialog > form {
    background: #ffffff !important;
}

@media screen and (max-width: 700px) {
    #course-video-modal .video-access-dialog {
        border-radius: 22px !important;
        box-shadow:
            0 8px 22px rgba(15, 35, 65, 0.08),
            0 20px 50px rgba(15, 35, 65, 0.16) !important;
    }

    #course-video-modal .video-access-head {
        border-top-left-radius: 22px !important;
        border-top-right-radius: 22px !important;
    }
}

@media screen and (max-width: 480px) {
    #course-video-modal .video-access-dialog {
        border-radius: 20px !important;
    }

    #course-video-modal .video-access-head {
        border-top-left-radius: 20px !important;
        border-top-right-radius: 20px !important;
    }

    #course-video-modal .course-radio-option,
    #course-video-modal input[type="email"],
    #course-video-modal input[type="text"],
    #course-video-modal .course-modal-submit {
        border-radius: 13px !important;
    }
}

/* =========================================================
   PKTECHTRAININGS - MOBILE DESKTOP-SITE ALIGNMENT FIX
   ---------------------------------------------------------
   Chrome/Android "Desktop site" can expose a large CSS viewport
   even though the physical device is a phone. That made the
   desktop 390px + content grid render scaled down and caused
   narrow/vertical text in the course content area.

   This block uses the existing touch-device signal only to make
   the course workspace use the already-defined mobile drawer
   presentation. No colors, content, buttons or functionality are
   changed.
   ========================================================= */
@media (hover: none) and (pointer: coarse) {
    .courses-page {
        height: auto !important;
        min-height: 0 !important;
        overflow: visible !important;
        width: 100% !important;
        max-width: 100% !important;
    }

    .courses-page > .content,
    .courses-page > .content > .container {
        width: 100% !important;
        max-width: 100% !important;
        margin-left: 0 !important;
        margin-right: 0 !important;
        box-sizing: border-box !important;
    }

    .courses-page .courses-layout {
        display: grid !important;
        grid-template-columns: minmax(0, 1fr) !important;
        width: 100% !important;
        max-width: 100% !important;
        height: auto !important;
        min-height: 0 !important;
        margin: 0 !important;
        padding-top: 8px !important;
        padding-bottom: 24px !important;
        gap: 12px !important;
        align-items: start !important;
        overflow: visible !important;
        box-sizing: border-box !important;
    }

    .courses-page .courses-sidebar {
        position: static !important;
        width: 100% !important;
        max-width: 100% !important;
        height: auto !important;
        max-height: none !important;
        min-height: 0 !important;
        overflow: visible !important;
        box-sizing: border-box !important;
    }

    /* Closed content stays out of the normal mobile page flow. */
    .courses-page .course-content-panel:not(.mobile-open) {
        display: none !important;
    }

    /* Selected course opens using the existing mobile drawer. */
    .courses-page .course-content-panel.mobile-open {
        display: flex !important;
        position: fixed !important;
        left: 10px !important;
        right: 10px !important;
        top: 78px !important;
        bottom: 10px !important;
        width: auto !important;
        height: auto !important;
        max-width: none !important;
        max-height: none !important;
        min-height: 0 !important;
        margin: 0 !important;
        flex-direction: column !important;
        overflow-y: auto !important;
        overflow-x: hidden !important;
        box-sizing: border-box !important;
        z-index: 9999 !important;
    }

    .courses-page .course-content-panel.mobile-open .course-content-header {
        position: sticky !important;
        top: 0 !important;
        z-index: 30 !important;
        flex: 0 0 auto !important;
        width: 100% !important;
        min-width: 0 !important;
        box-sizing: border-box !important;
        flex-direction: column !important;
        align-items: stretch !important;
    }

    .courses-page .course-content-panel.mobile-open .course-content-title {
        min-width: 0 !important;
        max-width: 100% !important;
        box-sizing: border-box !important;
    }

    .courses-page .course-content-panel.mobile-open .course-header-actions {
        width: 100% !important;
        max-width: 100% !important;
        display: grid !important;
        grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) !important;
        gap: 7px !important;
        box-sizing: border-box !important;
    }

    .courses-page .course-content-panel.mobile-open .course-mode-button,
    .courses-page .course-content-panel.mobile-open .course-enquire {
        min-width: 0 !important;
        max-width: 100% !important;
        box-sizing: border-box !important;
    }

    .courses-page .course-content-panel.mobile-open .course-mode-button {
        width: 100% !important;
    }

    .courses-page .course-content-panel.mobile-open .course-enquire {
        grid-column: 1 / -1 !important;
        width: 100% !important;
    }

    .courses-page .course-content-panel.mobile-open .course-info,
    .courses-page .course-content-panel.mobile-open #course-mode-content {
        width: 100% !important;
        max-width: 100% !important;
        box-sizing: border-box !important;
    }
}

/* =========================================================
   ANDROID CHROME DESKTOP-SITE / INPUT-ZOOM PROTECTION
   ---------------------------------------------------------
   Android Chrome may zoom the visual viewport when a touch
   input smaller than 16px receives focus. Desktop Site mode
   is particularly sensitive because it exposes a desktop
   CSS viewport on a physical touch device.

   JavaScript also avoids programmatic focus on coarse-touch
   devices. This CSS rule protects manual taps as well.
   ========================================================= */
@media (hover: none) and (pointer: coarse) {
    #course-video-modal input[type="email"],
    #course-video-modal input[type="text"],
    #course-video-modal input[type="tel"],
    #course-video-modal select {
        font-size: 16px !important;
        -webkit-text-size-adjust: 100%;
    }
}
/* =========================================================
   VIDEO ACCESS RADIO CARDS - FINAL COMPATIBLE VERSION
   No :has() used
   ========================================================= */

#course-video-modal .course-radio-option {
    position: relative !important;
    display: flex !important;
    align-items: center !important;
    gap: 12px !important;

    min-height: 62px !important;
    padding: 11px 14px !important;

    box-sizing: border-box !important;

    border: 1px solid #d6e1ef !important;
    border-radius: 14px !important;

    background: #f8fbff !important;
    color: #172f55 !important;

    cursor: pointer !important;

    transition:
        background .2s ease,
        border-color .2s ease,
        box-shadow .2s ease,
        transform .2s ease !important;
}


/* Radio circle */

#course-video-modal .course-radio-option input[type="radio"] {
    width: 20px !important;
    height: 20px !important;
    min-width: 20px !important;

    margin: 0 !important;

    cursor: pointer !important;

    accent-color: #2563eb !important;
}


/* Radio text */

#course-video-modal .course-radio-option span {
    display: block !important;

    color: #172f55 !important;

    font-size: 13px !important;
    font-weight: 700 !important;

    line-height: 1.3 !important;

    opacity: 1 !important;
    visibility: visible !important;
}


/* =========================================================
   PREMIUM SELECTED
   ========================================================= */

#course-video-modal .course-radio-option.premium-selected {
    background: linear-gradient(
        135deg,
        #2563eb 0%,
        #1d4ed8 100%
    ) !important;

    border-color: #2563eb !important;

    color: #ffffff !important;

    box-shadow:
        0 8px 20px rgba(37, 99, 235, .28) !important;

    transform: translateY(-1px) !important;
}


#course-video-modal
.course-radio-option.premium-selected span {
    color: #ffffff !important;
    font-weight: 800 !important;
}


#course-video-modal
.course-radio-option.premium-selected
input[type="radio"] {
    accent-color: #ffffff !important;
}


/* =========================================================
   TRIAL SELECTED
   ========================================================= */

#course-video-modal .course-radio-option.trial-selected {
    background: linear-gradient(
        135deg,
        #f97316 0%,
        #ea580c 100%
    ) !important;

    border-color: #ea580c !important;

    color: #ffffff !important;

    box-shadow:
        0 8px 20px rgba(234, 88, 12, .28) !important;

    transform: translateY(-1px) !important;
}


#course-video-modal
.course-radio-option.trial-selected span {
    color: #ffffff !important;
    font-weight: 800 !important;
}


#course-video-modal
.course-radio-option.trial-selected
input[type="radio"] {
    accent-color: #ffffff !important;
}


/* =========================================================
   HOVER
   ========================================================= */

#course-video-modal .course-radio-option:hover {
    border-color: #8eb4e8 !important;
    background: #eef5ff !important;
}


/* Don't override selected backgrounds on hover */

#course-video-modal
.course-radio-option.premium-selected:hover {
    background: linear-gradient(
        135deg,
        #2563eb 0%,
        #1d4ed8 100%
    ) !important;
}

#course-video-modal
.course-radio-option.trial-selected:hover {
    background: linear-gradient(
        135deg,
        #f97316 0%,
        #ea580c 100%
    ) !important;
}


/* =========================================================
   FOCUS
   ========================================================= */

#course-video-modal .course-radio-option:focus-within {
    outline: 3px solid rgba(37, 99, 235, .18) !important;
    outline-offset: 2px !important;
}