#misc-controls .btn {
	margin: 0 3px;
}

:root {
    --moringa-light-blue: #eef7fc;
    --card-border-radius: 16px;
}

.drawer-toggles .drawer-toggler .btn{
      margin: 20px 16px !important;
      background-color: var(--moringa-orange) !important;
}

.cst_downld_icon {
    text-align: center;
    width: 150px;
    height: 150px;
    margin: 0 auto;
}

.cst_downld_icon i.fa-download,
.cst_downld_icon i.fa-calendar-check {
    font-size: 150px;
    opacity: 10%;
}

.cst_calendar_icon {
    text-align: center;
    width: 150px;
    height: 150px;
    margin: 0 auto;
}

.cst_calendar_icon i.fa-solid.fa-calendar-check {
    font-size: 150px;
    opacity: 10%;

}


.moringa-panel.cst_border{
  border: 1px solid color-mix(in srgb, var(--moringa-orange) 15%, transparent);
}

.moringa-progress-msg {
   font-size: 12px;
    line-height: 1.2rem;
    font-style: italic;
    color: color-mix(in srgb, var(--moringa-navy) 41%, transparent);
    padding: 10px;
    text-align: center;
}

.moringa-metric-title {
    font-size: 15px;
    color: var(--moringa-navy);
    margin: 12px 0;
    font-weight: 500;
}

ul.activity-list {
    margin-left: 31px;
    padding: 20px 0 20px 20px;
    color: var(--moringa-navy) !important;
}

ul.activity-list a {
    color: var(--moringa-navy);
}

.dot-b {
    border-top: 1px dashed color-mix(in srgb, var(--moringa-navy) 10%, transparent);
    padding: 10px 0;
}

.moringa-panel.cst_border .moringa-panel-title {
    border-bottom: 1px solid color-mix(in srgb, var(--moringa-cyan) 15%, transparent);
    padding-bottom: 15px;
    font-size: 20px;
}

body.pagelayout-mydashboard header#page-header {
    display: none !important;
}

div#topofscroll,
div#page-content,
div#region-main-box,
#page-my-index #region-main,
.block_moringa_user_dashbaord{
  background:transparent !important;
}

body[data-bs-theme="dark"] div#page {
       background: #060910 !important;
}

body[data-bs-theme="dark"] div#topofscroll{
     background: #0D111A !important;
     border: 1px solid #23252b !important;
}
body[data-bs-theme="dark"] div#page-content .card-body{
   background-color: #0E111A;
   color: #fff !important;
}

body[data-bs-theme="dark"] div#page-content .card-body .moringa-welcome{
   color: #fff !important;
}

body[data-bs-theme="dark"] div#page-content .card-body .moringa-alert-banner {
    background: #060910 !important;
}

body[data-bs-theme="dark"] div#page-content .card-body .moringa-alert-banner .cst_alert_inner {
    color: #fff !important;
}

body[data-bs-theme="dark"] .moringa-hero-card {
    background-color: #060910;
    border-color: var(--moringa-orange) !important;
}

body[data-bs-theme="dark"] .moringa-hero-startdate {
    color: #fff;
}

body[data-bs-theme="dark"] div#page-content .card-body .moringa-main {
    color: #fff !important;
}

body[data-bs-theme="dark"] div#page-content .card-body .moringa-main .moringa-metric-card {
        background: #0d111a;
        border-color: var(--moringa-orange);
    }

body[data-bs-theme="dark"] div#page-content .card-body .moringa-main .moringa-metric-card .moringa-bar-fill {
   background-color: var(--moringa-orange);
}
body[data-bs-theme="dark"] div#page-content .card-body .moringa-main .moringa-metric-card .moringa-metric-title {
   color: #fff;
}

body[data-bs-theme="dark"] .moringa-circle-stroke-blue{
  stroke: var(--moringa-orange);
}

body[data-bs-theme="dark"] .moringa-panel {
    background-color: #0d111a;
    border-color: #23252b;
}

body[data-bs-theme="dark"] .moringa-panel p,
body[data-bs-theme="dark"] .moringa-panel li,
body[data-bs-theme="dark"] .moringa-panel .moringa-panel-title,
body[data-bs-theme="dark"] .moringa-panel div,
body[data-bs-theme="dark"] .moringa-metric-card .moringa-metric-value{
    color: #fff !important;
}

