/* 
 -CSS Custom Properties for Easy Customization - adjust the essential styles below.
*/

:root {
 /* Navigation Variables */
 --ct-nav-link-color: #000; /* Default navigation link color */
 --ct-nav-list-padding: 6px 0; /* Padding for list items (top/bottom only) */
 --ct-nav-item-margin-bottom: 0; /* Margin bottom for nav list items */
 --ct-nav-icon-text-gap: 8px; /* Space between nav icon and text */
 --ct-nav-checkmark-color: green; /* Color of the checkmark for completed nav items */
 --ct-nav-font-size: 16px; /* Font size for navigation links */
 
 /* Complete Button Variables */
 --ct-btn-align-items: center;
 --ct-btn-justify-content: center;
 --ct-btn-padding: 10px 20px;
 --ct-btn-bg-color: #2dc68a;
 --ct-btn-text-color: #fff;
 --ct-btn-border: none;
 --ct-btn-border-radius: 4px;
 --ct-btn-font-size: 1em;

 /* Lesson Nav Progress Text Variables */
 --ct-text-font-size: 1.1em;
 --ct-text-align: center;
}

/* Navigation Container Reset */
.course-navigation {
 list-style: none;
 margin: 0 !important;
 padding: 0 !important;
 margin-left: 0 !important;
 padding-left: 0 !important;
}

/* Navigation List & Items Reset */
.course-navigation,
.course-navigation li {
 list-style: none !important;
 margin-left: 0 !important;
 padding: var(--ct-nav-list-padding) !important;
 display: block !important;
 position: relative;
}

/* Navigation Links */
.course-navigation li a {
 display: inline-flex;
 align-items: center;
 text-decoration: none;
 font-size: var(--ct-nav-font-size);
 color: var(--ct-nav-link-color);
 margin: 0;
 padding-left: 0 !important;
 font-weight: 400;
}



/* —————————————————————
   COURSE NAVIGATION BULLETS
——————————————————————————— */

/* 1) Hollow circle for leaf items */
.course-navigation li:not(.menu-item-has-children) > a::before {
  content: "";
  display: inline-block;
  width: 20px; height: 20px;
  margin-right: var(--ct-nav-icon-text-gap);
  vertical-align: middle;
  background-repeat: no-repeat;
  background-position: center;
  background-size: contain;
  /* hollow circle SVG */
  background-image: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIyMCIgaGVpZ2h0PSIyMCI+PGNpcmNsZSBjeD0iMTAiIGN5PSIxMCIgcj0iOCIgc3Ryb2tlPSJncmF5IiBzdHJva2Utd2lkdGg9IjIiIGZpbGw9Im5vbmUiLz48L3N2Zz4=");
}

/* 2) Shaded circle for the current page/ancestor */
.course-navigation li.current-menu-item > a::before,
.course-navigation li.current_page_item > a::before,
.course-navigation li.current-menu-ancestor > a::before {
  /* shaded circle SVG (#ccc) */
  background-image: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIyMCIgaGVpZ2h0PSIyMCI+PGNpcmNsZSBjeD0iMTAiIGN5PSIxMCIgcj0iOCIgc3Ryb2tlPSJncmF5IiBzdHJva2Utd2lkdGg9IjIiIGZpbGw9IiNjY2MiLz48L3N2Zz4=");
}

/* Completed state: green circle + smooth white checkmark */
.course-navigation li a.course_nav_completed::before {
  background-image: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIyMCIgaGVpZ2h0PSIyMCI+PGNpcmNsZSBjeD0iMTAiIGN5PSIxMCIgcj0iOCIgc3Ryb2tlPSJub25lIiBmaWxsPSIjMDBjODUzIi8+PHBvbHlsaW5lIGZpbGw9Im5vbmUiIHN0cm9rZT0iI2ZmZiIgc3Ryb2tlLXdpZHRoPSIyIiBzdHJva2UtbGluZWNhcD0icm91bmQiIHN0cm9rZS1saW5lam9pbj0icm91bmQiIHBvaW50cz0iNiAxMCA5IDEzIDE0IDciLz48L3N2Zz4=");
  background-repeat: no-repeat;
  background-position: center;
  background-size: contain;
}



/* Italicized text for completed items */
.course-navigation li a.course_nav_completed {
 font-style: italic;
 color: gray;
}

/* --- Navigation Styling for Parent Headers and Sub-menus --- */
/* Parent header items: no left indent */
.course-navigation > li.menu-item-has-children {
 padding-left: 0 !important;
}

/* Parent header links: */
.course-navigation > li.menu-item-has-children > a {
 pointer-events: none;
 cursor: default;
 text-decoration: none !important;
 font-weight: bold !important;
 color: #333 !important;
 padding-left: 0 !important;
 margin-left: 0;
}

