/*Magsaysay Training Center 2025 Brand Guideline*/
/* ==========================================================================
   MTC BRANDING VARIABLES update as of 09.20.2025
   ========================================================================== */
:root {
    /* Blue Color Palette */
    --color-primary: #0C1B52; /* primary blue */
    --color-secondary: #0046AD; /* used for subtext */
    --color-tertiary: #33A0F9; /* used for hovered assets */
    --color-darkblue: #091238; /* */
    --color-royalblue: #005CA8;
    /* Red Color Palette */
    --color-red: #FF3B3B; /* “Red” used for subtext */
    --color-light-red: #FF3B3B; /* used for subtext */
    /* Other Tone Pallete */
    --color-light-gray: #CCD8ED; /* borders & line breaks */
    --color-white: #FFFFFF;
    --color-off-white: #F8F8F8;
    --color-black: #222222;
    --color-yellow: #F5A800; /* “Yellow” */
    --color-lighter-blue: #CCD8ED; /*for training calendar nav menu inactive*/
    --color-d9d9d9: #D9D9D9;
    --color-green: #198754;
    --color-light: #DDD;
    /* Typography */
    --ff-base: 'Poppins', sans-serif;
    --fs-base: 14px;
    --fw-normal: 400;
    --fw-bold: 700;
    --color-brand-deep: #071651; /* used for FC header, toggles */
    --color-brand-accent: #004aad; /* used in wizard tabs */
    --color-brand-alt: #003968; /* modal title accents */
    /* SUPPORT ASSISTANT */
    --magone-ink-deep: #0b1220;
    --magone-ink: #222;
    --magone-panel: #ffffff;
    --magone-panel-2: #f8f9fb;
    --magone-border: #e5e7ef;
    --magone-user: #6a4cff;
    --magone-bot: #f2f4f8;
    --magone-bot-ink: #0f172a;
    --radius-xl: 18px;
    --radius-lg: 14px;
    --shadow-3: 0 14px 40px rgba(24,31,68,.18);
    --shadow-2: 0 6px 18px rgba(24,31,68,.14);
}

/* ==========================================================================
   GLOBAL TYPOGRAPHY
   ========================================================================== */
body {
    font-family: var(--ff-base);
    font-size: var(--fs-base);
    font-weight: var(--fw-normal);
    color: var(--color-black);
    line-height: 1.5;
}

/* Heading scale */
.fs-80 {
    font-size: 80px;
    line-height: 1.5;
    font-weight: var(--fw-bold);
}
.fs-60 {
    font-size: 60px;
    line-height: 1.35;
    font-weight: var(--fw-bold);
}
.fs-50 {
    font-size: 50px;
    line-height: 1.2;
    font-weight: var(--fw-bold);
}
.fs-40 {
    font-size: 40px;
    line-height: 1.2;
    font-weight: var(--fw-bold);
}
.fs-34 {
    font-size: 34px;
    line-height: 1.2;
    font-weight: var(--fw-bold);
}
.fs-30 {
    font-size: 30px;
    line-height: 1.2;
    font-weight: var(--fw-bold);
}
.fs-26 {
    font-size: 26px;
    line-height: 1.2;
    font-weight: var(--fw-bold);
}
.fs-24 {
    font-size: 24px;
    line-height: 1.3;
    font-weight: var(--fw-bold);
}
.fs-20 {
    font-size: 20px;
    line-height: 1.3;
    font-weight: var(--fw-bold);
}
.fs-18 {
    font-size: 18px;
    line-height: 1.4;
    font-weight: var(--fw-normal);
}
.fs-16 {
    font-size: 16px;
    line-height: 1.5;
    font-weight: var(--fw-normal);
}
.fs-14 {
    font-size: 14px;
    line-height: 1.6;
    font-weight: var(--fw-normal);
}
.fs-12 {
    font-size: 12px;
    line-height: 1.6;
    font-weight: var(--fw-normal);
}
/* ==========================================================================
   CUSTOMIZED FONT COLORS
   ========================================================================== */
.text-primary {
    color: var(--color-primary) !important;
}
.text-secondary {
    color: var(--color-secondary) !important;
}
.text-tertiary {
    color: var(--color-tertiary) !important;
}
.text-darkblue {
    color: var(--color-darkblue) !important;
}
.text-lightgray {
    color: var(--color-light-gray) !important;
}
.text-royalblue {
    color: var(--color-royalblue) !important;
}
.text-titledesc-gray {
    color: #4A4A4A;
}
.text-sub {
    color: var(--color-subtext);
}
.text-red {
    color: var(--color-red) !important;
}
/* ==========================================================================
   BUTTONS
   ========================================================================== */
.btn-primary {
    display: inline-block;
    font-size: 16px;
    color: var(--color-white);
    background: var(--color-primary);
    border: 1px solid var(--color-primary);
    border-radius: 5px;
    text-align: center;
}
    .btn-primary:hover {
        color: var(--color-primary);
        border: 1px solid var(--color-primary);
        background: transparent;
        border-radius: 5px;
        box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
        transition: all 0.3s ease;
    }
.btn-secondary {
    display: inline-block;
    font-size: 16px;
    color: var(--color-secondary);
    background: var(--color-white);
    border: 1px solid var(--color-secondary);
    border-radius: 5px;
    text-align: center;
}
    .btn-secondary:hover {
        background: var(--color-white);
        color: var(--color-secondary);
    }
.btn-tertiary {
    display: inline-block;
    font-size: 16px;
    color: var(--color-tertiary);
    background: var(--color-white);
    border: 1px solid var(--color-tertiary);
    border-radius: 5px;
    text-align: center;
}
    .btn-tertiary:hover {
        background: var(--color-white);
        color: var(--color-tertiary);
    }
/* ==========================================================================
   COLOR BACKGROUNDS
   ========================================================================== */
.bg-primary {
    background: var(--color-primary) !important;
}
.bg-secondary {
    background: var(--color-secondary) !important;
}
.bg-lightblue {
    background: var(--color-lighter-blue) !important;
}
.bg-tertiary {
    background: var(--color-tertiary) !important;
}
.bg-card-gradient {
    background: linear-gradient(to bottom, var(--color-secondary) 0%, var(--color-darkblue) 100%);
}
.bg-d9d9d9 {
    background: var(--color-d9d9d9) !important;
}
/* ==========================================================================
CUSTOMIZED GRADIENT/SOLID BUTTONS
========================================================================== */
.btn-gradient-primary {
    background: linear-gradient(90deg, var(--color-tertiary) 0%, var(--color-primary) 100%);
    color: var(--color-white);
    border: none;
    border-radius: 5px;
    transition: background 0.6s ease, transform 0.2s ease;
}
    .btn-gradient-primary:hover {
        /*background: linear-gradient(90deg, var(--color-primary) 0%, var(--color-tertiary) 100%);*/
        transform: translateY(-2px); 
    }
.btn-gradient-vertical {
    background: linear-gradient(to bottom, var(--color-tertiary) 0%, var(--color-secondary) 100%);
    color: var(--color-white);
    border: none;
    border-radius: 5px;
    transition: background 0.6s ease, transform 0.2s ease;
}
    .btn-gradient-vertical:hover {
        /*background: linear-gradient(to bottom, var(--color-secondary) 0%, var(--color-tertiary) 100%);*/
        transform: translateY(-2px); 
    }
.btn-gradient-primary,
.btn-gradient-vertical {
    color: var(--color-white) !important;
}

.btn-darkblue {
    background: var(--color-primary);
    color: var(--color-white);
    border: none;
    border-radius: 5px;
    height: 50px;
    width: 200px;
    font-size: 16px;
}

.btn-red {
    background: var(--color-red);
    color: var(--color-white);
    border: none;
    border-radius: 5px;
    height: 50px;
    width: 200px;
    font-size: 16px;
}

.btn-green {
    background: var(--color-green);
    color: var(--color-white);
    border: none;
    border-radius: 5px;
    height: 50px;
    width: 200px;
    font-size: 16px;
}

/* ==========================================================================
   OUTLINED / SECONDARY BUTTONS
   ========================================================================== */
.btn-outline-primary {
    border: 1px solid var(--color-primary);
    color: var(--color-primary);
    background: transparent;
    border-radius: 5px;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
    transition: all 0.3s ease;
}
    .btn-outline-primary:hover {
        background: var(--color-primary);
        color: var(--color-white);
    }
.btn-outline-secondary {
    border: 1px solid var(--color-secondary);
    color: var(--color-primary);
    background: transparent;
    border-radius: 5px;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
    transition: all 0.3s ease;
}
    .btn-outline-secondary:hover {
        background: var(--color-secondary);
        color: var(--color-white);
    }
.btn-outline-upload {
    border: 2px solid #0C1B52;
    background: #fff;
    color: #0C1B52;
    border-radius: 5px;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    box-shadow: 0 2px 5px rgba(0,0,0,0.1);
}

/* ==========================================================================
   FORM CONTROLS & SEARCH BAR
   ========================================================================== */
.mtc-search-bar {
    display: flex;
    align-items: center;
    padding: 8px 16px;
    font-size: 16px;
    border: 2px solid var(--color-light);
    border-radius: 5px;
    background: var(--color-white);
}
    .mtc-search-bar input {
        flex-grow: 1;
        border: none;
        outline: none;
        font-size: inherit;
    }
    .mtc-search-bar .icon {
        margin-left: 8px;
    }
/* ==========================================================================
   NAVIGATION (COMPONENT STYLES)
   ========================================================================== */
.mtc-nav-main {
    font-size: 16px;
    font-weight: var(--fw-bold);
    border-bottom: 3px solid var(--color-primary);
    margin-bottom: .5rem;
}
.mtc-nav-courses {
    font-size: 24px;
    font-weight: var(--fw-bold);
    border-bottom: 3px solid var(--color-primary);
    margin-bottom: .5rem;
}
.mtc-nav-text {
    color: var(--color-black);
}
    .mtc-nav-text.active {
        color: var(--color-primary);
    }
/* ==========================================================================
   PAGINATION
   ========================================================================== */
.pagination .page-link {
    color: var(--color-black);
    font-size: 16px;
    padding: 8px 16px;
    border: 1px solid var(--color-light);
    border-radius: 2.5px;
    margin: 0 2px;
}
.pagination .page-item.active .page-link {
    background-color: var(--color-primary);
    border-color: var(--color-primary);
    color: var(--color-white);
}
/*----mobile view------*/
@media (max-width: 991.98px) {
    #mobileOffcanvasTop {
        /* height: 65vh;       e.g. 65% of viewport height */
        height: auto !important;
        max-height: 45vh;
        border-top-left-radius: 1rem;
        border-top-right-radius: 1rem;
    }

        #mobileOffcanvasTop .offcanvas-body {
            overflow-y: auto; /* allow vertical scrolling if content is tall */
            padding-top: 0.5rem; /* a little breathing room, if desired */
            padding-bottom: 0.5rem;
        }
}
#mobileOffcanvasTop .col-3 > a div.rounded-circle {
    transition: background 0.2s ease;
}
#mobileOffcanvasTop .col-3 > a:hover div.rounded-circle {
    background-color: #e9ecef; /* light gray on hover */
}
#mobileOffcanvasTop .fw-semibold {
    font-size: 0.9rem;
    margin-top: 0.25rem;
}
/* ==========================================================================
    REGISTER FORM ADJUSTMENT
========================================================================== */ 
#RegisterForm .form-control,
#RegisterForm .form-select {
    box-shadow: none !important;
    outline: 0;
}
    #RegisterForm .form-control.is-invalid,
    #RegisterForm .form-select.is-invalid {
        border-color: transparent !important;
        box-shadow: 0 0 0 1px var(--color-red) !important;
    }
        #RegisterForm .form-control.is-invalid:focus,
        #RegisterForm .form-select.is-invalid:focus {
            box-shadow: 0 0 0 1px var(--color-red) !important;
        }
