/* LearnPress Course Popup Styling */

/* Popup Layout */
#popup-header {
    background: var(--lp-white) !important;
    color: var(--lp-dark) !important;
    padding: 15px 20px !important;
    display: flex !important;
    align-items: center !important;
    border: 1px solid var(--lp-dark) !important;
    border-radius: var(--lp-radius) !important;
    margin: 10px !important;
}

#popup-content {
    background: var(--lp-bg-light) !important;
    padding: 0 !important;
    min-height: calc(100vh - 200px) !important;
}
 
/* Header Elements */
#popup-header::before,
#popup-header .course-title::before,
#popup-header .site-icon,
#popup-header .favicon,
#popup-header .wp-site-icon {
    display: none !important;
}

#popup-header .course-title {
    margin: 0 !important;
    flex-grow: 1 !important;
}

#popup-header .course-title a {
    color: var(--lp-dark) !important;
    text-decoration: none !important;
    font-size: 18px !important;
    font-weight: 600 !important;
}

#popup-header .items-progress {
    margin-left: auto !important;
}

#popup-header .items-progress .number {
    font-size: 14px !important;
    margin-bottom: 5px !important;
    display: block !important;
}

#popup-header .learn-press-progress {
    background: var(--lp-light) !important;
    height: 6px !important;
    border-radius: 3px !important;
    overflow: hidden !important;
}

#popup-header .learn-press-progress__active {
    background: var(--lp-primary) !important;
    height: 100% !important;
}

/* Ensure progress text is black on white header */
#popup-header .items-progress,
#popup-header .items-progress span,
#popup-header .items-progress .number {
    color: var(--lp-dark) !important;
}

#popup-header .back-course {
    margin-left: 15px !important; /* kept, rest unified via .lp-control */
}

/* Header Controls */
#popup-header .lp-control,
#popup-header .back-course,
#popup-header input#sidebar-toggle[title],
#popup-header [title="Show/Hide curriculum"] {
    background: var(--lp-primary) !important;
    color: var(--lp-light) !important;
    border: 1px solid var(--lp-dark) !important;
    border-radius: var(--lp-radius) !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: var(--lp-control-size) !important;
    height: var(--lp-control-size) !important;
    padding: 0 !important;
    text-decoration: none !important;
    line-height: 1 !important;
    transition: background-color var(--lp-transition), color var(--lp-transition), border-color var(--lp-transition) !important;
    box-shadow: var(--lp-shadow) !important;
    box-sizing: border-box !important;
}

#popup-header .lp-control:hover,
#popup-header .back-course:hover,
#popup-header input#sidebar-toggle[title]:hover,
#popup-header [title="Show/Hide curriculum"]:hover {
    background: var(--lp-dark) !important;
    color: var(--lp-light) !important;
    border-color: var(--lp-dark) !important;
}

/* Accessible focus styles */
#popup-header .lp-control:focus-visible,
#popup-header .back-course:focus-visible,
#popup-header input#sidebar-toggle[title]:focus-visible,
#popup-header [title="Show/Hide curriculum"]:focus-visible {
    outline: 2px solid var(--lp-dark) !important;
    outline-offset: 2px !important;
    box-shadow: none !important;
}

/* Specific: sidebar toggle checkbox and its label */
#popup-header #sidebar-toggle {
    -webkit-appearance: none !important;
    -moz-appearance: none !important;
    appearance: none !important;
    cursor: pointer !important;
    accent-color: var(--lp-primary) !important;
    padding: 0 !important;
    box-sizing: border-box !important;
    outline: none !important;
}

#popup-header #sidebar-toggle::after { content: none !important; }

#popup-header label[for="sidebar-toggle"] {
    background: var(--lp-primary) !important;
    color: var(--lp-light) !important;
    border: 1px solid var(--lp-dark) !important;
    border-radius: var(--lp-radius) !important;
    padding: 6px 10px !important;
    cursor: pointer !important;
    display: inline-flex !important;
    align-items: center !important;
    gap: 6px !important;
    height: var(--lp-control-size) !important;
}

#popup-header label[for="sidebar-toggle"]:hover {
    background: var(--lp-dark) !important;
}

