/**
 * My Custom LMS - Frontend Styles
 *
 * Version: 1.5
 */

/* --- General LMS Styles --- */
.mcl-login-prompt,
.mcl-access-denied-message {
    padding: 15px;
    margin-bottom: 20px;
    border: 1px solid transparent;
    border-radius: 4px;
}

.mcl-login-prompt {
    color: #31708f;
    background-color: #d9edf7;
    border-color: #bce8f1;
}

.mcl-access-denied-message {
    color: #a94442;
    background-color: #f2dede;
    border-color: #ebccd1;
}

/* --- Phone Login Shortcode Styles --- */
.mcl-phone-login-form-wrapper {
    max-width: 400px;
    /* margin: 20px auto; */ /* Uncomment to center on page if used standalone */
    padding: 20px;
    background-color: #f9f9f9;
    border: 1px solid #ddd;
    border-radius: 5px;
}

.mcl-phone-login-form-wrapper .mcl-form-field {
    margin-bottom: 15px;
}

.mcl-phone-login-form-wrapper label {
    display: block;
    margin-bottom: 5px;
    font-weight: bold;
}

.mcl-phone-login-form-wrapper .mcl-phone-input {
    width: 100%;
    padding: 10px;
    border: 1px solid #ccc;
    border-radius: 4px;
    box-sizing: border-box;
}

.mcl-phone-login-form-wrapper .mcl-login-button {
    padding: 10px 15px;
    background-color: #0073aa; /* WordPress blue */
    color: white;
    border: none;
    border-radius: 4px;
    cursor: pointer;
    font-size: 1em;
}

.mcl-phone-login-form-wrapper .mcl-login-button:hover {
    background-color: #005a87;
}

.mcl-phone-login-message {
    padding: 10px;
    margin-bottom: 15px;
    border-radius: 4px;
}

.mcl-phone-login-message.mcl-login-error {
    background-color: #f2dede;
    border: 1px solid #ebccd1;
    color: #a94442;
}

.mcl-phone-login-message.mcl-login-success { /* For already logged in message */
    background-color: #dff0d8;
    border: 1px solid #d6e9c6;
    color: #3c763d;
}


/* --- [mcl_courses] Shortcode Styles --- */
.mcl-courses-list-wrapper {
    margin-bottom: 20px;
}

.mcl-courses-list {
    list-style: none;
    padding: 0;
    margin: 0;
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); /* Responsive grid */
    gap: 20px;
}

.mcl-course-item {
    border: 1px solid #e0e0e0;
    border-radius: 5px;
    overflow: hidden; /* Ensures child elements don't overflow rounded corners */
    background-color: #fff;
    box-shadow: 0 2px 4px rgba(0,0,0,0.05);
    transition: box-shadow 0.3s ease-in-out;
}

.mcl-course-item:hover {
    box-shadow: 0 4px 8px rgba(0,0,0,0.1);
}

.mcl-course-item-inner {
    padding: 15px;
}

.mcl-course-thumbnail {
    margin-bottom: 15px;
}

.mcl-course-thumbnail img {
    width: 100%;
    height: auto;
    display: block;
    border-radius: 4px;
}

.mcl-course-title {
    margin-top: 0;
    margin-bottom: 10px;
    font-size: 1.4em;
}

.mcl-course-title a {
    text-decoration: none;
    color: #333;
}

.mcl-course-title a:hover {
    color: #0073aa;
}

.mcl-course-excerpt {
    font-size: 0.9em;
    color: #555;
    margin-bottom: 15px;
    line-height: 1.6;
}

.mcl-course-readmore {
    display: inline-block;
    padding: 8px 15px;
    background-color: #0073aa;
    color: #fff;
    text-decoration: none;
    border-radius: 3px;
    font-size: 0.9em;
}

.mcl-course-readmore:hover {
    background-color: #005a87;
    color: #fff;
}

/* --- Single Course Page - Modules & Lessons List --- */
.mcl-course-content-wrapper {
    margin-top: 30px;
    padding-top: 20px;
    border-top: 1px solid #eee;
}

.mcl-course-content-wrapper h2 {
    margin-bottom: 20px;
}