#RegisterForm .input-group:focus-within {
    box-shadow: none !important;
}
/* ==========================================================================
   MODAL STYLES
   ========================================================================== */
/*----------------------------------------------------------*/
#modalTitle {
    color: #003968;
}
#modalBody {
    font-size: 16px;
}
.modal-content {
    border-radius: 5px;
    padding: 32px;
}
    .modal-content .modal-icon {
        display: block;
        width: 40px;
        height: 40px;
        margin: 0 auto 16px;
    }
    .modal-content .btn {
        margin-top: 16px;
    }
#registerModal label,
#loginModal label {
    font-size: 16px;
    color: #373542;
}
#registerModal .form-control,
#loginModal .form-control {
    margin-bottom: 12px;
}
#registerModal input[type="text"],
#loginModal input[type="text"] {
    font-size: 16px;
}
/* ==========================================================================
   CARD STYLES
   ========================================================================== */
.mtc-card {
    border-radius: 5px;
    padding: 16px;
    background: var(--color-white);
    box-shadow: 0 1px 3px rgba(0,0,0,0.1);
    border: 1px solid var(--color-black);
}
.course-category-card,
.course-card {
    position: relative;
    overflow: hidden;
    color: var(--color-white);
}
    .course-category-card::before,
    .course-card::before {
        content: "";
        position: absolute;
        inset: 0;
        background: linear-gradient( to bottom, rgba(69,69,69,0.7) 0%, rgba(69,69,69,0.7) 70% );
        pointer-events: none;
        z-index: 0;
    }
    .course-category-card .content,
    .course-card .content {
        position: relative;
        z-index: 1;
    }
/* ==========================================================================
   HOME/INDEX
   ========================================================================== */
.testimonial-highlight {
    border-radius: 5px;
    padding: 16px;
    background: var(--color-white);
    box-shadow: 0 4px 8px rgba(0,0,0,0.25);
}
    .testimonial-highlight .rating {
        font-size: 18px;
        color: var(--color-primary);
    }
    .testimonial-highlight .name {
        color: var(--color-secondary);
        font-style: italic;
        margin-top: .5rem;
    }
/* Clamp to ~10 lines */
/* tunables */
.testimonial {
    --lines: 6; /* how many lines to show before scrolling */
    --lh: 1.6; /* line-height (must match below) */
    line-height: var(--lh);
}

    /* initial: clamped with fade */
    .testimonial.clamp-10 {
        display: -webkit-box;
        -webkit-box-orient: vertical;
        -webkit-line-clamp: var(--lines);
        overflow: hidden;
        position: relative;
    }

        .testimonial.clamp-10::after {
            content: "";
            position: absolute;
            left: 0;
            right: 0;
            bottom: 0;
            height: 3rem;
            pointer-events: none;
            background: linear-gradient(to bottom, rgba(255,255,255,0), rgba(255,255,255,1));
        }
    /* scrollable mode: fixed height + scroll, no clamp, no fade */
    .testimonial.scrollable {
        display: block;
        -webkit-line-clamp: unset;
        max-height: calc(var(--lines) * var(--lh) * 1em);
        overflow: auto;
    }

        .testimonial.scrollable::after {
            display: none;
        }

        /* (optional) nicer thin scrollbar on webkit */
        .testimonial.scrollable::-webkit-scrollbar {
            width: 8px;
        }

        .testimonial.scrollable::-webkit-scrollbar-thumb {
            border-radius: 8px;
            background: #d3d8e0;
        }
/* Expanded state removes clamp & fade */
.testimonial.expanded {
    display: block;
    -webkit-line-clamp: unset;
}

    .testimonial.expanded::after {
        display: none;
    }

/* make the link look subtle */
.toggle-text {
    color: var(--color-primary);
    text-decoration: none;
    font-size: 12px;
    display: block; /* puts it on its own line */
    margin-left: auto; /* pushes to the right */
    text-align: right;
}

    .toggle-text:hover {
        text-decoration: underline;
    }
/* put this once */
.testimonial-card {
    --star-size: 20px;
}
    /* tweak this number */
    .testimonial-card .stars {
        font-size: var(--star-size);
        line-height: 1;
        letter-spacing: 2px; /* optional spacing between stars */
    }

    .testimonial-card .photo {
        width: calc(var(--star-size) * 5); /* same width as 5 stars */
        aspect-ratio: 1 / 1; /* keep it a circle */
        object-fit: cover;
    }
/* keep arrows outside and nicely sized */
.testimonial-carousel .ctrl {
    width: 42px;
    height: 42px;
    border-radius: 50%;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 4px 10px rgba(0,0,0,.08);
}

/* shrink on small screens */
@media (max-width: 576px) {
    .testimonial-carousel .ctrl {
        width: 36px;
        height: 36px;
    }
}
/* overlay only behind the caption */
/* WIDE caption panel only behind text */
#carouselExampleCaptions .caption-overlay {
    position: absolute; /* already absolute in BS */
    left: 50%;
    transform: translateX(-50%);
    bottom: 1.25rem;
    width: 90%; /* <- 90% of carousel width */
    max-width: 1200px; /* safety cap, tweak if needed */
    padding: 1rem 1.25rem;
    color: #fff;
    text-shadow: 0 1px 4px rgba(0,0,0,.35);
}

    /* translucent backdrop behind the caption text */
    #carouselExampleCaptions .caption-overlay::before {
        content: "";
        position: absolute;
        inset: -10px; /* breathing room around text */
        background: rgba(0,0,0,.22); /* adjust darkness here */
        border-radius: 14px;
        z-index: -1;
        backdrop-filter: blur(2px); /* optional */
    }

    /* typography tweaks so it doesn't feel cramped */
    #carouselExampleCaptions .caption-overlay h5 {
        margin: 0 0 .25rem 0;
        font-weight: 700;
        font-size: clamp(1.1rem, 2.2vw, 1.6rem);
    }

    #carouselExampleCaptions .caption-overlay p {
        margin: 0;
        font-size: clamp(.9rem, 1.6vw, 1.05rem);
        line-height: 1.4;
    }

@media (max-width:576px) {
    #carouselExampleCaptions .caption-overlay {
        left: 0;
        right: 0;
        transform: none;
        width: auto;
        margin: 0 1rem;
    }

        #carouselExampleCaptions .caption-overlay::before {
            inset: -6px;
        }
}
.hero {
    position: relative;
    z-index: 1;
    overflow: hidden;
}
.hero-bg {
    position: absolute;
    inset: 0; 
    width: 100%;
    height: 100%;
}
.hero-bg-gradient {
    background: linear-gradient(to bottom, #adcfea 0%, #ffffff 100%);
    z-index: -2;
}

/* image layer */
.hero-bg-image {
    background-repeat: no-repeat;
    background-position: center;
    background-size: cover;
    z-index: -1;
}
.partner-logos {
    row-gap: 1rem;
}
.logo-slot {
    max-width: 65px;
    width: 100%;
}
    .logo-slot img {
        display: block;
        width: 100%;
        height: auto;
        object-fit: contain;
    }
    .logo-slot img {
        filter: grayscale(20%);
        transition: filter .2s ease, transform .2s ease;
    }
        .logo-slot img:hover {
            filter: none;
            transform: translateY(-1px);
        }
/* ==========================================================================
   ABOUT PAGE
   ========================================================================== */
/* Card shell */
/* Shell */
.facility-card {
    position: relative;
    border-radius: 14px;
    overflow: hidden; /* rounds image and keeps overlay inside */
}

.facility-img {
    width: 100%;
    height: 210px; /* adjust to your tile height */
    object-fit: cover;
}

/* Position the badge at the bottom, centered */
/* position the badge at the bottom, perfectly centered */
.facility-caption {
    position: absolute;
    left: 50%;
    transform: translateX(-50%); /* true horizontal centering */
    bottom: 12px;
    width: 100%;
}

/* badge */
.facility-label {
    margin: 0 auto; /* center inside the 100% row */
    max-width: 88%; /* width of the badge */
    padding: .55rem .9rem;
    color: #fff;
    text-align: center;
    background: rgba(0,0,0,.34);
    border: 2px solid rgba(0,0,0,.45);
    border-radius: 12px;
    box-shadow: 0 6px 16px rgba(0,0,0,.22);
    backdrop-filter: blur(2px);
}

    /* typography: lighter + tighter */
    .facility-label h5 {
        margin: 0;
        font-weight: 500; /* was 800 — reduced */
        font-size: 1.05rem;
        line-height: 1.2;
    }

    .facility-label .facility-meta {
        margin-top: .25rem;
        font-size: .9rem;
        opacity: .95;
    }

/* small screens */
@media (max-width: 576px) {
    .facility-label {
        max-width: 92%;
        padding: .5rem .75rem;
    }

        .facility-label h5 {
            font-size: 1rem;
        }
}

/* ==========================================================================
   CALENDAR (FullCalendar v5+ overrides)
   ========================================================================== */
.fc .fc-daygrid-day {
    border: 1px solid var(--color-light);
}
.fc .fc-daygrid-day-number {
    color: var(--color-black);
}
.fc .fc-daygrid-day.fc-past .fc-daygrid-day-number,
.fc .fc-daygrid-day.fc-fr.other-month .fc-daygrid-day-number {
    color: var(--color-light);
}
.fc .fc-daygrid-day.fc-today {
    background-color: rgba(149,209,238,0.15);
}
.fc .fc-event {
    opacity: .3;
}
    .fc .fc-event.fc-event-start,
    .fc .fc-event.fc-event-end,
    .fc .fc-event.fc-event-dot {
        opacity: 1;
    }
.fc .fc-daygrid-event { /* “more” link 
    color: var(--color-tertiary) !important;*/
    cursor: pointer;
}
/* ==========================================================================
   UTILITY CLASSES
   ========================================================================== */
.w-25 {
    width: 25% !important;
}
.w-35 {
    width: 35% !important;
}
.w-50 {
    width: 50% !important;
}
.w-60 {
    width: 60% !important;
}
.w-70 {
    width: 70% !important;
}
.w-80 {
    width: 80% !important;
}
.w-100 {
    width: 100% !important;
}
.w--150{
    width:150px;
}
.mx-auto {
    margin-left: auto !important;
    margin-right: auto !important;
}
/* HEADER */
.mtc-header {
    /*border-bottom: 1px solid var(--color-light);*/
}
    .mtc-header .profile-pic {
        width: 150px;
        height: 150px;
        border: 1px solid gray;
        background: #fff;
        border-radius: 0.375rem; /* matches Bootstrap's rounded class */
        overflow: hidden;
        display: flex;
        align-items: center;
        justify-content: center;
        position: relative;
    }

    .mtc-header .profile-pic img {
        width: 100%;
        height: 100%;
        object-fit: cover;
    }


/* hover upload overlay */
.profile-upload-overlay {
    position: absolute;
    inset: 0;
    background: rgba(0,0,0,.45);
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: .375rem; /* same as .rounded */
    opacity: 0;
    transition: opacity .2s ease;
    border: none;
    outline: none;
}

.profile-pic:hover .profile-upload-overlay {
    opacity: 1;
    cursor: pointer;
}

.profile-upload-overlay .overlay-circle {
    width: 42px;
    height: 42px;
    border-radius: 50%;
    background: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 4px 12px rgba(0,0,0,.15);
    font-size: 1.1rem;
}

/* modal visuals */
.avatar-preview {
    width: 150px;
    height: 150px;
    overflow: hidden;
}

    .avatar-preview img {
        width: 100%;
        height: 100%;
        object-fit: cover;
    }

.hr-fat {
    border: 0;
    border-top: 4px solid #6c757d;
    opacity: 1;
    width: 160px;
    margin-left: auto;
    margin-right: auto;
}

.hr-muted {
    border-top-color: #6c757d;
}

/* light blue bar you already use */
.bg-lightblue {
    background-color: #e6f0ff;
}

.custom-hr {
    border: 0;
    border-top: 3px solid #0d6efd; /* Bootstrap primary blue */
    opacity: 1; /* makes sure it’s fully visible */
    width: 90%; /* control width */
    margin-left: auto;
    margin-right: auto;
}
.btn-wide {
    min-width: 250px; /* Adjust this number */
}
.btn-profile {
    min-width: 193px; /* Adjust this number */
}
.btn-bell {
    width: 40px;
    height: 40px;
    min-width: 50px; /* Adjust this number */
}

    .mtc-header h2 {
        margin-bottom: .25rem;
    }
    .mtc-header .btn {
        width: 200px;
        text-align: left;
    }
/* STATS NAV */
.mtc-stats-nav {
    gap: 1rem;
    overflow-x: auto;
}
    .mtc-stats-nav .nav-item,
    .mtc-stats-nav .stat-item {
        border-radius: 5px;
        transition: background .2s, color .2s;
    }
    .mtc-stats-nav .nav-item {
        color: var(--color-white);
        background: var(--color-primary);
    }
        .mtc-stats-nav .nav-item.active,
        .mtc-stats-nav .nav-item:hover {
            background: var(--color-secondary);
        }
    .mtc-stats-nav .stat-item {
        background: var(--color-off-white);
        color: var(--color-black);
    }
        .mtc-stats-nav .stat-item:hover {
            background: var(--color-light);
        }
    .mtc-stats-nav i {
        flex-shrink: 0;
    }
/* Mobile alignment */
@media (max-width: 991px) {
    .mtc-header {
        min-height: 250px; /* tweak to taste */
        justify-content: flex-start;
    }
}
.actions {
    margin-top: auto;
}
@media (min-width: 992px) {
    .actions {
        margin-top: 0;
    }
}
/* Base stat button */
.stat-btn {
    display: flex;
    align-items: center;
    justify-content: space-between;
    background: var(--color-lighter-blue, #CCD8ED);
    border-radius: 8px;
    padding: 8px 12px;
    min-width: 120px;
    text-decoration: none;
    color: inherit;
    transition: background .2s, color .2s;
}
    .stat-btn .stat-label,
    .stat-btn .stat-number,
    .stat-btn .stat-icon {
        color: inherit;
    }
    .stat-btn:is(:hover, .active) {
        background: var(--color-primary);
        color: #fff;
    }
/* Label (small text) */
.stat-label {
  display: block;
  font-size: 12px;
  color: var(--color-subtext);
  line-height: 1;
}
/* Number */
.stat-number {
  font-size: 24px;
  font-weight: bold;
  color: var(--color-secondary);
  line-height: 1;
}
/* Icon */
.stat-icon {
  font-size: 20px;
  color: var(--color-secondary);
  flex-shrink: 0;
  margin-left: 8px;
}
/*upcoming.js*/
#course-list .list-group-item.bg-primary {
    color: #fff;
}
    #course-list .list-group-item.bg-primary h6,
    #course-list .list-group-item.bg-primary small,
    #course-list .list-group-item.bg-primary .badge {
        color: #fff !important;
    }