body[data-bs-theme="dark"] .moringa-panel i.fa {
    color: var(--moringa-orange);
}

body[data-bs-theme="dark"] .moringa-panel a {
        color: #fff;
}

.moringa-dash-container {
    color: #0b1a30;
    background-color: transparent;
}

.cst_alert_inner {
    display: flex;
    gap: 10px;
    align-items: center;
}

.moringa-welcome {
    font-size: 26px;
    font-weight: 700;
    color: #06152d;
    margin-bottom: 24px;
}

/* Layout Architecture split */
.moringa-layout {
    display: grid;
    grid-template-columns: 300px 1fr;
    gap: 24px;
}

@media (max-width: 991.98px) {
    .moringa-layout {
        grid-template-columns: 1fr;
    }
    /* Mobile/tablet: main content appears before the sidebar.
       On PC the sidebar stays on the left (no order applied there). */
    .moringa-main {
        order: 1;
    }
    .moringa-sidebar {
        order: 2;
    }
}

/* Component Cards Base */
.moringa-panel {
    background: color-mix(in srgb, var(--moringa-orange) 1%, transparent);
    border: 1px solid color-mix(in srgb, var(--moringa-cyan) 15%, transparent);
    border-radius: var(--card-border-radius);
    padding: 20px;
    margin-bottom: 20px;
}

.moringa-panel.border-cst{
border: 5px solid #fff3ef !important;
}

.moringa-panel-title {
    font-size: 18px;
    font-weight: 700;
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 16px;
    color: var(--moringa-navy);
}

.moringa-sidebar .moringa-panel:last-child {
    min-height: 280px;
}

/* Sidebar specifics */
.moringa-sidebar .course-link {
    border-radius: 8px;
    color: #052c42;
    font-weight: 600;
    padding: 10px 14px;
    display: block;
    text-decoration: none;
    margin: 10px 0 14px 23px;
}
.course-link.active-course {
    background-color: #DCE9EF;
    background-color: color-mix(in srgb, var(--moringa-cyan) 11%, transparent);
    border: 1px solid color-mix(in srgb, var(--moringa-cyan) 25%, transparent) !important
}
.moringa-list-item {
    padding: 8px 14px;
    color: #4a5568;
    position: relative;
    display: flex;
    align-items: center;
}
.moringa-list-item::before {
    content: "○";
    margin-right: 8px;
    color: #a0aec0;
}

/* Alert Banner component */
.moringa-alert-banner {
    background-color: color-mix(in srgb, var(--moringa-orange) 10%, transparent);
    border: 1px solid color-mix(in srgb, var(--moringa-orange) 50%, transparent);
    border-radius: var(--card-border-radius);
    padding: 16px 12px;
    display: flex;
    justify-content: space-between;
    align-items: flex-end;
    margin-bottom: 24px;
    flex-direction: column;
}

.moringa-alert-btn {
    background: var(--moringa-orange);
    color: #fff !important;
    padding: 2px 14px;
    border-radius: 20px;
    font-weight: 600;
    text-decoration: none !important;
    white-space: nowrap;
}

/* Hero Course Block */
.moringa-hero-card {
    border: 1px solid color-mix(in srgb, var(--moringa-orange) 50%, transparent);
    border-radius: 20px;
    background: #FFFFFF80;
    padding: 10px 20px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 24px;
}

.moringa-hero-badge {
    background-color: var(--moringa-light-blue);
    color: #2b6cb0;
    font-size: 12px;
    padding: 4px 10px;
    border-radius: 100px;
    display: inline-block;
    margin-top: 6px;
    border: 1px solid;
}

.moringa-hero-startdate {
    font-size: 13px;
    color: var(--moringa-navy);
    margin-top: 8px;
}

.moringa-btn-outline {
    border: 2px solid var(--moringa-orange);
    color: var(--moringa-orange) !important;
    background: transparent;
    padding: 6px 14px;
    border-radius: 100px;
    font-weight: 700;
    text-decoration: none !important;
    transition: 0.2s ease;
}
.moringa-btn-outline:hover {
    background: var(--moringa-orange);
    color: #ffffff !important;
    border: 2px solid var(--moringa-orange);
}