.mcl-modules-container {
    /* No specific styles needed unless you want a wrapper box */
}

.mcl-module-block {
    background-color: #fdfdfd;
    border: 1px solid #e5e5e5;
    padding: 20px;
    margin-bottom: 20px;
    border-radius: 4px;
}

.mcl-module-block-title {
    margin-top: 0;
    margin-bottom: 10px;
    font-size: 1.5em;
    border-bottom: 1px dotted #ccc;
    padding-bottom: 10px;
}

.mcl-module-block-title .mcl-lesson-count {
    font-size: 0.7em;
    color: #777;
    font-weight: normal;
}

.mcl-module-excerpt {
    margin-bottom: 15px;
    color: #444;
}

.mcl-module-lessons-list {
    list-style: none; /* Or 'decimal' or 'disc' as you prefer */
    padding-left: 0; /* Remove default padding if list-style is none */
    margin-top: 15px;
}

.mcl-module-lessons-list .mcl-lesson-list-item {
    padding: 8px 0;
    border-bottom: 1px dashed #eee;
}

.mcl-module-lessons-list .mcl-lesson-list-item:last-child {
    border-bottom: none;
}

.mcl-module-lessons-list .mcl-lesson-list-item a {
    text-decoration: none;
    color: #0073aa;
}

.mcl-module-lessons-list .mcl-lesson-list-item a:hover {
    text-decoration: underline;
}

.mcl-no-modules-message {
    padding: 15px;
    background-color: #fffbeS;
    border: 1px solid #ffeSba;
    color: #c09853;
    border-radius: 4px;
}

/* --- Logout Button --- */
.mcl-logout-button {
    /* Default WordPress button styles should apply if 'button' class is used.
       Add specific overrides if needed. */
    /* Example:
    background-color: #d9534f;
    color: white !important;
    padding: 10px 15px;
    text-decoration: none;
    border-radius: 4px;
    */
}
/* .mcl-logout-button:hover {
    background-color: #c9302c;
} */

/* --- Admin Specific Styles (if any) --- */
/* Example: You might want to style the .user-devices-wrap table in the admin area slightly */
/* This is already handled by inline styles in your PHP, but could be moved here */
/*
.user-devices-wrap {
    margin-bottom: 30px;
    border: 1px solid #ccd0d4;
    padding: 15px;
    background: #f9f9f9;
}
.user-devices-wrap h2 {
    margin-top: 0;
}
*/

* --- Single Course Page - Main Content Wrapper --- */
.single-course .entry-content { /* Target the main content area of a course */
    font-family: Arial, sans-serif; /* Or your preferred font */
    line-height: 1.6;
    color: #333;
}

/* --- Course Content Wrapper (Modules & Lessons) --- */
.mcl-course-content-wrapper {
    margin-top: 30px;
    padding-top: 20px;
    border-top: 2px solid #0073aa; /* WordPress blue accent */
}

.mcl-course-content-wrapper h2 { /* "Course Content" Heading */
    font-size: 2em;
    color: #2c3e50; /* Darker, more modern blue/grey */
    margin-bottom: 25px;
    padding-bottom: 10px;
    border-bottom: 1px solid #ecf0f1; /* Light grey border */
}

/* --- Modules Container --- */
.mcl-modules-container {
    /* You can add padding or margin here if needed for the overall container */
}

/* --- Individual Module Block --- */
.mcl-module-block {
    background-color: #ffffff;
    border: 1px solid #e9ecef;
    padding: 0; /* Padding will be on inner elements */
    margin-bottom: 25px;
    border-radius: 8px;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
    /* transition: transform 0.3s ease, box-shadow 0.3s ease; Remove this if using slideToggle */
    overflow: hidden; /* Important for containing the lesson list */
}

/* .mcl-module-block:hover {
    transform: translateY(-3px);
    box-shadow: 0 6px 16px rgba(0, 0, 0, 0.12);
} */ /* Hover effect might interfere with click; consider removing or adjusting */