#popup-header .lp-icon-times { background: transparent !important; border: none !important; line-height: 1 !important; }
#popup-header .back-course .lp-icon-times { border: none !important; background: transparent !important; }

/* Final enforcement for header controls */
#popup-header input#sidebar-toggle[title],
#popup-header [title="Show/Hide curriculum"] {
    visibility: visible !important;
    opacity: 1 !important;
    position: static !important;
    left: auto !important;
    margin-right: var(--lp-gap) !important;
    z-index: 1 !important;
}

#popup-header .back-course .lp-icon-times { width: 1em !important; height: 1em !important; }

/* Popup content container helpers */
#popup-content .container,
#popup-content .course-content-container {
    max-width: none !important;
    width: 100% !important;
    padding: 0 !important;
    margin: 0 !important;
}

/* Header control icons */
#popup-header .back-course i,
#popup-header .back-course .lp-icon-times {
    display: block !important;
    line-height: 1 !important;
    margin: 0 !important;
    font-size: 16px !important;
}

/* Popup Footer */
#popup-footer {
    background: var(--lp-white) !important;
    color: var(--lp-dark) !important;
    padding: 4px 10px !important;
    display: flex !important;
    align-items: center !important;
    border: 1px solid var(--lp-dark) !important;
    border-radius: var(--lp-radius) !important;
    margin: 10px !important;
    width: auto !important;
    max-width: 100% !important;
    box-sizing: border-box !important;
}

#popup-footer .course-item-nav {
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    width: 100% !important;
    gap: 10px !important;
}

#popup-footer .course-item-nav .prev,
#popup-footer .course-item-nav .next {
    display: flex !important;
    align-items: center !important;
    gap: 10px !important;
}

#popup-footer .course-item-nav[data-nav="next"] { justify-content: flex-end !important; }
#popup-footer .course-item-nav[data-nav="next"] .next { margin-left: auto !important; }
#popup-footer .course-item-nav[data-nav="next"] .course-item-nav__name { text-align: right !important; }

#popup-footer .course-item-nav__name { color: var(--lp-dark) !important; margin: 0 !important; }

#popup-footer a,
#popup-footer button,
#popup-footer .button,
#popup-footer .lp-button,
#popup-footer input[type="button"],
#popup-footer input[type="submit"] {
    background: var(--lp-primary) !important;
    color: var(--lp-light) !important;
    border: 1px solid var(--lp-dark) !important;
    border-radius: var(--lp-radius) !important;
    text-decoration: none !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    line-height: 1 !important;
    transition: background-color var(--lp-transition), color var(--lp-transition), border-color var(--lp-transition) !important;
    padding: 4px 8px !important;
    font-size: 14px !important;
}

#popup-footer a:focus,
#popup-footer a:active,
#popup-footer button:focus,
#popup-footer button:active { outline: none !important; box-shadow: none !important; }

/* Popup Sidebar (curriculum) */
#popup-sidebar .popup-sidebar__inner::before { display: none !important; }

#popup-sidebar .search-course {
    padding: 15px !important;
    margin-bottom: 20px !important;
    position: relative !important;
    display: flex !important;
    align-items: center !important;
}

#popup-sidebar .search-course::before {
    content: '' !important;
    background: var(--wp-site-icon, url('/favicon.ico')) center/contain no-repeat !important;
    width: 32px !important;
    height: 32px !important;
    margin-right: 15px !important;
    flex-shrink: 0 !important;
    display: block !important;
}

#popup-sidebar .search-course input[type="text"] {
    border: 1px solid var(--lp-secondary) !important;
    border-radius: var(--lp-radius) !important;
    padding: 12px 15px !important;
    width: 100% !important;
    box-sizing: border-box !important;
    font-size: 14px !important;
    background: var(--lp-light) !important;
    color: var(--lp-dark) !important;
    height: 42px !important;
    flex-grow: 1 !important;
    box-shadow: var(--lp-shadow) !important;
}

#popup-sidebar .search-course button,
#popup-sidebar .search-course input[type="submit"],
#popup-sidebar .search-course input[type="button"] { display: none !important; }