/* 
 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;
}

.lesson-backup-alert {
 padding: 15px;
 background-color: #ffffe0;
 color: #000;
 border: 1px solid #ffd700;
 display: flex;
 align-items: center;
 gap: 10px;
 margin: 10px 0;
 font-family: sans-serif;
}

.lesson-backup-alert a {
 text-decoration: none !important;
}

.lesson-backup-icon svg {
 width: 24px;
 height: 24px;
 fill: currentColor;
}

.lesson-backup-message p {
 margin: 0;
 font-size: 16px;
}

.lesson-backup-message a {
 color: #000;
 text-decoration: underline;
}

/* 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-header .course-nav-cell-left {
  font-weight: bold;
}

/* assets/css/backup-restore.css */

/* assets/css/backup-restore.css */

.course-progress-backup-restore button {
  background: #f0f0f0;       /* light grey background */
  color: #000;               /* black text */
  border: 1px solid #000;    /* light grey border */
  margin-left: 13px;         /* space between buttons */
  padding: 10px 5px;         /* 10px top/bottom, 5px left/right */
  font-size: 18px;           /* 18px text */
  border-radius: 0;          /* square corners */
  cursor: pointer;
}

.course-progress-backup-restore button:hover {
  background: #e0e0e0;       /* slightly darker on hover */
}