.llms-sd-notes {
  display: flex;
  flex-direction: column;
  position: sticky;
  top: 0;
  right: 0;
  max-width: 90px;
  width: 100%;
  height: 100dvh;
  padding-block-start: 145px;
  padding-inline: 31px;
  background: var(--color-light);
  transition: max-width 0.3s ease, padding 0.3s ease;
}

.llms-sd-notes .llms-sd-items {
  display: flex;
  flex-direction: column;
  gap: 35px;
  list-style-type: none;
  padding: 0;
  margin: 0;
}

.llms-sd-notes .llms-sd-items .llms-sd-item a {
  display: flex;
  cursor: pointer;
}

.llms-sd-notes .llms-sd-icon {
    display: inline-flex;
    transition: fill 0.3s ease;
}

/* ==========================================
   LLMS Custom Notes + TOC Overlay Styles
   ========================================== */

.llms-overlay-locked {
	overflow: hidden;
	touch-action: none;
}

.llms-overlay-locked #page,
.llms-overlay-locked main,
.llms-overlay-locked .site,
.llms-overlay-locked .elementor-location-single,
.llms-overlay-locked .llms-sd-items {
	pointer-events: none;
}

#llms-overlay-wrapper,
#llms-overlay-wrapper * {
	pointer-events: auto;
}

.llms-overlay-switch {
	display: flex;
    gap: 15px;
}

#llms-overlay-wrapper {
	width: 518px;
	transform: translateX(100%);
	position: fixed;
	top: 0;
	right: 0;
	z-index: 99999;
	transition: transform 0.5s ease;
	height: 100vh;
    background: var(--color-light);
	box-shadow: 0 4px 24px 0 rgba(0, 0, 0, 0.10);
}

#llms-overlay-wrapper.llms-overlay-opened {
	transform: translateX(0);
}

.llms-overlay-header {
	display: flex;
	align-items: center;
	padding: 44px 74px 45px 36px;
}

#llms-overlay-wrapper .llms-overlay-header button {
    all: unset; 
    display: inline-block;
    box-sizing: border-box;
    line-height: 0;
    cursor: pointer;
    display: flex;
	align-items: center;
	justify-content: center;
}

#llms-overlay-wrapper .llms-overlay-switch button {
	width: 60px;
	height: 60px;
	border: none;
	border-radius: 10px;
	background: transparent;
	transition: all 0.3s ease;
}

#llms-overlay-wrapper .llms-overlay-switch button.active {
	background: var(--color-dark);
}

.llms-overlay-switch button.active svg path {
    fill: #fff !important;
}

.llms-overlay-title {
	flex: 1;
	margin: 0;
    padding-left: 39px;
    color: var(--color-dark);
    font-family: var(--font-primary);
    font-size: 32px;
    font-weight: 600;
    line-height: 34px;
    letter-spacing: -1.6px;
}

.overlay-panel {
	overflow-y: auto;
	height: calc(100vh - 60px);
}

.overlay-panel:not(.active) {
    display: none !important;
}

.overlay-panel.active {
	display: block;
}

#llms-overlay-toc {
	padding: 0 30px 50px 56px;
    max-height: calc(100vh - 120px);
    overflow-y: auto;
}

.overlay-panel .llms-section-title {
	color: #979797;
    font-family: var(--font-primary);
    font-size: 18px;
    font-weight: 700;
    min-height: 62px;
    display: flex;
    align-items: center;
    letter-spacing: -0.9px;
    margin: 0 0 18.5px;
    padding-block: 20px;
}

.overlay-panel .llms-lesson-list {
	display: flex;
    flex-direction: column;
    gap: 24px;
	list-style: none;
	padding: 0;
	margin: 0 0 18.5px;
}

.overlay-panel .llms-lesson-entry {
	display: flex;
	align-items: center;
	gap: 26px;
    width: fit-content;
    text-decoration: none;
}

.overlay-panel div.llms-lesson-entry {
	cursor: not-allowed;
}

.overlay-panel .llms-lesson-indicator {
	width: 24px;
	height: 24px;
	border-radius: 50%;
	display: flex;
	align-items: center;
	justify-content: center;
	border: 1px solid var(--color-primary);
	background: var(--color-light);
}

.overlay-panel .llms-lesson-indicator.complete {
	background: #a7a8ab;
	border-color: #a7a8ab;
}

.overlay-panel .llms-lesson-indicator.current {
	background: var(--color-primary);
}

.overlay-panel .llms-lesson-indicator.locked {
	background: var(--color-light);
}

.overlay-panel .llms-lesson-indicator svg {
	display: block;
}

.overlay-panel .llms-lesson-item .llms-lesson-title {
	color: var(--color-dark);
    font-family: var(--font-primary);
    font-size: 16px;
    font-weight: 500;
    line-height: 24px;
    letter-spacing: -0.8px;
    transition: color 0.3s ease;
}

.overlay-panel .llms-lesson-item a.llms-lesson-entry:hover .llms-lesson-title {
	color: var(--color-primary);
}

/* NOTES OVERLAY FIX */
#llms-overlay-notes.llms-note-wrapper {
	inset: auto !important;
	width: 100% !important;
	height: 100% !important;
	padding: 0 !important;
	border: none !important;
	box-shadow: none !important;
    cursor: auto;
}

/* Let the note editor be fully interactive */
#llms-overlay-notes .llms-note-editor-body,
#llms-overlay-notes .llms-note-editor-field,
#llms-overlay-notes .ql-editor {
	cursor: text !important;
	user-select: text !important;
	pointer-events: auto !important;
}

/* Prevent drag behavior inside overlay */
#llms-overlay-notes .ui-resizable-handle {
	display: none !important;
}

.llms-note-body {
	padding: 6px 36px 0;
}

.ql-editor {
  background: var(--color-bg-soft);
  box-shadow: 0 0 16px 0 rgba(0, 0, 0, 0.05) inset;
}

.llms-note-actions-wrapper {
	position: fixed;
    bottom: 0;
    width: 100%;
    padding: 29px 60px 29px 36px;
    background: var(--color-light);
}

.llms-note-actions-wrapper .llms-note-actions {
	margin: 0;
}

.llms-note-actions li {
	display: flex;
    align-items: center;
}

.llms-note-actions .llms-note-delete,
.llms-note-actions .llms-note-delete:hover {
	all: unset;
	display: flex;
    cursor: pointer;
}

.llms-note-actions .llms-note-delete path {
	transition: fill 0.3s ease;
}

.llms-note-actions .llms-note-delete:hover path {
	fill: #990000; 
}

.llms-note-actions .llms-note-submit {
    display: flex;
    align-items: center;
    justify-content: center;
	width: 189.759px;
    height: 40px;
    border-radius: 27px;
	border: 2px solid #008DAD;
    background: var(--color-primary);
    color: #F7F7F7;
    font-family: var(--font-primary);
    font-size: 18px;
    font-weight: 700;
    line-height: 18px;
    letter-spacing: -0.9px;
    padding: 0 !important;
}

.llms-note-actions .llms-note-submit:hover,
.llms-note-actions .llms-note-submit:focus {
	background: var(--color-primary);
}

.llms-note-actions .llms-note-submit:not(:disabled):hover {
	background: var(--color-light);
	color: var(--color-primary);
}

.overlay-panel .llms-spinning {
	display: none !important;
}