/* Magsaysay Certificate branding style */
/* Container */
.search-bar {
    border: 1px solid #D1D1D1;
    border-radius: 50px;
    overflow: hidden;
    background-color: #F8F9FA;
}
    .search-bar .form-control {
        border: none;
        border-radius: 0;
        background: transparent;
        box-shadow: none;
        padding: .75rem 1rem;
    }
    .search-bar .input-group-text.qr-btn {
        background: transparent;
        border: none;
        padding: 0 .75rem;
        cursor: pointer;
    }
    .search-bar .btn.search-btn {
        background: transparent;
        border: none;
        padding: 0 .75rem;
        cursor: pointer;
    }
    .search-bar .fas {
        font-size: 1.25rem;
        color: #222222;
    }
    .search-bar .form-control:focus {
        box-shadow: none;
        outline: none;
    }
/*-------------IN PAYMENT INSTRUCTION STYLE----------------*/
.form-check-input {
    accent-color: #222222; 
}
.payment-instructions-card {
    background: #fff;
    border: 1px solid #e1e1e1;
    border-radius: 12px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
    padding: 1.5rem;
}
.instruction-list {
    counter-reset: step;
    list-style: none;
    margin: 0;
    padding: 0;
}
    .instruction-list li {
        position: relative;
        padding-left: 2.5rem;
        margin-bottom: 1.25rem;
        line-height: 1.4;
    }
        .instruction-list li:last-child {
            margin-bottom: 0;
        }
        .instruction-list li::before {
            counter-increment: step;
            content: counter(step);
            position: absolute;
            top: 0;
            left: 0;
            width: 1.75rem;
            height: 1.75rem;
            background: #ccc;
            color: #fff;
            border-radius: 50%;
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: .9rem;
            font-weight: bold;
        }
.bank-logo {
    max-height: 40px;
}
.bank-box {
    width: 100%;
    max-width: 230px;
    aspect-ratio: 230 / 170;
    background-color: #f1f4f8;
    border: 2px solid #4a587d;
    border-radius: 8px;
    margin: 0 auto 0.75rem;
}
.copy-btn i {
    font-size: 1rem;
    color: #555;
}
.copy-btn:hover i {
    color: #000;
}
/* ---- upload button ---- */
.upload-btn {
    background: #e9ecef;
    border: none;
    border-radius: 8px;
    height: 3rem;
    font-weight: 500;
    color: #222;
}
    .upload-btn i {
        font-size: 1.25rem;
    }
/* ---- status pill ---- */
.status-pill {
    background: #e9ecef;
    border-radius: 8px;
    padding: 0.75rem 1rem;
    font-weight: 600;
    color: #222;
}
    .status-pill i {
        font-size: 1.1rem;
    }
/* ---- uploads ---- */
.upload-status-container {
    background-color: #D9D9D9;
    border-radius: 12px;
    padding: 1rem;
    text-align: center;
}
.upload-area {
    display: inline-flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    background: #FFFFFF;
    border: none;
    box-shadow: 0 2px 6px rgba(0,0,0,0.1);
    border-radius: 8px;
    width: 100%;
    max-width: 500px; /* or whatever fits your design */
    padding: 1rem 0;
    margin: 0 auto 1rem;
}
    .upload-area .fas.fa-upload {
        font-size: 1.5rem;
        color: #222222;
    }
.upload-text {
    display: block;
    font-weight: 500;
    color: #222222;
    margin-top: 0.25rem;
}
.upload-hint {
    display: block;
    font-size: 0.8rem;
    margin-top: 0.25rem;
}
.status-area {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 8px;
    font-weight: 600;
    color: #222222;
}
    .status-area .fas.fa-check-circle {
        color: #222222;
        font-size: 1.1rem;
    }
.btn-danger {
    background-color: #FF3B30;
    border-color: #FF3B30;
    color: #fff;
}
    .btn-danger:hover {
        background-color: #E02E2E;
        border-color: #E02E2E;
    }
/*------CLASS ENROLLMENT MODAL w/ calendar-------*/
.calendar-container {
    font-family: 'Segoe UI', Arial, sans-serif;
    background: #fff;
    padding: 0.5rem 0 1.1rem 0;
    border-radius: 18px;
    box-shadow: none;
    width: 100%;
    margin: 0;
}
.calendar-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 0.3rem;
    padding: 0 0.2em;
}
    .calendar-header h4 {
        margin: 0;
        font-size: 1.13rem;
        font-weight: 600;
        flex-grow: 1;
        text-align: center;
    }
.calendar-arrow {
    background: none;
    border: none;
    font-size: 1.22em;
    cursor: pointer;
    padding: 0.3em 0.6em;
    border-radius: 50%;
    transition: background 0.2s;
    color: #444;
}
    .calendar-arrow:hover {
        background: #f2f2f2;
    }
.calendar-table {
    width: 100%;
    border-collapse: separate;
    border-spacing: 0 4px;
    margin-top: 0.1em;
    table-layout: fixed;
}
    .calendar-table th, .calendar-table td {
        text-align: center;
        border: none;
        padding: 0;
    }
    .calendar-table th {
        color: #b0b3b9;
        font-weight: 500;
        font-size: 1em;
        padding-bottom: 2px;
    }
    .calendar-table td {
        position: relative;
        z-index: 1;
        height: 38px;
    }
.calendar-day {
    display: block;
    width: 35px;
    height: 35px;
    margin: 0 auto;
    line-height: 35px;
    border-radius: 50%;
    font-size: 1em;
    transition: background 0.18s;
}
    .calendar-day.selected,
    .calendar-day.range {
        background: #e4e4e4;
        color: #222;
    }
    .calendar-day.range {
        border-radius: 0;
    }
        .calendar-day.range.start {
            border-top-left-radius: 18px;
            border-bottom-left-radius: 18px;
        }
        .calendar-day.range.end {
            border-top-right-radius: 18px;
            border-bottom-right-radius: 18px;
        }
@media (max-width: 600px) {
    .calendar-container {
        border-radius: 0;
        padding: 0.2rem 0 0.6rem 0;
    }
    .calendar-header h4 {
        font-size: 1.01rem;
    }
    .calendar-table th, .calendar-table td {
        font-size: 0.96em;
    }
    .calendar-day {
        width: 27px;
        height: 27px;
        line-height: 27px;
        font-size: 0.93em;
    }
}
.calendar-day.enrolled {
    background-color: var(--bs-primary) !important;
    color: white !important;
    border-radius: 4px;
}
.calendar-day.selected {
    background-color: rgba(13, 110, 253, 0.25) !important;
    color: black;
}
    .calendar-day.selected.enrolled {
        background-color: var(--bs-red) !important;
        border: 2px solid var(--bs-secondary);
        color: white !important;
    }
/*-----TRAINING CALENDAR--------------------------------*/
.fc .fc-col-header-cell {
    background-color: var(--color-primary) !important;
    border: none;
    padding: 0 !important;
}
    .fc .fc-col-header-cell .fc-col-header-cell-cushion {
        color: #fff !important;
        font-weight: 600;
        padding: 0.75rem 0;
        display: block;
        text-align: center;
    }
    .fc .fc-col-header-cell:first-child {
        border-top-left-radius: 10px;
    }
    .fc .fc-col-header-cell:last-child {
        border-top-right-radius: 10px;
    }
.fc-day-today {
    background-color: #e6f3ff !important;
}
.fc-event {
    background: transparent !important;
    padding: 0 !important;
    border: none !important;
}
.custom-event {
    padding: 4px 8px;
    font-size: 0.85rem;
    border-radius: 4px;
    display: flex;
    align-items: center;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.fc-event.bg-primary {
    background-color: #071651 !important;
    color: #fff !important;
}
.fc-daygrid-day {
    height: auto;
}
.fc-popover {
    position: absolute !important;
    z-index: 9999 !important;
    margin-top: 25%;
    margin-left: 20%;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
}
.fc-more-popover {
    left: auto !important;
    top: auto !important;
    transform: none !important;
}
#calendar-wrapper .fc-popover {
    position: absolute !important;
}
.custom-toggle {
    display: inline-flex;
    align-items: center;
    background-color: #ddd;
    border-radius: 30px;
    padding: 5px 10px;
    gap: 8px;
    font-weight: bold;
    font-size: 14px;
}
    .custom-toggle input[type="checkbox"] {
        display: none;
    }