.moringa-panel.border-cst h2.moringa-panel-title {
    font-size: 22px;
    padding: 20px 15px 20px 20px;
    border-bottom: 1px solid #efefef;
}

/* Circular Indicators & Progress Metrics Grid */
.moringa-metrics-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 16px;
    margin-bottom: 24px;
}

@media (max-width: 768px) {
    .moringa-metrics-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

.moringa-metric-card {
    background: #FFFFFF80;
    border: 1px solid color-mix(in srgb, var(--moringa-orange) 15%, transparent);
    border-radius: var(--card-border-radius);
    padding: 20px;
    text-align: center;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: space-between;
    min-height: 180px;
     box-shadow: rgba(100, 100, 111, 0.2) 0px 7px 29px 0px;

}

/* Custom Progress Bar Override */
.moringa-bar-container {
    width: 100%;
    background-color: #edf2f7;
    border-radius: 10px;
    height: 12px;
    overflow: hidden;
}
.moringa-bar-fill {
    background-color: var(--moringa-cyan);
    height: 100%;
    border-radius: 10px;
}

/* Simplified Vector Progress Circles */
.moringa-circle-svg {
    width: 70px;
    height: 70px;
    transform: rotate(-90deg);
}
.moringa-circle-bg {
    fill: none;
    stroke: #edf2f7;
    stroke-width: 6;
}
.moringa-circle-stroke {
    fill: none;
    stroke: #0e3054;
    stroke-width: 6;
    stroke-linecap: round;
    transition: stroke-dashoffset 0.3s;
}
.moringa-circle-stroke-blue {
    stroke: var(--moringa-cyan);
}

.moringa-metric-value {
    font-size: 28px;
    font-weight: 700;
    color: #0b1a30;
}

/* Sub Content Blocks Section split */
.moringa-sub-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 15px;
}

@media (max-width: 768px) {
    .moringa-sub-grid {
        grid-template-columns: 1fr;
    }
}

.moringa-download-row {
    display: flex;
    align-items: center;
    gap: 14px;
    margin-bottom: 16px;
}
.moringa-async-placeholder {
    background-color: color-mix(in srgb, var(--moringa-orange) 10%, transparent);
    border: 1px solid color-mix(in srgb, var(--moringa-orange) 50%, transparent);
    border-radius: var(--card-border-radius);
    padding: 16px 12px;
    margin-bottom: 24px;
}
.moringa-async-spinner {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 13px;
    font-style: italic;
    color: #4a5568;
    margin-bottom: 12px;
}
.moringa-async-spinner img {
    width: 16px;
    height: 16px;
}
.moringa-download-link {
    color: var(--moringa-orange) !important;
    font-weight: 600;
    text-decoration: none;
}
.moringa-download-link:hover {
    text-decoration: underline;
}
#topofscroll{
    background-color: #f2f3f7 !important;
}
.moringa-icon {
    font-size: 18px;
    color: #1f2a44;
}
.moringa-alert-banner i.fa-bell {
    color: var(--moringa-orange);
}

.moringa-enrolled-text {
    font-size: 17px;
}

.moringa-icon-lg {
    font-size: 24px;
    color: #4a5568;
    width: 30px;
    text-align: center;
}
.course-img-box{
    width: 164px;
    height: 96px;
    border: none;
    border-radius: 20px !important;
    margin: 0 !important;
}

.course-img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: 20px;
}
/* Polished empty state container */
.moringa-empty-state {
    padding: 16px 14px;
    color: #6c757d;
    font-size: 13px;
    font-style: italic;
    display: flex;
    align-items: center;
    gap: 8px;
    background-color: #fafafa;
    border-radius: 4px;
    margin: 8px 0 16px 0;
    border: 1px dashed #e0e0e0;
}
.moringa-empty-state i {
    font-size: 14px;
    color: #a0a0a0;
}
.not-enrolled-card {
    text-align: center;
    padding: 30px 20px;
    background: #fdfdfd;
    border: 1px dashed #dcdcdc;
    border-radius: 8px;
    margin: 15px 0;
}

.not-enrolled-icon {
    font-size: 32px;
    color: #a0a0a0;
    margin-bottom: 12px;
}

.not-enrolled-title {
    font-size: 16px;
    font-weight: 600;
    color: #333333;
    margin-bottom: 6px;
}