.mcl-module-block-title {
    margin: 0; /* Remove default margin */
    padding: 20px 25px; /* Add padding here */
    font-size: 1.6em; /* Slightly adjusted */
    color: #0073aa;
    /* border-bottom: 1px solid #dfe6e9; */ /* Border can be conditional or on the lessons list */
    font-weight: 600;
    cursor: pointer; /* Indicate it's clickable */
    position: relative; /* For positioning the arrow icon */
    transition: background-color 0.2s ease;
}

.mcl-module-block-title:hover {
    background-color: #f9f9f9; /* Slight hover effect on the title */
}

.mcl-module-block-title .mcl-lesson-count {
    font-size: 0.6em; /* Adjusted */
    color: #7f8c8d;
    font-weight: normal;
    margin-left: 8px;
    background-color: #e9ecef; /* Slightly different background */
    padding: 4px 10px; /* Adjusted padding */
    border-radius: 12px;
    vertical-align: middle; /* Align with text better */
}

/* Arrow Icon for Collapsible Modules */
.mcl-module-block-title::after {
    content: "\f140"; /* Dashicon for "arrow-down-alt2" */
    font-family: dashicons;
    position: absolute;
    right: 25px;
    top: 50%;
    transform: translateY(-50%) rotate(0deg); /* Initial state: pointing down */
    transition: transform 0.3s ease-in-out;
    font-size: 1.2em; /* Adjust icon size */
    color: #0073aa;
}

.mcl-module-block-title.mcl-module-expanded::after {
    transform: translateY(-50%) rotate(180deg); /* Rotated state: pointing up */
}


.mcl-module-excerpt {
    padding: 0 25px 15px 25px; /* Padding for excerpt if title is clicked */
    margin-bottom: 0;
    color: #555;
    font-size: 0.95em;
    line-height: 1.7;
    /* Initially hidden, shown when module expands (if desired) */
    /* display: none; */ /* Controlled by JS or if excerpt is part of collapsable area */
}

/* --- Lessons List within a Module (Updated for Click Interaction) --- */
.mcl-module-lessons-list {
    list-style: none;
    padding: 0 25px 15px 25px; /* Add padding here */
    margin-top: 0; /* Remove top margin as title provides spacing */
    background-color: #fdfdfd; /* Slightly different background for lesson area */
    border-top: 1px solid #e9ecef; /* Separator line */
    display: none; /* Initially hidden, will be shown by JavaScript */
}

.mcl-module-lessons-list.mcl-lessons-visible { /* Class added by JS to show lessons */
    display: block;
}

.mcl-module-lessons-list .mcl-lesson-list-item {
    padding: 12px 0 12px 10px; /* Indent lessons */
    border-bottom: 1px solid #f1f2f6;
    transition: background-color 0.2s ease;
}

.mcl-module-lessons-list .mcl-lesson-list-item:last-child {
    border-bottom: none;
    padding-bottom: 15px; /* More space at the end of the list */
}

.mcl-module-lessons-list .mcl-lesson-list-item a {
    text-decoration: none;
    color: #3498db;
    font-weight: 500;
    font-size: 1.05em;
    transition: color 0.2s ease, padding-left 0.2s ease;
    display: block;
}

.mcl-module-lessons-list .mcl-lesson-list-item a:hover {
    color: #2980b9;
    padding-left: 5px; /* Original hover effect */
}

.mcl-module-lessons-list .mcl-lesson-list-item a::before {
    content: "\f147"; /* Dashicon for 'screenoptions' */
    font-family: dashicons;
    margin-right: 10px;
    color: #7fadbe; /* Lighter icon color */
    font-size: 0.9em;
    transition: color 0.2s ease;
}
.mcl-module-lessons-list .mcl-lesson-list-item a:hover::before {
    color: #2980b9;
}

/**
 * Hide Author and Date Meta on Single CPT Views
 * To be added to css/my-lms-style.css
 */

/* General WordPress post meta classes - check your theme's structure if these don't work */
.single-course .entry-meta,
.single-module .entry-meta,
.single-lesson .entry-meta {
    display: none !important;
}

/* More specific selectors if your theme uses different classes or structures */
/* For example, some themes might use 'post-meta', 'byline', 'posted-on', etc. */