.toggle-slider {
    width: 36px;
    height: 20px;
    background-color: #6c757d; /* dark gray */
    border-radius: 10px;
    position: relative;
    transition: all 0.3s ease;
}
    .toggle-slider::before {
        content: "";
        position: absolute;
        height: 14px;
        width: 14px;
        left: 3px;
        top: 3px;
        background-color: white;
        border-radius: 50%;
        transition: transform 0.3s ease;
    }
.custom-toggle input:checked + .toggle-slider::before {
    transform: translateX(16px);
}
.view-toggle .btn {
    width: 120px;
    font-weight: 600;
    color: #fff;
    background-color: #071651;
    border: 1px solid #071651;
}
    .view-toggle .btn.active {
        background-color: #fff !important;
        color: #071651 !important;
    }
    .view-toggle .btn:not(.active) {
        background-color: #071651 !important;
        color: #fff !important;
    }
#coursesTable_wrapper .dataTables_length,
#coursesTable_wrapper .dataTables_filter {
    margin-bottom: 1rem;
}

#coursesTable {
    font-size: 0.9rem;
}
.notice-container {
    margin-top: 1rem;
    padding: 0.75rem 1rem;
    border: 1px dashed #6c757d; /* gray border */
    border-radius: 4px;
    background-color: #f8f9fa; /* very light gray background */
    color: #495057; /* dark gray text */
    font-weight: 500;
    display: flex;
    align-items: center;
    gap: 0.5rem;
    align-items: center; /* vertically center icon + text */
    justify-content: center; /* ← horizontally center everything */
}
    .notice-container .notice-icon {
        font-size: 1.25rem;
        color: #dc3545;
    }
/*---------------------------------------------------------*/
/*//resolving equal height of input and select*/
.fixed‐height {
    height: calc(2.25rem + 6px) !important;
}
/*DASHBOARD STYLE*/
/* ===============================
   DASHBOARD (namespaced)
   =============================== */
.dashboard-pull-up {
    margin-top: -40px;
}
.dashboard-filter-input {
    width: 250px;
}
.dashboard-filter-select {
    width: 180px;
}
.dashboard-search-btn {
    min-width: 180px;
    background-color: var(--color-primary, #071651);
    border-color: var(--color-primary, #071651);
}
    .dashboard-search-btn:hover,
    .dashboard-search-btn:focus {
        filter: brightness(0.95);
    }
.dashboard-toggle-left {
    border-radius: 4px 0 0 4px;
}
.dashboard-toggle-right {
    border-radius: 0 4px 4px 0;
}
.dashboard-calendar-wrapper {
    position: relative;
}
.dashboard-hidden {
    display: none;
}
/* Legends styling */
.dashboard-legends .legend-row {
    line-height: 1.25;
}

.dashboard-legends .legend-label {
    min-width: 88px; /* aligns labels “Category” / “Status” */
    font-weight: 600;
    color: #2b3652; /* dark navy feel; tweak to your token */
}

.dashboard-legends .legend-item {
    font-size: 0.95rem;
    color: #6c757d; /* muted text to match gray in screenshot */
    display: inline-flex;
    align-items: center;
}

.dashboard-legends .legend-ico {
    color: #9aa3ad; /* soft gray icons */
    opacity: .9;
    font-size: 1.05rem;
}

.dashboard-legends .legend-dot {
    width: 10px;
    height: 10px;
    border-radius: 50%;
    display: inline-block;
    translate: 0 1px; /* optical align with text baseline */
}

/* Optional: tighten gaps on smaller viewports */
@media (max-width: 576px) {
    .dashboard-legends .legend-items {
        gap: 0.75rem 1rem;
    }

    .dashboard-legends .legend-label {
        min-width: 80px;
    }
}
/* =========================
COURSES PAGE (namespaced)
========================= */
.courses-pull-up {
    margin-top: -50px;
}
.courses-pull-down {
    margin-bottom: -40px;
}
.courses-step {
    max-width: 150px;
}
.courses-step-sep {
    width: 40px;
    border: 0;
    border-top: 2px solid #000;
    margin: 0;
}
.courses-step--active {
    background-color: #004aad;
    color: #fff;
}
    .courses-step--active i {
        color: #fff;
    }
.courses-intro {
    max-width: 720px;
}
.courses-container-1040 {
    max-width: 1040px;
    width: 100%;
}
.courses-featured-title {
    margin-left: -10px;
}
.courses-card {
    max-width: 200px;
}
.courses-card-img {
    height: 120px;
    object-fit: cover;
}
.courses-card-caption {
    background: rgba(0,0,0,0.4);
    width: 100%;
}
.courses-gradient {
    background: linear-gradient(180deg, #f8f8f8 0%, #adcfea 100%);
}
.courses-inner {
    padding: 20px;
}
.courses-search-group {
    max-width: 260px;
}
.courses-filter-input {
    width: 250px;
}
.courses-filter-select {
    width: 180px;
}
.courses-search-btn {
    min-width: 180px;
    background-color: #071651;
    border-color: #071651;
}
    .courses-search-btn:hover,
    .courses-search-btn:focus {
        background-color: #0b1f86;
        border-color: #0b1f86;
    }
.courses-calendar-wrapper {
    position: relative;
}
/* ICONS in calendar sectioning*/
.courses-icon-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    border-radius: 6px;
    border: 1px solid var(--color-light, #e5e7eb);
    background: var(--color-white, #fff);
    color: var(--color-black, #222);
    transition: background .15s ease, border-color .15s ease, box-shadow .15s ease, color .15s ease;
    padding: 0;
}
    .courses-icon-btn i {
        font-size: 16px;
        line-height: 1;
    }
    .courses-icon-btn:hover {
        background: #f3f4f6;
    }
    .courses-icon-btn:focus {
        outline: 0;
        box-shadow: 0 0 0 2px rgba(0,0,0,.08);
    }
    .courses-icon-btn.is-active {
        background: var(--color-black, #222);
        border-color: var(--color-black, #222);
        color: #fff;
    }
        .courses-icon-btn.is-active i {
            color: #fff;
        }
/* STATUS header for calendar*/
.status-banner {
    background: #d7e3f4;
    border-radius: 12px;
}
.status-banner__pill {
    max-width: 980px;
    background: #fff;
    border-radius: 10px;
    padding: .8rem 1rem;
}
.status-banner__label {
    letter-spacing: .02em;
}
.status-banner__status {
    color: #0b2a7a;
}
/*WIZARD TAB STYLE*/
.wizard,
.wizard .nav-tabs,
.wizard .nav-tabs .nav-item {
    position: relative;
}
    .wizard .nav-tabs:after {
        content: "";
        width: 100%;
        border-bottom: solid 2px #ccc;
        position: absolute;
        margin-left: auto;
        margin-right: auto;
        top: 38%;
        z-index: -1;
    }
    .wizard .nav-tabs .nav-item .nav-link {
        width: 200px;
        height: 100px;
        margin-bottom: 6%;
        background: white;
        color: #004aad;
        z-index: 10;
    }
        .wizard .nav-tabs .nav-item .nav-link:hover {
            color: #fff;
            background: #004aad;
            border: 2px solid #ccc;
        }
        .wizard .nav-tabs .nav-item .nav-link.active {
            background: #004aad;
            border: 2px solid #004aad;
            color: #fff;
        }
        .wizard .nav-tabs .nav-item .nav-link.disabled {
            color: #454545;
        }
        .wizard .nav-tabs .nav-item .nav-link:after {
            content: " ";
            position: absolute;
            left: 50%;
            transform: translate(-50%);
            opacity: 0;
            margin: 0 auto;
            bottom: 0px;
            border: 5px solid transparent;
            border-bottom-color: #004aad;
            transition: 0.1s ease-in-out;
        }
.nav-tabs .nav-item .nav-link.active:after {
    content: " ";
    position: absolute;
    left: 50%;
    transform: translate(-50%);
    opacity: 1;
    margin: 0 auto;
    bottom: 0px;
    border: 10px solid transparent;
    border-bottom-color: #004aad;
}
.wizard .nav-tabs .nav-item .nav-link svg {
    font-size: 25px;
}
/*PROFILE DOCUMENTS*/
/* Table chrome */
.doc-table {
    border: 1px solid #d6dee8;
    table-layout: fixed;
    width: 100%;
}

    .doc-table thead th {
        background: #0f66b2;
        color: #fff;
        text-transform: uppercase;
        font-weight: 700;
        font-size: 14px;
        border-color: #0a4f8e;
        padding: 14px 16px;
    }

    .doc-table tbody td {
        vertical-align: middle;
        border-color: #e6edf4;
        padding: 18px 16px;
    }

    /* column widths (moved from inline) */
    .doc-table th.col-doc-name, .doc-table td.col-doc-name {
        width: 25%;
    }

    .doc-table th.col-file, .doc-table td.col-file {
        width: 45%;
    }

    .doc-table th.col-action, .doc-table td.col-action {
        width: 30%;
    }

    /* File links stack like rows */
    .doc-table .file-list .file-link {
        display: block;
        text-decoration: none;
        color: #222;
        margin: 6px 0;
    }

        .doc-table .file-list .file-link:hover {
            text-decoration: underline;
        }

    .doc-table .file-list .fa-eye {
        opacity: .8;
    }

    /* Upload button look/spacing */
    .doc-table .btn-upload {
        padding: 6px 14px;
        border-radius: 6px;
    }

    /* Add new doc row */
    .doc-table .add-wrap {
        border: 2px dashed #bac6d3;
        background: #f7f9fc;
        border-radius: 8px;
        text-align: center;
        padding: 14px;
    }

/* optional: stack columns 100% width on small screens */
@media (max-width: 768px) {
    .doc-table th.col-doc-name, .doc-table td.col-doc-name,
    .doc-table th.col-file, .doc-table td.col-file,
    .doc-table th.col-action, .doc-table td.col-action {
        width: auto;
    }
}

/*UPLOAD DOCS MODAL*/
/* modal look */
.upload-sheet {
    border: 0;
}

#docUploadModal .upload-title {
    color: #0f66b2;
    font-weight: 800;
}

/* drop area */
#docUploadModal .drop-area {
    border: 2px dashed #b7c2d0;
    background: #eaf2fb;
    border-radius: 14px;
    padding: 28px;
    cursor: pointer;
    outline: none;
}

    #docUploadModal .drop-area.is-dragover {
        background: #e3eefb;
        border-color: #9aa8bc;
    }

/* selected file pill */
#docUploadModal .file-item {
    border: 1px solid #e3e8ef;
    border-radius: 12px;
    padding: 12px 14px;
    display: flex;
    align-items: center;
    gap: 12px;
}

#docUploadModal .file-icon {
    width: 40px;
    height: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: #eff3f8;
    border-radius: 8px;
    font-size: 18px;
}

#docUploadModal .file-name {
    font-weight: 700;
}

#docUploadModal .file-size {
    font-size: 12px;
    color: #6c757d;
}

#docUploadModal .btn-remove {
    border: 0;
    background: transparent;
    color: #dc3545;
    font-size: 20px;
}

