a.masterstudy-nav-button.masterstudy-nav-button_style-primary:hover {
    opacity: .8;
}

.theme-masterstudy .wpforms-submit {
    width: 100% ;
    margin: 20px 0;
    background: var(--accent-100) !important;
}

.wpforms-field-likert_scale {
    border: 1px solid #dedede !important;
    margin: 20px 0 !important;
    padding: 20px !important;
    border-radius: 10px !important;
}

.wpforms-field-likert_scale table th{
    white-space: nowrap !important;
}

#field-:r39:-label {
    display: none;
}

.wpforms-template.badge {
    display: none;
}

.wpforms-template.badge.wpforms-user-template {
    display: block;
}

.bpbm-user-me-popup {
    display: none;
}

/* Popup Enroll Course */
#popup-form button,#popup-form input[type=submit], #success-popup button {
    outline: 0;
    background: var(--accent-100);
    border: none;
    box-shadow: none;
    padding: 5px 20px;
    border-radius: 5px;
    color: #fff;
}

#popup-form button[disabled], #popup-form input[type=submit][disabled] {
    background: #dedede;
}

/* Header Chat Indicator*/
.chat-indicator img {
    width: 30px;
    height: 30px;
}

.chat-indicator span {
    background: black;
    color: #fff;
    padding: 3px 10px;
    position: absolute;
    top: -20px;
    border-radius: 100%;
}

.masterstudy-single-course__heading {
    display: block !important;
}

h1.masterstudy-single-course-title {
    margin-top: 10px !important;
}

.masterstudy-single-course__heading .category{
    display: inline;
    padding: 10px 20px;
    background: #74318E;
    color: #fff;
    border-radius: 10px;
}

.auth-button {
    color: #fff;
    padding: 10px 20px;
    background: #000;
    border-radius: 20px;
}

.auth-button:hover {
    background: #57197F;
    color: #fff;
}

.preview-lesson {
    margin: 0 10px;
    text-decoration: underline;
}

.button.primary {
    background: #74318E!important;
    border-radius: 10px;
}

.button.primary:hover {
    opacity: 0.9;
}

/* Course Description Paragraph Styling */
.masterstudy-single-course-description p,
.masterstudy-single-course-description__content p {
    margin-bottom: 1em;
    line-height: 1.7;
}

.masterstudy-single-course-description br,
.masterstudy-single-course-description__content br {
    display: block;
    margin-bottom: 0.5em;
    content: "";
}

/* Ensure proper whitespace handling */
.masterstudy-single-course-description,
.masterstudy-single-course-description__content {
    word-wrap: break-word;
}

/* Fix Quiz Builder dropdown positioning - ONLY in wp-admin */
body.wp-admin .chakra-menu__menu-list,
body.wp-admin .chakra-popover__content {
    z-index: 9999 !important;
}

/* Ensure quiz question container doesn't clip dropdown - ONLY in wp-admin */
body.wp-admin .masterstudy-quiz-builder,
body.wp-admin .masterstudy-quiz-builder > div {
    overflow: visible !important;
}

/* Fix for Chakra UI portal menus in course builder - ONLY in wp-admin */
body.wp-admin .chakra-portal {
    z-index: 9999 !important;
}

/* Ensure the menu popper wrapper has correct positioning - ONLY in wp-admin */
body.wp-admin .chakra-menu__popper {
    z-index: 9999 !important;
}

/* Override Chakra Popper transform for quiz dropdowns - applied by JS */
body.wp-admin .chakra-menu__menu-list[data-fixed="true"],
body.wp-admin [data-popper-placement][data-fixed="true"] {
    transform: none !important;
    inset: auto !important;
}

/* Hide Elementor icon-list items whose text is empty AND have no other link content.
 * The footer 導師網站 item uses DCE dynamic PHP that outputs an empty string
 * for logged-out visitors — but the icon-list widget still renders its dot.
 * Some items (like the header 登入/登出 item) place their DCE-dynamic <a> AFTER
 * the empty .elementor-icon-list-text span, so we must NOT hide those.
 * The :not(:has(> a.inline)) clause keeps those <li>s visible. */
.elementor-icon-list-items > .elementor-icon-list-item:not(:has(> a.inline)):has(> a > .elementor-icon-list-text:empty),
.elementor-icon-list-items > .elementor-icon-list-item:not(:has(> a.inline)):has(> .elementor-icon-list-text:empty) {
    display: none !important;
}

/* ============================================================
 * Course-player view — hide admin/vendor chrome for students
 * (matches "2.0 Course Enrolment — Vendor會把不需要的功能隱藏" note)
 * ============================================================ */

/* 1. Hide the WordPress admin bar entirely on course-player pages.
 *    The player template body has class `.masterstudy-course-player-content`
 *    on the wrapper — the admin bar sits above it at #wpadminbar.
 *    We hide with :has() so the rule only fires on player pages,
 *    leaving the admin bar visible on wp-admin and normal frontend pages. */
body:has(.masterstudy-course-player-content) #wpadminbar,
body:has(.masterstudy-course-player-content) html { margin-top: 0 !important; }
body:has(.masterstudy-course-player-content) #wpadminbar { display: none !important; }
body:has(.masterstudy-course-player-content).admin-bar .masterstudy-course-player-header { top: 0 !important; }
body:has(.masterstudy-course-player-content).admin-bar .masterstudy-course-player-content { padding-top: 0 !important; }

/* 2. Hide the right-hand Discussions panel + its toggler in the header.
 *    Students should not see/open the discussion side panel per SLS spec. */
.masterstudy-course-player-header__discussions,
.masterstudy-course-player-discussions { display: none !important; }