/* Sub-menu container: no indentation or background */
.course-navigation ul.sub-menu {
 position: static !important;
 margin: 0 !important;
 padding: 0 !important;
 background: none !important;
}

/* Sub-menu items: uniform spacing, no extra indent */
.course-navigation ul.sub-menu li {
 display: block !important;
 margin: 0 !important;
 padding: 5px 0 !important;
}

.course-navigation ul.sub-menu li:last-child {
 border-bottom: none !important;
}

.course-navigation ul.sub-menu li a {
 display: block !important;
 text-decoration: none !important;
 color: #333 !important;
}

/* Container for the standalone navigation arrows */
.lesson-nav-arrows {
 display: flex;
 gap: 10px;
 align-items: center;
 margin: 10px 0;
}

/* Base styling for each standalone arrow button */
.lesson-nav-btn {
 width: 50px;
 height: 40px;
 border: 1px solid #ccc;
 border-radius: 4px;
 background-color: #fff;
 cursor: pointer;
 position: relative;
}

/* Draw an “open” arrowhead with CSS borders */
.lesson-nav-btn::after {
 content: "";
 position: absolute;
 top: 50%;
 left: 50%;
 width: 8px;
 height: 8px;
 border-top: 2px solid #000;
 border-right: 2px solid #000;
 transform: translate(-50%, -50%) rotate(45deg);
}

/* Flip for previous arrow */
.lesson-nav-prev::after {
 transform: translate(-50%, -50%) rotate(-135deg);
}

/* Next arrow orientation unchanged */
.lesson-nav-next::after {
 transform: translate(-50%, -50%) rotate(45deg);
}

/* Course progress bar wrapper */
.course-progress-bar-wrapper {
 border: 1px solid #e1e1e1;
 border-radius: 6px;
 padding: 10px;
 margin: 15px 0;
 background-color: #fff;
}

.course-progress-bar-text {
 font-size: var(--ct-text-font-size);
 margin-bottom: 10px;
}

.course-progress-bar-outer {
 position: relative;
 width: 100%;
 height: 10px;
 background-color: #e8e8e8;
 border-radius: 5px;
 overflow: hidden;
 margin-bottom: 10px;
}

.course-progress-bar-fill {
 position: absolute;
 height: 100%;
 width: 0%;
 background-color: #666;
 transition: width 0.4s ease;
}

.course-progress-bar-percent {
 font-size: 1em;
 text-align: right;
 color: #333;
}

/* Inline text navigation arrows (in the progress widget) */
.lesson-nav-progress-container {
 display: inline-flex;
 align-items: center;
}

.lesson-nav-progress-arrow {
 width: 20px;
 height: 20px;
 position: relative;
 cursor: pointer;
 background: none;
 border: none;
}

/* Draw open arrowheads in the progress widget */
.lesson-nav-progress-arrow::after {
 content: "";
 position: absolute;
 top: 50%;
 left: 50%;
 width: 6px;
 height: 6px;
 border-top: 2px solid #000;
 border-right: 2px solid #000;
 transform: translate(-50%, -50%) rotate(45deg);
}

/* Flip for previous in progress widget */
.lesson-nav-progress-prev::after {
 transform: translate(-50%, -50%) rotate(-135deg);
}

/* Next orientation in progress widget */
.lesson-nav-progress-next::after {
 transform: translate(-50%, -50%) rotate(45deg);
}

.lesson-nav-progress-text {
 font-size: var(--ct-text-font-size);
 text-align: var(--ct-text-align);
 flex-grow: 1;
}

/* Complete Lesson Button */
.complete-lesson-btn {
 display: inline-flex;
 align-items: var(--ct-btn-align-items);
 justify-content: var(--ct-btn-justify-content);
 padding: var(--ct-btn-padding);
 background-color: var(--ct-btn-bg-color);
 color: var(--ct-btn-text-color);
 border: var(--ct-btn-border);
 border-radius: var(--ct-btn-border-radius);
 cursor: pointer;
 font-size: var(--ct-btn-font-size);
}

.complete-lesson-btn .clb-icon {
 display: inline-block;
 margin-left: 5px;
 vertical-align: middle;
 width: 16px;
 height: 16px;
 background-size: contain;
 background-repeat: no-repeat;
}

.complete-lesson-btn .clb-save {
 background-image: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAyNCAyNCIgZmlsbD0ibm9uZSIgc3Ryb2tlPSIjZmZmZmZmIiBzdHJva2Utd2lkdGg9IjIiIHN0cm9rZS1saW5lY2FwPSJyb3VuZCIgc3Ryb2tlLWxpbmVqb2luPSJyb3VuZCI+PHBhdGggZD0iTTIxIDEySDVNMTEgNWw3IDctNyA3Ii8+PC9zdmc+");
 width: 13px;
 height: 13px;
}