/* ---- View Document modal ---- */
.vt-modal {
    border-radius: 16px;
    overflow: hidden;
}
.vt-title {
    display: flex;
    align-items: center;
    gap: .5rem;
    font-weight: 700;
    color: #0d6efd; /* Bootstrap primary */
}
.vt-label {
    font-size: .95rem;
    font-weight: 600;
    color: #6b7280; /* gray-600 vibe */
}
.vt-doc-name {
    font-size: 1.5rem; /* bigger size */
    font-weight: 700; /* bolder */
    color: #111827; /* dark text for emphasis */
    word-break: break-word; /* wrap long names */
}


.vt-select {
    border-radius: 12px;
    height: 46px;
    font-size: 1rem;
}
.vt-preview {
    height: 520px; /* tweak if you want it taller/shorter */
    border: 2px solid #9aa4b2;
    border-radius: 6px;
    background: #fff;
    position: relative;
}
    .vt-preview::before,
    .vt-preview::after {
        content: "";
        position: absolute;
        left: 16px;
        right: 16px;
        top: 50%;
        height: 1px;
        background: #9aa4b2;
        transform-origin: 50% 50%;
    }

    .vt-preview::before {
        transform: translateY(-50%) rotate(45deg);
    }
    .vt-preview::after {
        transform: translateY(-50%) rotate(-45deg);
    }

/* Footer actions */
.vt-actions {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    gap: .75rem;
}
.vt-btn {
    height: 44px;
    border-radius: 10px;
    font-weight: 600;
}
.profile-upload-overlay {
    opacity: 0;
    pointer-events: none; /* prevent clicks when hidden */
}
/* Only allow hover if not disabled */
.profile-pic:hover .profile-upload-overlay:not([disabled]) {
    opacity: 1;
    pointer-events: auto;
    cursor: pointer;
}
.custom-navbar {
    box-shadow: rgba(0, 0, 0, 0.1) 0px 1px 2px 0px;
    height: 80px;
    z-index: 1;
}
/* CUSTOM SEARCH BAR IN HEADER MENU */
.nav-cta .cta-pair {
    position: relative;
    display: flex;
    align-items: center;
    gap: 8px;
}
.search-form {
    position: static;
}
.nav-cta .search-inline {
    position: absolute;
    right: 100%;
    margin-right: 12px;
    top: 50%;
    transform: translateY(-50%);
    width: 400px;
    z-index: 3;
}
.search-input {
    width: 0;
    opacity: 0;
    transition: all 0.4s ease;
    font-size: 14px;
    padding-left: 0;
    padding-right: 0;
    border: none;
    position: absolute;
    right: 7px;
    z-index: 1;
}
/*GLOWING SEARCH BAR*/
    .search-form:hover .search-input,
    .search-input:focus {
        width: 250px;
        opacity: 1;
        padding: 0.375rem 0.75rem;
        border: 1px solid #0d6efd;
        border-radius: 0.375rem 0 0 0.375rem;
        box-shadow: 0 0 8px var(--color-tertiary);
        transition: all 0.4s ease, box-shadow 0.4s ease;
    }
/* CUSTOM REGISTER BUTTON */
.btn-outline-white {
    color: #333;
    border: 1px solid #ccc;
    background-color: transparent;
}
    .btn-outline-white:hover {
        color: #000;
        background-color: #fff;
        border-color: #000;
    }
/* PASSWORD EYE TOOGLE*/
.toggle-password {
    color: #6c757d;
}
    .toggle-password:hover {
        color: #0d6efd;
    }
/* ############################################ 
    FOOTER
###############################################*/
.custom-footer {
    background: #081137;
}
    .custom-footer .footer-border {
        border-bottom: 1px solid gray;
    }
    .custom-footer .footer-heading {
        color: var(--color-tertiary);
        font-weight: 600;
        margin-bottom: 0;
    }
    .custom-footer .tertiary-blue {
        color: var(--color-tertiary);
    }
    .custom-footer .copy-rights {
        color: #aaa;
        font-size: 13px;
    }
    .custom-footer .footer-list li {
        margin-bottom: 0.4rem;
    }
        .custom-footer .footer-list li a {
            color: #fff;
            text-decoration: none;
            transition: color 0.3s ease;
        }
            .custom-footer .footer-list li a:hover {
                color: var(--color-tertiary);
            }
    .custom-footer .social-icons a {
        color: #fff;
        transition: color 0.3s ease;
    }
        .custom-footer .social-icons a.facebook:hover {
            color: #1877f2;
        }
        .custom-footer .social-icons a.youtube:hover {
            color: #ff0000;
        }