/* If author is in a class like '.author' or '.vcard' within the entry header */
.single-course .entry-header .author,
.single-module .entry-header .author,
.single-lesson .entry-header .author,
.single-course .entry-header .vcard,
.single-module .entry-header .vcard,
.single-lesson .entry-header .vcard {
    display: none !important;
}

/* If date is in a class like '.posted-on', '.entry-date', or a time element */
.single-course .entry-header .posted-on,
.single-module .entry-header .posted-on,
.single-lesson .entry-header .posted-on,
.single-course .entry-header .entry-date,
.single-module .entry-header .entry-date,
.single-lesson .entry-header .entry-date,
.single-course .entry-header time.published,
.single-module .entry-header time.published,
.single-lesson .entry-header time.published,
.single-course .entry-header time.updated,
.single-module .entry-header time.updated,
.single-lesson .entry-header time.updated {
    display: none !important;
}

/* If they are directly within your CPT's specific content wrapper and not standard theme classes */
/* This is less likely if the theme controls CPT display, but included for completeness */
.single-course .mcl-course-meta, /* Assuming you might add such a wrapper */
.single-module .mcl-module-meta,
.single-lesson .mcl-lesson-meta {
    display: none !important;
}

/* --- Registration Form Shortcode Styles --- */
.mcl-registration-form-wrapper {
    max-width: 450px; /* Slightly wider for more fields */
    padding: 20px;
    background-color: #f9f9f9;
    border: 1px solid #ddd;
    border-radius: 5px;
    margin: 20px 0; /* Add some vertical margin */
}

.mcl-registration-form-wrapper .mcl-form-field {
    margin-bottom: 15px;
}

.mcl-registration-form-wrapper label {
    display: block;
    margin-bottom: 5px;
    font-weight: bold;
}

.mcl-registration-form-wrapper .mcl-input {
    width: 100%;
    padding: 10px;
    border: 1px solid #ccc;
    border-radius: 4px;
    box-sizing: border-box;
}

.mcl-registration-form-wrapper .mcl-login-button {
    padding: 10px 15px;
    background-color: #0073aa; /* WordPress blue */
    color: white;
    border: none;
    border-radius: 4px;
    cursor: pointer;
    font-size: 1em;
    width: 100%; /* Make button full width */
}

.mcl-registration-form-wrapper .mcl-login-button:hover {
    background-color: #005a87;
}

/* --- Phone & Password Login Shortcode Styles --- */
.mcl-phone-password-login-form-wrapper {
    max-width: 400px;
    padding: 20px;
    background-color: #f9f9f9;
    border: 1px solid #ddd;
    border-radius: 5px;
    margin: 20px 0;
}

.mcl-phone-password-login-form-wrapper label {
    display: block;
    margin-bottom: 5px;
    font-weight: bold;
}

.mcl-phone-password-login-form-wrapper .input {
    width: 100%;
    padding: 10px;
    border: 1px solid #ccc;
    border-radius: 4px;
    box-sizing: border-box;
    margin-bottom: 15px;
}

.mcl-phone-password-login-form-wrapper .button-primary {
    width: 100%;
}

/**
 * Hide Next/Previous Post Navigation on Single Lesson pages
 */
.single-lesson .post-navigation {
    display: none !important;
}

/* --- Courses Shortcode Pagination --- */
.mcl-courses-pagination {
    margin-top: 30px;
    clear: both;
    text-align: center;
}
.mcl-courses-pagination .page-numbers {
    padding: 8px 12px;
    margin: 0 2px;
    border: 1px solid #ddd;
    text-decoration: none;
    color: #0073aa;
    border-radius: 4px;
    transition: background-color 0.2s, color 0.2s;
}
.mcl-courses-pagination .page-numbers:hover {
    background-color: #f0f0f0;
    color: #005a87;
}
.mcl-courses-pagination .page-numbers.current {
    background-color: #0073aa;
    color: white;
    border-color: #0073aa;
    cursor: default;
}
.mcl-courses-pagination .page-numbers.dots {
    border: none;
    padding: 8px 4px;
}