.complete-lesson-btn .clb-check {
 background-image: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAyNCAyNCIgZmlsbD0ibm9uZSIgc3Ryb2tlPSIjZmZmZmZmIiBzdHJva2Utd2lkdGg9IjIiIHN0cm9rZS1saW5lY2FwPSJyb3VuZCIgc3Ryb2tlLWxpbmVqb2luPSJyb3VuZCI+PHBvbHlsaW5lIHBvaW50cz0iMjAgNiA5IDE3IDQgMTIiLz48L3N2Zz4=");
 width: 16px;
 height: 16px;
}

.complete-lesson-btn:active {
 animation: bounce 0.4s;
}

@keyframes bounce {
 0% { transform: scale(1); }
 30% { transform: scale(1.2); }
 50% { transform: scale(0.95); }
 70% { transform: scale(1.05); }
 100% { transform: scale(1); }
}

/* Continue Lesson Button */
.continue-lesson-btn {
 display: inline-flex;
 align-items: center;
 justify-content: center;
 padding: 10px 20px;
 margin-bottom: 20px;
 background-color: #2dc68a;
 color: #fff;
 border: none;
 border-radius: 4px;
 cursor: pointer;
 font-size: 1em;
}

.continue-lesson-btn .clb-icon {
 display: inline-block;
 margin-left: 5px;
 vertical-align: middle;
 width: 16px;
 height: 16px;
 background-size: contain;
 background-repeat: no-repeat;
}

/* Base reminder bar */
.lesson-backup-alert {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  z-index: 10000;
  background: #fffae6;
  border-bottom: 3px solid #f0c040;
  color: #333;
  padding: 12px 48px 12px 12px; /* space for close button */
  text-align: center;
  font-family: sans-serif;
  font-size: 15px;
}

/* Link styling */
.lesson-backup-alert a {
  color: #0073aa;
  text-decoration: underline;
}

/* Close button */
.lesson-backup-alert .lesson-backup-close {
  position: absolute;
  top: 8px;
  right: 12px;
  background: none;
  border: none;
  font-size: 20px;
  line-height: 1;
  cursor: pointer;
  color: #666;
}
.lesson-backup-alert .lesson-backup-close:hover {
  color: #000;
}

/* Push below the WP admin bar */
body.admin-bar .lesson-backup-alert {
  top: 32px;
}


/* Course Navigation Overview Table */
.course-nav-overview {
 width: 100%;
 border: 1px solid #ccc;
 border-radius: 8px;
 border-collapse: separate;
 border-spacing: 0;
 overflow: hidden;
 table-layout: fixed;
}

.course-nav-overview col.course-nav-col-left {
 width: 80%;
}
.course-nav-overview col.course-nav-col-right {
 width: 25%;
}

.course-nav-overview th,
.course-nav-overview td {
 padding: 8px;
 border: none;
}

.course-nav-overview thead th {
 background-color: #f8f8f8;
 font-weight: bold;
}

.course-nav-header-left,
.course-nav-cell-left {
 text-align: left;
}

.course-nav-header-right,
.course-nav-cell-right {
 text-align: left;
 white-space: nowrap;
}

/* Make overview headers bold without inline tags */
.course-nav-overview .course-nav-module-headecourse-nav-cell-left {
  font-weight: bold;
}

/* Buttons (Backup & Restore) */
.course-progress-backup-restore button,
.course-progress-backup-restore .cp-btn {
  background: #fff;
  color: #333;
  border: 1px solid darkgrey;
  padding: 10px 20px;
  border-radius: 4px;
  cursor: pointer;
  box-shadow: none;
  outline: none;
  transition: var(--bricks-transition);
  margin: 0;               /* remove extra margins */
  display: inline-block;   /* shrink to fit text */
}

/* Hover state */
.course-progress-backup-restore button:hover,
.course-progress-backup-restore .cp-btn:hover {
  background: #f7f7f7;
}

/* File-chooser input: auto width, aligned left */
.course-progress-backup-restore input[type="file"] {
  display: inline-block;
  width: auto;             /* let it size naturally */
  margin: 0;               /* no extra margin-left */
  padding: 6px 0px;       /* small padding for clickable area */
  border-style :none !important;
}

/* Other form fields—not full width by default */
.course-progress-backup-restore input:not([type="file"]),
.course-progress-backup-restore select,
.course-progress-backup-restore textarea {
  display: inline-block;
  width: auto;
  margin: 0;  
  padding: 6px 12px;
  line-height: 1.5;
  
}