/* LANDING PAGE STYLING */
.stats-section {
    color: var(--color-brand-alt, #003968);
    text-align: left;
}
    .stats-section .stat-item h1 {
        color: var(--color-brand-alt, #003968);
        font-weight: 700;
    }
    .stats-section .stat-item p {
        color: var(--color-brand-alt, #003968);
        font-size: 14px;
    }
/* ################ HEADER MENU ##############################*/
.custom-navbar .custom-nav-rail {
    align-items: center;
    justify-content: space-between;
    gap: 16px;
}
.custom-navbar .navlinks-wrap {
    flex: 0 0 auto;
    max-width: 640px;
    min-width: 420px;
    overflow: hidden;
}
.custom-navbar .navlinks {
    gap: 24px;
    white-space: nowrap;
    flex-wrap: nowrap;
    margin-left: 0;
}
.custom-navbar .nav-link {
    white-space: nowrap;
}
.custom-navbar .nav-cta {
    flex: 0 0 auto;
}
    .custom-navbar .nav-cta .btn,
    .custom-navbar .nav-cta .search-form,
    .custom-navbar .nav-cta .search-input {
        white-space: nowrap;
    }
.custom-navbar .nav-links .nav-link {
    color: var(--color-secondary);
    font-weight: 500;
    padding: .25rem .5rem;
    transition: color .2s ease;
}
    .custom-navbar .nav-links .nav-link:hover {
        color: var(--color-primary);
    }
    .custom-navbar .nav-links .nav-link.active {
        color: var(--color-primary);
        font-weight: 700;
    }
        .custom-navbar .nav-links .nav-link.active::after {
            content: "";
            display: block;
            height: 3px;
            border-radius: 2px;
            background: var(--color-primary);
            margin-top: 4px;
            content: none !important;
        }
@media (max-width: 1400px) {
    .custom-navbar .navlinks-wrap {
        max-width: 420px;
        min-width: 360px;
    }
    .custom-navbar .navlinks {
        gap: 18px;
    }
}
@media (max-width: 1280px) {
    .custom-navbar .navlinks-wrap {
        max-width: 480px;
        min-width: 340px;
    }
    .custom-navbar .navlinks {
        gap: 14px;
    }
}
/* Docs Upload under Course Page*/
.doc-upload .du-title {
    font-weight: 800;
    color: var(--color-primary) !important;
    letter-spacing: .2px;
    margin-bottom: .25rem;
}
.doc-upload .du-subtitle {
    color: var(--color-primary) !important;
    opacity: .9;
    margin: 0 0 1rem 0;
}
.doc-upload .du-callout {
    background: #f8fafc;
    border: 1px dashed #cdd6ea;
    border-radius: 10px;
    padding: 14px 16px;
}
.doc-upload .du-callout-icon {
    color: var(--color-secondary, #0046AD);
    font-size: 1.25rem;
    margin-top: .2rem;
}
.doc-upload .du-callout-link {
    color: var(--color-secondary, #0046AD);
    font-weight: 600;
    text-decoration: none;
}
    .doc-upload .du-callout-link:hover {
        text-decoration: underline;
    }
.doc-upload .du-card {
    background: #f7f8fb;
    border: 1px solid #e3e9f5;
    border-radius: 12px;
    padding: 18px;
}
.doc-upload .du-card-title {
    color: var(--color-primary, #0C1B52);
    font-weight: 700;
}
.doc-upload .du-photo-box {
    display: block;
    border: 2px solid #cfd7eb;
    border-radius: 6px;
    height: 220px;
    background: #fff;
    position: relative;
    cursor: pointer;
}
.doc-upload .du-photo-placeholder {
    position: absolute;
    inset: 0;
    display: grid;
    place-items: center;
    color: #7b879e;
    font-weight: 600;
}
.doc-upload .du-photo-box:hover {
    box-shadow: 0 0 0 3px rgba(0, 70, 173, .15);
    border-color: var(--color-secondary, #0046AD);
}
.doc-upload .du-guidelines {
    background: #fff;
    border: 1px solid #e3e9f5;
    border-radius: 8px;
    padding: 12px 14px;
}
    .doc-upload .du-guidelines ul {
        padding-left: 18px;
        margin: 0;
    }
.doc-upload .du-note {
    background: #fff;
    border: 1px solid #e3e9f5;
    border-radius: 8px;
    padding: 10px 14px;
}
.doc-upload .du-table {
    border-collapse: separate;
    border-spacing: 0;
    background: #fff;
    border: 1px solid #e3e9f5;
    border-radius: 10px;
    overflow: hidden;
}
    .doc-upload .du-table thead th {
        background: #0C1B52;
        color: #fff;
        font-weight: 700;
        border: none;
        padding: 12px 14px;
    }
    .doc-upload .du-table tbody td {
        border-top: 1px solid #eef2fb;
        padding: 12px 14px;
    }
.doc-upload .du-link {
    color: var(--color-secondary, #0046AD);
    text-decoration: none;
    font-weight: 600;
}
    .doc-upload .du-link:hover {
        text-decoration: underline;
    }
.doc-upload .du-add-row {
    display: block;
    padding: 12px 14px;
    background: #f0f4fb;
    border: 2px dashed #cfd7eb;
    color: #304a7a;
    font-weight: 600;
    border-radius: 0 0 10px 10px;
}
.btn-outline-upload {
    border: 2px solid var(--color-primary, #0C1B52);
    background: #fff;
    color: var(--color-primary, #0C1B52);
    border-radius: 8px;
    height: 36px;
    padding: 0 14px;
    box-shadow: 0 2px 5px rgba(0,0,0,.08);
}
    .btn-outline-upload:hover {
        background: var(--color-primary, #0C1B52);
        color: #fff;
    }
.doc-upload .du-card,
.doc-upload .du-callout {
    box-shadow: 0 1px 2px rgba(0,0,0,.03);
}

/* === Profile Photo Upload (larger square, centered) === */
.doc-upload .du-photo-box-square {
    position: relative;
    width: 200px; /* larger width */
    aspect-ratio: 1 / 1; /* keeps it square */
    border: 2px solid #cfd7eb;
    border-radius: 6px;
    background: #fff;
    cursor: pointer;
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: border-color 0.2s, box-shadow 0.2s;
    margin: 0 auto; /* center horizontally */
}

    .doc-upload .du-photo-box-square:hover {
        box-shadow: 0 0 0 3px rgba(0, 70, 173, .15);
        border-color: var(--color-secondary, #0046AD);
    }

    .doc-upload .du-photo-box-square .du-photo-placeholder {
        position: absolute;
        inset: 0;
        display: grid;
        place-items: center;
        color: #7b879e;
        font-weight: 600;
        text-align: center;
        padding: 0.5rem;
        font-size: 0.95rem; /* slightly bigger font */
    }

    .doc-upload .du-photo-box-square img {
        position: absolute;
        inset: 0;
        width: 100%;
        height: 100%;
        object-fit: cover; /* ensures the photo fills nicely */
    }

/* Responsive: shrink on smaller screens */
@media (max-width: 992px) {
    .doc-upload .du-photo-box-square {
        width: 100%;
        max-width: 200px; /* optional cap */
    }
}

/* ############################################ 
    COURSE DETAIL
###############################################*/
.course-detail-title {
    font-weight: 800;
    line-height: 1.2
}
.course-detail-meta .meta-item {
    display: flex;
    align-items: center;
    gap: .5rem;
    margin-bottom: .5rem;
}
    .course-detail-meta .meta-item i {
        color: #0b1f86
    }
.btn-enroll {
    background: #0b1f86;
    border-color: #0b1f86;
    color: #fff;
}
    .btn-enroll:hover {
        filter: brightness(.95);
        background: white;
        border-color: #0b1f86;
        color: #0b1f86;
    }
.course-tabs .nav-link {
    border-radius: .5rem;
    background: #f4f6f8;
    color: #1f2937;
    font-weight: 600;
    padding: .5rem .9rem;
}
    .course-tabs .nav-link.active {
        background: #071651;
        color: #fff;
    }
.course-detail-tabs .tab-content {
    border-radius: .75rem;
}
.course-detail-bc {
    background: #fff;
}
.course-detail-hero {
    background: #fff;
}
.course-detail-tabs {
    background: #fff;
}
    .course-detail-tabs .tabs-header .course-tabs .nav-link {
        margin-right: .35rem;
    }
        .course-detail-tabs .tabs-header .course-tabs .nav-link:last-child {
            margin-right: 0;
        }
.object-fit-cover {
    object-fit: cover;
}
.line-clamp-2 {
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}
.related-item:hover {
    background: #f7f8fa;
}
.course-testimonials .testimonial-avatar {
    flex: 0 0 56px;
    width: 56px;
    height: 56px;
    border-radius: 50%;
    overflow: hidden;
    box-shadow: 0 0 0 1px rgba(0,0,0,.06);
}
@media (min-width: 768px) {
    .course-testimonials .testimonial-avatar {
        width: 64px;
        height: 64px;
    }
}
.course-testimonials .testimonial-avatar img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}
.course-testimonials .testimonial-stars i {
    font-size: .95rem;
    color: #f4b400;
    margin-right: 2px;
}
.course-testimonials .testimonial h6 {
    line-height: 1.25;
}
.course-testimonials .testimonial p {
    margin-bottom: .25rem;
}
/* Available Classes UI */
.class-row {
    border: 1px solid #eef1f5;
    background: #fff;
    padding: .35rem .5rem;
    margin-bottom: .45rem;
}
    .class-row:hover {
        border-color: #dfe6ef;
    }
    .class-row.is-closed {
        background: #f8f9fb;
        opacity: .75;
    }
.class-date {
    color: #2b3652;
}
.slots-badge {
    background: #0d6efd;
    color: #fff;
    font-size: .72rem;
    padding: .15rem .5rem;
    border-radius: 999px;
}
.btn-xxs.calendar-btn {
    --bs-btn-padding-y: .1rem;
    --bs-btn-padding-x: .35rem;
    --bs-btn-font-size: .85rem;
    width: 30px;
    height: 28px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-color: #e7ebf3;
}
    .btn-xxs.calendar-btn i {
        font-size: .9rem;
    }
/* ############################################ 
    PROCESS PAYMENT
###############################################*/
.epay .epay-title {
    font-weight: 800;
    color: var(--color-primary) !important;
    letter-spacing: .2px;
    margin-bottom: .25rem;
}
.epay .epay-subtitle {
    color: var(--color-primary) !important;
    opacity: .9;
    margin: 0 0 1rem 0;
}
.epay .epay-callout {
    background: #f8fafc;
    border: 1px dashed #cdd6ea;
    border-radius: 10px;
    padding: 14px 16px;
    box-shadow: 0 1px 2px rgba(0,0,0,.03);
}
.epay .epay-callout-icon {
    color: var(--color-secondary,#0046AD);
    font-size: 1.25rem;
    margin-top: .2rem;
}
.epay .epay-card {
    background: #f7f8fb;
    border: 1px solid #e3e9f5;
    border-radius: 12px;
    box-shadow: 0 1px 2px rgba(0,0,0,.03);
}
    .epay .epay-card .card-body {
        padding: 18px;
    }
.epay .epay-step {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 12px;
}
.epay .epay-step-num {
    width: 28px;
    height: 28px;
    border-radius: 50%;
    display: grid;
    place-items: center;
    background: #0c1b52;
    color: #fff;
    font-weight: 700;
    font-size: .95rem;
}
.epay .epay-step-title {
    color: #0c1b52;
    font-weight: 700;
}
.epay .epay-icon-book {
    width: 36px;
    height: 36px;
    border-radius: 50%;
    display: grid;
    place-items: center;
    background: #eef3ff;
    color: #0c1b52;
}
.epay .epay-course hr {
    border-color: #e8edf8;
}
.epay .epay-rows {
    margin-top: 10px;
}
.epay .epay-row {
    display: flex;
    align-items: baseline;
    gap: 16px;
    padding: 8px 0;
    border-top: 1px solid #eef2fb;
}
    .epay .epay-row:first-child {
        border-top: none;
    }
.epay .epay-row-label {
    min-width: 190px;
    color: #6b7486;
    font-weight: 600;
}
.epay .epay-row-value {
    color: #1b2340;
}
.epay .epay-dot {
    opacity: .5;
}
.epay .badge.bg-light.border.text-dark {
    background: #fff !important;
    border: 1px solid #e3e9f5 !important;
    color: #0c1b52 !important;
    font-weight: 600;
}
.epay .epay-option {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    cursor: pointer;
    user-select: none;
}
.epay .epay-option-input {
    margin-top: .35rem;
}
.epay .epay-option-body {
    display: flex;
    flex-direction: column;
    gap: 4px;
}
.epay .epay-option-title {
    font-weight: 700;
    color: #0c1b52;
}
.epay .epay-option-desc {
    color: #3a4560;
}
.epay .epay-summary {
    background: #f1f4f8;
    border: 1px solid #e3e9f5;
    border-radius: 10px;
    padding: 16px 18px;
}
.epay .epay-summary-head {
    color: #2a56b6;
    font-weight: 700;
    margin-bottom: 8px;
    font-size: 20px;
}
.epay .epay-summary-row,
.epay .epay-summary-total {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    font-weight: 800;
    color: #0c1b52;
    font-size: 1.05rem;
}
.epay .epay-choice {
    position: relative;
    display: block;
    cursor: pointer;
}
.epay .epay-choice-radio {
    position: absolute;
    inset: 0;
    opacity: 0;
    pointer-events: auto;
}
.epay .epay-choice-card {
    border: 1px solid var(--color-light-gray);
    border-radius: 12px;
    background: #fff;
    padding: 16px 18px;
    transition: box-shadow .2s ease, border-color .2s ease, background .2s ease, transform .06s ease;
    box-shadow: 0 2px 6px rgba(0,0,0,.06);
}
    .epay .epay-choice-card::after {
        content: "";
        position: absolute;
        inset: -10px;
        border: 2px dashed transparent;
        border-radius: 14px;
        pointer-events: none;
        transition: border-color .2s ease, box-shadow .2s ease;
    }
.epay .epay-choice-title {
    font-weight: 700;
    color: #0c1b52;
}
.epay .epay-choice:active .epay-choice-card {
    transform: translateY(1px);
}
.epay .epay-choice-radio:checked + .epay-choice-card::after,
.epay .epay-choice-radio:focus-visible + .epay-choice-card::after {
    border-color: #1f56d6;
    box-shadow: 0 0 0 3px rgba(31,86,214,.12);
}
.epay .epay-choice:hover .epay-choice-card {
    border-color: #cfd7eb;
    box-shadow: 0 4px 12px rgba(0,0,0,.08);
    cursor: pointer;
}
.epay .epay-choice-radio:checked + .epay-choice-card {
    background: #f7f9ff;
    border-color: #0C1B52;
    box-shadow: 0 2px 6px rgba(0,0,0,.06);
}
/* ############################################ 
   ENROLLMENT CONFIRMATION
###############################################*/
.econfirm .econfirm-title {
    font-weight: 800;
    letter-spacing: .2px;
    color: var(--color-primary);
    margin-bottom: .25rem;
}
.econfirm .econfirm-subtitle {
    color: var(--color-secondary,#0046AD);
    opacity: .9;
    margin: 0 0 1rem 0;
}
.econfirm .econfirm-callout {
    background: #f8fafc;
    border: 1px dashed #cdd6ea;
    border-radius: 10px;
    padding: 14px 16px;
    box-shadow: 0 1px 2px rgba(0,0,0,.03);
}

.econfirm .econfirm-callout-icon {
    color: var(--color-secondary,#0046AD);
    font-size: 1.25rem;
    margin-top: .2rem;
}

.econfirm .econfirm-hero {
    position: relative;
    padding-top: 24px;
    padding-bottom: 12px;
    overflow: visible; 
    margin-bottom: 1.5rem;
}
@media (max-width: 992px) {
    .econfirm .econfirm-hero::before,
    .econfirm .econfirm-hero::after {
        width: 380px;
        height: 190px;
        top: 10px;
        opacity: .9;
    }
}
@media (max-width: 576px) {
    .econfirm .econfirm-hero::before,
    .econfirm .econfirm-hero::after {
        width: 260px;
        height: 130px;
        top: 0;
        opacity: .85;
    }
}
.econfirm-medal {
    width: 176px;
    height: 176px;
    border-radius: 50%;
    background: radial-gradient(closest-side, #ffd45a 65%, #ffeaa4 66%, #ffeaa4 78%, #fff 79%);
    box-shadow: 0 14px 50px rgba(0,0,0,.08);
    display: grid;
    place-items: center;
}
    .econfirm-medal i {
        font-size: 34px;
        color: #24324a;
    }
.econfirm-hero-title {
    font-weight: 800;
    color: #0c1b52;
    margin: 18px 0 6px;
}
.econfirm-hero-note {
    color: #24324a;
    opacity: .9;
}
.econfirm-confetti-img {
    display: block;
    max-width: 520px;
    width: min(44vw, 520px);
    height: auto;
    object-fit: contain;
    filter: drop-shadow(0 6px 18px rgba(0,0,0,.04));
}
/* Desktop behavior */
@media (min-width: 1200px) {
    .econfirm-confetti-left {
        transform: translateX(-6%);
        position: relative;
        right: -200px;
    }
    .econfirm-confetti-right {
        transform: translateX( 6%);
        position: relative;
        left:-200px;
    }
}
/* Mobile/tablet: confetti behavior */
@media (max-width: 1199.98px) {
    .econfirm .econfirm-hero {
        position: relative;
        min-height: 460px;
    }
    .econfirm .econfirm-confetti-img {
        position: absolute;
        left: 50%;
        width: min(86vw, 460px);
        pointer-events: none;
        z-index: 0;
        filter: drop-shadow(0 6px 18px rgba(0,0,0,.04));
    }
    .econfirm .econfirm-confetti-left {
        top: clamp(-30px, -4vw, -10px);
        transform: translateX(-50%) scale(.96);
    }
    .econfirm .econfirm-confetti-right {
        bottom: clamp(-30px, -4vw, -10px);
        transform: translateX(-50%) scale(.96);
    }
    .econfirm .econfirm-medal,
    .econfirm .econfirm-hero-title,
    .econfirm .econfirm-hero-note {
        position: relative;
        z-index: 1;
    }
    .econfirm .econfirm-hero-title {
        margin-top: 12px;
    }
}
/* Section heading */
.econfirm .econfirm-section-title {
    font-weight: 800;
    color: #0c1b52;
    margin: 12px 0 2px;
}
.econfirm .econfirm-section-subtitle {
    color: #3a4560;
    margin-bottom: 14px;
}
.econfirm .econfirm-card {
    background: #f7f8fb;
    border: 1px solid #e3e9f5;
    border-radius: 12px;
    box-shadow: 0 1px 2px rgba(0,0,0,.03);
}
.econfirm .econfirm-book {
    width: 36px;
    height: 36px;
    border-radius: 50%;
    display: grid;
    place-items: center;
    background: #eef3ff;
    color: #0c1b52;
}
.econfirm .econfirm-rows {
    margin-top: 8px;
}
.econfirm .econfirm-row {
    display: flex;
    gap: 16px;
    align-items: baseline;
    padding: 10px 0;
    border-top: 1px solid #eef2fb;
}
    .econfirm .econfirm-row:first-child {
        border-top: none;
    }
.econfirm .econfirm-label {
    min-width: 190px;
    color: #6b7486;
    font-weight: 600;
}
.econfirm .econfirm-value {
    color: #1b2340;
}
.econfirm .econfirm-link {
    color: #1b4fdc;
    font-weight: 600;
    text-decoration: none;
}
    .econfirm .econfirm-link:hover {
        text-decoration: underline;
    }
.econfirm .econfirm-summary-head {
    font-weight: 800;
    color: #2a56b6;
    font-size: 20px;
}
.econfirm .econfirm-summary-row,
.econfirm .econfirm-summary-total {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 12px;
}
.econfirm .econfirm-summary-total {
    font-weight: 800;
    color: #0c1b52;
    font-size: 1.05rem;
}
.econfirm .badge.bg-light.border.text-dark {
    background: #fff !important;
    border: 1px solid #e3e9f5 !important;
    color: #0c1b52 !important;
    font-weight: 600;
}
/* ===== How to Pay Online (Enrollment Confirmation) ===== */
.econfirm .econfirm-howtitle {
    font-weight: 800;
    color: #0c1b52;
    letter-spacing: .2px;
}
.econasdfirm .econasdfirm-num {
    width: 30px;
    height: 30px;
    border-radius: 50%;
    display: grid;
    place-items: center;
}
.econfirm .econfirm-num {
    inline-size: 30px;
    aspect-ratio: 1 / 1;
    min-inline-size: 30px;
    max-inline-size: 30px;
    block-size: auto;
    display: inline-grid;
    place-items: center;
    border-radius: 50%;
    line-height: 1;
    flex: 0 0 30px;
    background: #0c1b52;
    color: #fff;
    font-weight: 800;
    font-size: .95rem;
}
@media (max-width: 575.98px) {
    .econfirm .econfirm-num {
        inline-size: 28px;
        flex-basis: 28px;
        font-size: .9rem;
    }
}
.econfirm .econfirm-step-text {
    color: #1b2340;
}
/* shared max size for both the logo row and the QR box */
.econfirm {
    --qr-max: 420px;
}
    /* tweak to taste */

    /* center the columns’ content */
    .econfirm .col-6 {
        display: flex;
        flex-direction: column;
        align-items: center;
    }

    /* make bank title act as a logo row; same width as QR box */
    .econfirm .econfirm-bank,
    .econfirm .econfirm-qr {
        width: min(100%, var(--qr-max));
        margin-inline: auto;
    }

        /* logo is 50% of the QR box width */
        .econfirm .econfirm-bdobank img {
            width: 30%;
            height: auto;
            display: block;
            margin: 0 auto;
        }
        .econfirm .econfirm-metrobank img {
            width: 50%;
            height: auto;
            display: block;
            margin: 0 auto;
        }
    /* QR box — square, with your styling */
    .econfirm .econfirm-qr {
        aspect-ratio: 1 / 1; /* replaces fixed height */
        border: 2px solid #a8b3c8;
        border-radius: 6px;
        padding: 10px;
        overflow: hidden;
        display: grid;
        place-items: center;
        background: linear-gradient(45deg, transparent 48%, #a8b3c8 50%, transparent 52%), linear-gradient(-45deg, transparent 48%, #a8b3c8 50%, transparent 52%), #e9eef4;
    }

        /* fit the QR image inside the box */
        .econfirm .econfirm-qr img {
            max-width: 100%;
            max-height: 100%;
            width: auto;
            height: auto;
            object-fit: contain;
        }

    /* your existing text style */
    .econfirm .econfirm-bank {
        font-weight: 600;
        font-size: 24px;
        letter-spacing: .5px;
        color: var(--color-primary) !important;
    }

/* optional: smaller on phones */
@media (max-width: 576px) {
    .econfirm {
        --qr-max: 300px;
    }
}

.econfirm .econfirm-uploadbox {
    width: 100%;
    height: 400px;
    border: 1px solid #e3e9f5;
    border-radius: 10px;
    background: #fff;
    outline: 2px dashed #cdd6ea;
    outline-offset: -10px;
    cursor: pointer;
    transition: box-shadow .2s ease, outline-color .2s ease;
    position: relative;
    overflow: hidden; /* hide scrollbars initially */
}

    .econfirm .econfirm-uploadbox:hover {
        outline-color: #a9b9e6;
        box-shadow: 0 4px 14px rgba(0,0,0,.07);
    }

.econfirm-uploadbox .upload-preview-wrapper {
    width: 100%;
    height: 100%;
    overflow: hidden; /* no scroll initially */
    display: flex;
    align-items: center;
    justify-content: center;
    background: #f8f9fc;
}

.econfirm-uploadbox img.upload-preview {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: contain; /* fit exactly inside box */
    transform-origin: center center;
    transition: transform 0.2s ease;
}

/* Centered text overlay */
.econfirm-uploadbox .upload-text {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}

/* Hide text when image is present */
.econfirm-uploadbox.has-image .upload-text {
    display: none;
}


.econfirm .econfirm-status-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 10px 0;
    border-top: 1px solid #e9edf7;
}
    .econfirm .econfirm-status-row:first-child {
        border-top: none;
    }
.econfirm .econfirm-status-label {
    font-weight: 800;
    color: var(--color-primary);
}
.econfirm .econfirm-deadline {
    font-weight: 400;
    color: var(--color-tertiary);
}
.econfirm .econfirm-pill {
    display: inline-block;
    padding: 4px 12px;
    border-radius: 16px;
    border: 1px solid #e3d08b;
    background: #fff4cc;
    color: #8a6b00;
    font-weight: 700;
    font-size: .85rem;
}
    .econfirm .econfirm-pill.is-success {
        border-color: #a7e7bf;
        background: #e8fff1;
        color: #126c3a;
    }
    .econfirm .econfirm-pill.is-failed {
        border-color: #efb2b2;
        background: #ffecec;
        color: #9c2a2a;
    }
.econfirm .econfirm-altlink {
    color: #1b4fdc;
    font-weight: 600;
    text-decoration: underline;
}
    .econfirm .econfirm-altlink:hover {
        text-decoration: none;
    }

/* MOBILE MENU CUSTOMIZATION */
/* Full-width left drawer on mobile */
:root {
    --mtc-blue: #0C1B52; /* header blue */
    --mtc-blue-2: #0a2f7a;
    --mtc-ink: #0e1a33;
    --mtc-muted: #6b7a99;
    --drawer-pill: #f3f5ff; /* active pill bg */
}

/* Drawer container */
.offcanvas.mobile-full {
    width: 70vw;
    max-width: 480px;
    border: 0;
    border-radius: 16px 16px 0 0;
    overflow: hidden;
    box-shadow: 0 20px 40px rgba(0,0,0,.12);
}

@media (min-width: 992px) {
    .offcanvas.mobile-full {
        width: 420px;
        max-width: 420px;
        border-radius: 16px;
    }
}

.offcanvas.mobile-full .offcanvas-body {
    background: transparent; /* hero + sheet handle background */
    padding: 0;
}

/* HERO HEADER (blue card) */
.drawer-hero {
    position: relative;
    background: linear-gradient(180deg, var(--color-tertiary), var(--color-primary));
    padding: 20px 18px 64px; /* extra bottom for the curve overlap */
    color: #fff;
}

.drawer-hero-name {
    font-size: 20px;
    font-weight: 500;
    line-height: 1.2;
}

.drawer-hero-sub {
    font-size: 12px;
    color: rgba(255,255,255,.85);
    margin-top: 10px;
}

.drawer-avatar {
    width: 56px;
    height: 56px;
    border-radius: 999px;
    overflow: hidden;
    box-shadow: 0 2px 8px rgba(0,0,0,.14);
}

.btn-hero-edit {
    border: 1px solid rgba(255,255,255,.6);
    color: #fff;
    background: transparent;
    font-size: 12px;
    padding: 4px 10px;
    border-radius: 8px;
    display: block;
    margin-top: .5rem;
}

    .btn-hero-edit:hover {
        background: rgba(255,255,255,.15);
    }

/* Curved white sheet start */
.drawer-hero-curve {
    position: absolute;
    left: 0;
    right: 0;
    bottom: -24px;
    height: 24px;
    background: transparent;
}

    .drawer-hero-curve::before {
        content: "";
        position: absolute;
        left: 12px;
        right: 12px;
        top: 0;
        height: 32px;
        background: #fff;
        border-radius: 14px;
        box-shadow: 0 -6px 16px rgba(0,0,0,.08);
    }

/* SHEET (menu area) */
.drawer-sheet {
    background: #fff;
    border-top-left-radius: 14px;
    border-top-right-radius: 14px;
    padding-top: 16px;
    padding-bottom: 10px;
}

/* Remove list borders */
#mobileDrawer .list-group {
    --bs-list-group-border-color: transparent;
}

#mobileDrawer .list-group-item {
    border: 0 !important;
}
/* REMOVE any previous: .offcanvas.mobile-full .offcanvas-body { overflow: visible; } */

#mobileDrawer.offcanvas {
    height: 100dvh; /* full viewport height on mobile */
}
/* Hide scrollbar in the drawer, keep it scrollable */
#mobileDrawer .offcanvas-body {
    overflow-y: auto;
    -webkit-overflow-scrolling: touch; /* smooth iOS */
    scrollbar-width: none; /* Firefox */
    -ms-overflow-style: none; /* old IE/Edge */
}

    #mobileDrawer .offcanvas-body::-webkit-scrollbar {
        width: 0;
        height: 0; /* Chrome/Safari */
    }


/* Menu item layout */
.drawer-item {
    margin: 8px 12px;
    padding: 12px 14px !important;
    border-radius: 12px;
    display: flex;
    align-items: center;
    gap: 12px;
    transition: background-color .18s ease, box-shadow .18s ease, transform .18s ease;
}

    .drawer-item:hover {
        background: rgba(0,0,0,.03);
        text-decoration: none;
    }

    /* Active pill (like screenshot) */
    .drawer-item.is-active {
        background: var(--drawer-pill);
        box-shadow: 0 8px 22px rgba(0,0,0,.06), inset 0 0 0 1px rgba(12,27,82,.08);
    }

/* Icons + label */
.drawer-icon {
    font-size: 20px;
    width: 26px;
    text-align: center;
    color: #1345a6;
    line-height: 1;
}

.drawer-label {
    font-size: 16px;
    font-weight: 600;
    color: #0e2a63;
}

/* Section caption */
.drawer-caption {
    padding: 6px 18px 4px;
    font-size: 12px;
    color: var(--mtc-muted);
}

/* Small utilities */
.object-fit-cover {
    object-fit: cover;
}
/* 1) Blue hero */
.drawer-hero {
    position: relative;
    background: linear-gradient(180deg, var(--color-primary), var(--color-secondary));
    color: #fff;
    padding: 20px 18px 40px; /* leave room for the overlap */
}


.drawer-hero-sub {
    font-size: 12px;
    color: rgba(255,255,255,.9);
}

.drawer-avatar {
    width: 56px;
    height: 56px;
    border-radius: 999px;
    overflow: hidden;
}

/* 2) The white sheet (MENU CONTAINER) that overlaps the hero with rounded corners */
.drawer-sheet {
    position: relative;
    z-index: 2; /* make sure it sits above the blue hero */
    background: #fff;
    margin-top: -18px; /* <<< THIS creates the “curve” overlap */
    border-top-left-radius: 18px;
    border-top-right-radius: 18px;
    box-shadow: 0 -6px 16px rgba(0,0,0,.08); /* soft rim like the screenshot */
    padding-top: 12px; /* breathing room inside */
}

/* 3) Ensure nothing clips the overlap */
.offcanvas.mobile-full .offcanvas-body {
    overflow: visible; /* allow the rounded sheet to show */
}

/* 4) Menu item look (keep your existing, just ensuring sizes) */
.drawer-item {
    margin: 8px 12px;
    padding: 12px 14px !important;
    border-radius: 12px;
    display: flex;
    align-items: center;
    gap: 12px;
    transition: background-color .18s ease, box-shadow .18s ease;
}

    .drawer-item:hover {
        background: rgba(0,0,0,.03);
        text-decoration: none;
    }

    .drawer-item.is-active {
        background: #f3f5ff;
        box-shadow: 0 8px 22px rgba(0,0,0,.06), inset 0 0 0 1px rgba(12,27,82,.08);
    }

.drawer-icon {
    font-size: 20px;
    width: 26px;
    text-align: center;
    color: #1345a6;
    line-height: 1;
}

.drawer-label {
    font-size: 16px;
    font-weight: 600;
    color: #0e2a63;
}

/* If you had a generic rule shrinking icons, neutralize it */
.offcanvas i:not(.drawer-icon) {
    font-size: 1.05rem;
}

/* #####################################
    SUPPORT ASSISTANT
########################################*/
.magone-launcher {
    position: fixed;
    right: 20px;
    bottom: 20px;
    width: 56px;
    height: 56px;
    border-radius: 50%;
    background: var(--color-royalblue);
    box-shadow: var(--shadow-2);
    display: grid;
    place-items: center;
    border: none;
    cursor: pointer;
    transition: transform .15s ease, box-shadow .15s ease, background .15s ease;
    z-index: 2147483000;
    overflow: hidden;
}

    .magone-launcher:hover {
        transform: translateY(-2px);
        box-shadow: var(--shadow-3);
        background: var(--color-secondary);
    }

.magone-icon, .magone-icon-x {
    width: 24px;
    height: 24px;
    fill: white;
    display: block;
    transition: opacity .12s ease, transform .12s ease;
}

.magone-icon-x {
    display: none;
}

.magone-launcher.open .magone-icon {
    display: none;
}

.magone-launcher.open .magone-icon-x {
    display: block;
}

.magone-launcher .press-ripple {
    position: absolute;
    width: 0;
    height: 0;
    border-radius: 50%;
    background: rgba(255,255,255,.35);
    transform: translate(-50%,-50%);
    left: 50%;
    top: 50%;
    pointer-events: none;
    opacity: 0;
}

.magone-launcher.pressing .magone-icon {
    opacity: 0;
    transform: scale(.6);
}

.magone-launcher.pressing .press-ripple {
    animation: ripple .32s ease-out forwards;
}
@keyframes ripple {
    0% {
        width: 0;
        height: 0;
        opacity: .0;
    }

    50% {
        opacity: .45;
    }

    100% {
        width: 140%;
        height: 140%;
        opacity: 0;
    }
}
.magone-chat {
    position: fixed;
    right: 20px;
    bottom: 84px;
    width: min(380px, 92vw);
    background: var(--magone-panel);
    border: 1px solid var(--magone-border);
    border-radius: 20px;
    box-shadow: var(--shadow-3);
    overflow: hidden;
    display: none;
    opacity: 0;
    transform: translateY(10px) scale(.98);
    transition: opacity .18s ease, transform .18s ease;
    z-index: 2147483001;
}
    .magone-chat.open {
        display: block;
        opacity: 1;
        transform: translateY(0) scale(1);
    }
.magone-head {
    background: var(--color-royalblue);
    color: white;
    padding: 12px 14px;
    display: flex;
    align-items: center;
    gap: 10px;
}
    .magone-head .botmark {
        width: 28px;
        height: 28px;
        border-radius: 50%;
        background: rgba(255,255,255,.2);
        display: grid;
        place-items: center;
    }
    .magone-head .title {
        font-weight: 700;
        letter-spacing: .2px;
    }
.magone-log {
    height: 360px;
    overflow: auto;
    padding: 14px;
    background: var(--magone-panel);
}
.magone-msg {
    margin: 12px 0;
    max-width: 78%;
    line-height: 1.45;
    word-wrap: break-word;
    color: var(--magone-ink);
}
    .magone-msg.ai {
        text-align: left;
    }
    .magone-msg.user {
        margin-left: auto;
        text-align: right;
    }
.magone-bubble {
    display: inline-block;
    padding: 10px 14px;
    border-radius: var(--radius-lg);
    background: var(--magone-bot);
    border: 1px solid var(--magone-border);
    color: var(--magone-bot-ink);
}
    .magone-bubble a {
        color: var(--color-secondary, #0a66ff);
        text-decoration: underline;
        word-break: break-all;
    }
        .magone-bubble a:hover {
            text-decoration: none;
        }
.magone-msg.user .magone-bubble {
    background: var(--magone-user);
    border-color: transparent;
    color: #fff;
}
.magone-input {
    background: var(--magone-panel-2);
    border-top: 1px solid var(--magone-border);
    padding: 12px;
    display: flex;
    gap: 8px;
    align-items: center;
}
.magone-entry {
    flex: 1;
    display: flex;
    align-items: center;
    gap: 10px;
    background: #fff;
    border: 1px solid var(--magone-border);
    border-radius: 999px;
    padding: 10px 14px;
}
    .magone-entry input {
        flex: 1;
        background: transparent;
        border: none;
        outline: none;
        color: var(--magone-ink);
        font: 'Poppins', sans-serif;
    }
.magone-send {
    width: 36px;
    height: 36px;
    border-radius: 50%;
    border: none;
    cursor: pointer;
    display: grid;
    place-items: center;
    background: var(--color-royalblue);
    transition: transform .12s ease, background .12s ease;
}
    .magone-send:hover {
        transform: translateY(-1px);
        background: var(--color-secondary);
    }

    .magone-send svg {
        width: 18px;
        height: 18px;
        fill: white;
    }
.dots {
    display: inline-flex;
    gap: 4px;
    vertical-align: middle;
}

.dot {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: #8a93a5;
    opacity: .8;
    animation: bounce 1.2s infinite ease-in-out;
}

    .dot:nth-child(2) {
        animation-delay: .15s;
    }

    .dot:nth-child(3) {
        animation-delay: .3s;
    }

@keyframes bounce {
    0%, 80%, 100% {
        transform: translateY(0);
        opacity: .7;
    }

    40% {
        transform: translateY(-5px);
        opacity: 1;
    }
}

@media (max-width:420px) {
    .magone-log {
        height: 56vh;
    }
}
/*########################################
    FOR FUTURE
############################################*/

.magone-choice {
    display: inline-block;
    margin: 6px 8px 0 0;
    padding: 10px 14px;
    border-radius: 999px;
    border: 2px solid var(--color-secondary);
    background: #fff;
    color: var(--color-secondary);
    font: 14px/1.1 system-ui, -apple-system, 'Poppins', sans-serif;
    cursor: pointer;
    transition: transform .08s ease, background .12s ease, color .12s ease, border-color .12s ease;
}

    .magone-choice:hover {
        transform: translateY(-1px);
        background: var(--color-light-gray);
        color: var(--color-primary);
    }

    .magone-choice:active {
        transform: translateY(0);
    }
/*############################################*/
#verifyModal .photo-frame {
    width: 220px; /* <- adjust to taste */
    height: 280px; /* <- adjust to taste */
    border: 1px solid #eee;
    border-radius: .75rem;
    background: #fff;
    overflow: hidden;
    padding: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
}

#verifyModal .photo-img {
    width: 100%;
    height: 100%;
    object-fit: contain; /* keep full image; use 'cover' if you prefer cropped fill */
}

/* Slightly smaller on narrow screens */
@media (max-width: 576px) {
    #verifyModal .photo-frame {
        width: 160px;
        height: 200px;
    }
}

/* =========================================================
   Calendar UI Switcher
   - Desktop UI: .calendar-desktop
   - Mobile UI:  .calendar-mobile
   Breakpoint: 991.98px (Bootstrap "lg" and below = mobile)
   ========================================================= */

/* Default: Desktop visible, Mobile hidden */
.calendar-desktop, .enrollment-tab {
    display: block;
}

.calendar-mobile, .enrollment-tab-mobile {
    display: none;
}

/* Mobile / Tablet (<= 991.98px) */
@media (max-width: 991.98px) {
    .calendar-desktop, .enrollment-tab {
        display: none !important;
    }

    .calendar-mobile, .enrollment-tab-mobile {
        display: block !important;
    }
}
@media (min-width: 992px) {
    .calendar-desktop, .enrollment-tab {
        display: block !important;
    }

    .calendar-mobile, .enrollment-tab-mobile {
        display: none !important;
    }
}

@media (max-width: 991.98px) and (hover: none) and (pointer: coarse) {
    .calendar-desktop, .enrollment-tab {
        display: none !important;
    }

    .calendar-mobile, .enrollment-tab-mobile {
        display: block !important;
    }
}

/* Mobile FullCalendar is used as a data/engine (dots), keep it hidden */
#calendarMobile.fc-mobile-host {
    display: none;
}

/* Mobile Styling */
.custom-nav-item {
    text-align: start;
    padding: 2px;
}

.custom-nav-link {
    display: inline-block;
    padding: 5px 10px;
    font-size: 14px;
    color: #333;
    font-weight: 600;
    text-decoration: none;
    border-radius: 8px;
    transition: background-color 0.3s, color 0.3s;
}

    .custom-nav-link.active {
        background-color: #004aad;
        color: #fff;
    }

    .custom-nav-link:hover {
        background-color: #33a0f9;
        color: #fff;
        /* Mobile Styling */
        /* Mobile Styling */
        /* Mobile Styling */
        @media (max-width: 991px) {
            .custom-nav-mobile {
                display: flex;
                flex-direction: column;
                align-items: center;
                gap: 20px; /* Space between each step */
            }

            .custom-nav-item {
                width: 100%;
                text-align: center; /* Align text to the left */
                margin-bottom: 15px;
            }

            .custom-nav-link {
                display: flex;
                flex-direction: column;
                align-items: start; /* Icons centered above the text */
                text-align: left; /* Text aligned left */
                font-size: 14px;
                padding: 8px 0;
                color: #6c757d; /* Default color for inactive steps */
                background-color: #f8f9fa;
                border-radius: 8px;
                transition: background-color 0.3s, color 0.3s;
            }

                /* Active Step */
                .custom-nav-link.active {
                    color: #004aad; /* Active color */
                    background-color: #e1f5fe; /* Light blue background */
                }

                /* Hover effect for inactive steps */
                .custom-nav-link:hover {
                    background-color: #e1f5fe;
                    color: #004aad; /* Active color on hover */
                }

            .nav-item {
                margin-bottom: 10px;
            }

            .custom-nav-link i {
                margin-bottom: 8px; /* Space between icon and text */
            }
        }
    }