.not-enrolled-sub {
    font-size: 13px;
    color: #666666;
    max-width: 400px;
    margin: 0 auto;
    line-height: 1.4;
}


/* ==========================================================================
   Responsive polish (mobile / tablet)
   ========================================================================== */

/* Hero "You're now enrolled in" card: stack on small screens. */
@media (max-width: 576px) {
    .moringa-hero-card {
        flex-direction: column;
        align-items: center;
        gap: 16px;
        text-align: center;
    }
    /* Stack the "You're now enrolled in:" text above the course title — they
       sit side-by-side otherwise, which crams them into narrow columns on phones. */
    .moringa-hero-card > .d-flex {
        flex-direction: column;
        align-items: center;
        gap: 8px;
    }
    .moringa-hero-card .moringa-btn-outline {
        width: 100%;
        text-align: center;
    }
    .moringa-welcome {
        font-size: 22px;
    }
    .moringa-dash-container {
        padding: 0 4px;
    }
}

/* Very small phones: metrics to a single column so cards stay legible. */
@media (max-width: 400px) {
    .moringa-metrics-grid {
        grid-template-columns: 1fr;
    }
}

/* ==========================================================================
   Classes extracted from inline styles in block_moringa_user_dashbaord.php
   ========================================================================== */
.cst_alert_inner {
    font-size: 14px;
    color: #4a5568;
}
.moringa-course-bullet {
    margin-right: 8px;
    font-size: 10px;
}
.moringa-hero-title {
    color: var(--moringa-orange);
    font-size: 20px;
}
.moringa-section-title {
    font-size: 18px;
}
.moringa-metric-num {
    font-size: 18px;
}
/* Larger progress circle (attendance) — must sit after .moringa-circle-svg. */
.moringa-circle-svg-lg {
    width: 100px;
    height: 100px;
}
.moringa-overdue {
    color: #dc2626;
}
.moringa-progress-msg-lg {
    font-size: 15px;
}
.moringa-download-icon {
    font-size: 24px;
    color: #4a5568;
}
.moringa-download-img {
    width: 24px;
    height: 24px;
}
.moringa-download-label {
    font-size: 13px;
    font-weight: 600;
    color: #2d3748;
}
/* ==========================================================================
   Payment banner placement
   The banner/async slot (.moringa-payment-slot) is a direct grid child of
   .moringa-layout, not a child of .moringa-sidebar, so it can be reordered
   independently of the sidebar. Desktop: it sits at the top of the sidebar
   (left) column, with the main content spanning the right column. Mobile: it
   moves above the main content. When there's no banner, .moringa-layout has no
   .has-payment class and the original two-column layout applies unchanged.
   ========================================================================== */
@media (min-width: 992px) {
    .moringa-layout.has-payment {
        grid-template-areas:
            "payment main"
            "sidebar main";
        grid-template-rows: min-content 1fr;
        align-items: start;
    }
    .moringa-layout.has-payment .moringa-payment-slot { grid-area: payment; }
    .moringa-layout.has-payment .moringa-sidebar { grid-area: sidebar; }
    .moringa-layout.has-payment .moringa-main { grid-area: main; }
}
@media (max-width: 991.98px) {
    /* Banner first, above the main content; main (order 1) and sidebar (order 2)
       keep the order set in the base responsive rule. */
    .moringa-payment-slot { order: 0; }
}
/* The grid gap already spaces the slot from what follows, so drop the banner's
   own bottom margin to avoid doubling it up. */
.moringa-payment-slot .moringa-alert-banner,
.moringa-payment-slot.moringa-alert-banner,
.moringa-payment-slot.moringa-async-placeholder {
    margin-bottom: 0;
}
/* "Continue Learning" held while the portal payment check syncs in the background. */
.moringa-btn-syncing {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    opacity: 0.6;
    pointer-events: none;
    cursor: progress;
}
.moringa-btn-spinner {
    width: 14px;
    height: 14px;
    border: 2px solid currentColor;
    border-right-color: transparent;
    border-radius: 50%;
    display: inline-block;
    animation: moringa-btn-spin 0.75s linear infinite;
    flex-shrink: 0;
}
@keyframes moringa-btn-spin {
    to { transform: rotate(360deg); }
}