:root {
    --color-navy: #0F1F3D;
    --color-navy-light: #112240;
    --color-orange: #f97316;
    --color-orange-light: #fb923c;
    --color-orange-dark: #ea580c;
    --color-slate: #64748b;
    --color-slate-light: #94a3b8;
    
    /* Override Bootstrap Primary Color with Orange */
    --bs-primary: #f97316;
    --bs-primary-rgb: 249, 115, 22;
    --bs-primary-bg-subtle: #ffedd5;
    --bs-primary-border-subtle: #fed7aa;
    --bs-primary-text-emphasis: #9a3412;
}

/* Bootstrap Primary Class Overrides */
.btn-primary {
    --bs-btn-bg: var(--color-orange);
    --bs-btn-border-color: var(--color-orange);
    --bs-btn-hover-bg: var(--color-orange-dark);
    --bs-btn-hover-border-color: var(--color-orange-dark);
    --bs-btn-active-bg: var(--color-orange-dark);
    --bs-btn-active-border-color: var(--color-orange-dark);
}

.btn-outline-primary {
    --bs-btn-color: var(--color-orange);
    --bs-btn-border-color: var(--color-orange);
    --bs-btn-hover-bg: var(--color-orange);
    --bs-btn-hover-border-color: var(--color-orange);
    --bs-btn-active-bg: var(--color-orange);
    --bs-btn-active-border-color: var(--color-orange);
}

.text-primary {
    color: var(--color-orange) !important;
}

.bg-primary {
    background-color: var(--color-orange) !important;
}

.border-primary {
    border-color: var(--color-orange) !important;
}

.text-success {
    color: var(--color-orange) !important;
}

.bg-success {
    background-color: var(--color-orange) !important;
}

.btn-success {
    --bs-btn-bg: var(--color-orange);
    --bs-btn-border-color: var(--color-orange);
    --bs-btn-hover-bg: var(--color-orange-dark);
}

.text-info {
    color: var(--color-orange) !important;
}

.bg-info {
    background-color: var(--color-orange) !important;
}

.btn-info {
    --bs-btn-bg: var(--color-orange);
    --bs-btn-border-color: var(--color-orange);
    --bs-btn-hover-bg: var(--color-orange-dark);
    color: white !important;
}

.text-warning {
    color: var(--color-orange) !important;
}

.bg-warning {
    background-color: var(--color-orange) !important;
}

.btn-warning {
    --bs-btn-bg: var(--color-orange);
    --bs-btn-border-color: var(--color-orange);
    --bs-btn-hover-bg: var(--color-orange-dark);
}

body { font-family: 'Inter', sans-serif; color: #1a2b3b; }
.bg-navy { background-color: var(--color-navy) !important; }
.text-navy { color: var(--color-navy) !important; }
.bg-navy-light { background-color: var(--color-navy-light) !important; }
.bg-orange { background-color: var(--color-orange) !important; }
.bg-orange-dark { background-color: var(--color-orange-dark) !important; }
.text-orange { color: var(--color-orange) !important; }
.text-slate { color: var(--color-slate) !important; }
.text-slate-light { color: var(--color-slate-light) !important; }
.border-orange { border-color: var(--color-orange) !important; }
.border-navy-light { border-color: var(--color-navy-light) !important; }

.btn-orange {
    background-color: var(--color-orange);
    color: white;
    border: none;
    transition: all 0.3s;
}
.btn-orange:hover {
    background-color: var(--color-navy);
    color: white;
}
.btn-navy {
    background-color: var(--color-navy);
    color: white;
    border: none;
    transition: all 0.3s;
}
.btn-navy:hover {
    background-color: var(--color-navy-light);
    color: white;
    transform: translateY(-1px);
}
.btn-outline-slate {
    border-color: var(--color-slate-light);
    color: var(--color-slate-light);
}
.btn-outline-slate:hover {
    background-color: var(--color-navy-light);
    color: white;
}

.header-fixed {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    z-index: 1050;
    background-color: rgba(15, 31, 61, 0.95);
    backdrop-filter: blur(4px);
    border-bottom: 1px solid rgba(17, 34, 64, 0.2);
}

.header-fixed .dropdown-menu {
    z-index: 1060;
}

.nav-link {
    color: var(--color-slate-light) !important;
    font-size: 0.875rem;
    transition: color 0.2s;
}
.nav-link:hover {
    color: white !important;
}

.hero-section {
    position: relative;
    min-height: 90vh;
    display: flex;
    align-items: center;
    background-color: var(--color-navy);
    overflow: hidden;
    padding-top: 80px;
}
.hero-bg {
    position: absolute;
    inset: 0;
    background-size: cover;
    background-position: center;
    opacity: 0.3;
}
.hero-overlay {
    position: absolute;
    inset: 0;
    background: linear-gradient(to right, var(--color-navy), rgba(15, 31, 61, 0.9), rgba(15, 31, 61, 0.7));
}

.badge-orange-soft {
    background-color: rgba(249, 115, 22, 0.2);
    border: 1px solid rgba(249, 115, 22, 0.3);
    color: var(--color-orange);
    border-radius: 50rem;
    padding: 0.5rem 1rem;
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
}

.course-card {
    border-radius: 0.75rem;
    overflow: hidden;
    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1);
    transition: all 0.3s;
    border: 1px solid #e5e7eb;
    height: 100%;
}

.hover-text-danger:hover {
    color: #ef4444 !important;
}

/* Notification Toast */
.notification-toast {
    position: fixed;
    bottom: 20px;
    right: 20px;
    z-index: 9999;
    min-width: 250px;
    max-width: 350px;
    transform: translateY(100px);
    transition: transform 0.3s ease-out, opacity 0.3s ease-out;
    opacity: 0;
    box-shadow: 0 0.5rem 1rem rgba(0, 0, 0, 0.15);
}

.notification-toast.show {
    transform: translateY(0);
    opacity: 1;
}
.course-card:hover {
    box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1);
    transform: translateY(-2px);
}
.course-card img {
    height: 200px;
    object-fit: cover;
    transition: transform 0.5s;
}
.course-card:hover img {
    transform: scale(1.05);
}

.feature-card {
    background-color: rgba(17, 34, 64, 0.5);
    border-radius: 0.75rem;
    padding: 1.5rem;
    border: 1px solid var(--color-navy-light);
    transition: border-color 0.2s;
}
.feature-card:hover {
    border-color: rgba(249, 115, 22, 0.5);
}
.feature-icon {
    width: 3rem;
    height: 3rem;
    background-color: rgba(249, 115, 22, 0.2);
    border-radius: 0.5rem;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 1rem;
}

@keyframes fadeIn {
    from { opacity: 0; transform: translateY(20px); }
    to { opacity: 1; transform: translateY(0); }
}
.animate-fade-in {
    animation: fadeIn 0.6s ease-out forwards;
}

    @media (min-width: 992px) {
        .dropdown:hover > .dropdown-menu {
            display: block;
        }
        .dropdown-submenu:hover > .submenu-popup {
            display: block !important;
        }
    }

    /* Mobile Submenu Adjustments */
    @media (max-width: 991.98px) {
        .dropdown-submenu .submenu-popup {
            position: static !important;
            width: 100% !important;
            margin-top: 0 !important;
            box-shadow: none !important;
            border: none !important;
            padding-left: 1rem !important;
            background-color: rgba(255, 255, 255, 0.05) !important;
        }
        .dropdown-submenu > a svg {
            transition: transform 0.2s;
        }
        .dropdown-submenu > a[aria-expanded="true"] svg {
            transform: rotate(90deg);
        }
    }
.submenu-popup {
    z-index: 1060;
}
.mt-neg-3 { margin-top: -1rem !important; }
.mt-1-5 { margin-top: 0.375rem !important; }
.dropdown-menu {
    margin-top: 0;
    background-color: var(--color-navy-light);
    border: 1px solid rgba(17, 34, 64, 0.4);
}
.dropdown-item {
    color: var(--color-slate-light);
    font-size: 0.875rem;
}
.radio-custom {
    width: 1rem;
    height: 1rem;
    border: 1px solid #cbd5e1;
    border-radius: 50%;
    margin-right: 0.75rem;
    display: inline-block;
    position: relative;
}

input[type="radio"]:checked + label {
    color: var(--color-orange);
    font-weight: 600;
}

input[type="radio"]:checked + label .radio-custom {
    background-color: var(--color-orange);
    border-color: var(--color-orange);
    box-shadow: inset 0 0 0 2px white;
}

/* Utilities for inline styles */
.w-40px { width: 40px; }
.h-40px { height: 40px; }
.w-48px { width: 48px; }
.h-48px { height: 48px; }
.w-24px { width: 24px; }
.h-24px { height: 24px; }
.fs-075rem { font-size: 0.75rem; }
.mt-neg-4px { margin-top: -4px; }
.pt-8rem { padding-top: 8rem; }
.pb-5rem { padding-bottom: 5rem; }
.top-100px { top: 100px; }
.fs-1125rem { font-size: 1.125rem; }
.letter-spacing-05px { letter-spacing: 0.5px; }
.fs-10px { font-size: 10px; }

.tab-content { display: none; }
.tab-content.active { display: block; }
.tab-btn.active { 
    background-color: white;
    color: var(--color-navy);
    font-weight: 600;
    box-shadow: 0 1px 3px 0 rgb(0 0 0 / 0.1), 0 1px 2px -1px rgb(0 0 0 / 0.1);
}

/* Calendar Styles */
.calendar-container {
    background: white;
    border-radius: 12px;
    padding: 16px;
    border: 1px solid #e2e8f0;
}
.calendar-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 16px;
}
.calendar-grid {
    display: grid;
    grid-template-columns: repeat(7, 1fr);
    gap: 4px;
}
.calendar-day-name {
    text-align: center;
    font-size: 12px;
    font-weight: 600;
    color: var(--color-slate);
    padding-bottom: 8px;
}
.calendar-day {
    aspect-ratio: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 14px;
    cursor: pointer;
    border-radius: 6px;
    transition: all 0.2s;
}
.calendar-day:hover:not(.empty) {
    background-color: #f1f5f9;
}
.calendar-day.selected {
    background-color: var(--color-navy);
    color: white;
    font-weight: 600;
}
.calendar-day.highlight {
    background-color: var(--color-orange-light);
    color: white;
    font-weight: 600;
}
.calendar-day.today {
    border: 1px solid var(--color-orange);
    color: var(--color-orange);
}
.calendar-day.empty {
    cursor: default;
}

/* jQuery UI Datepicker Styles */
.ui-datepicker {
    width: 100% !important;
    padding: 0 !important;
    border: none !important;
    font-family: inherit !important;
}
.ui-datepicker-header {
    background: transparent !important;
    border: none !important;
    padding: 0 0 16px 0 !important;
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
}
.ui-datepicker-title {
    order: 2;
    margin: 0 !important;
    font-weight: 700 !important;
    color: var(--color-navy) !important;
}
.ui-datepicker-prev, .ui-datepicker-next {
    position: static !important;
    display: block !important;
    width: 32px !important;
    height: 32px !important;
    cursor: pointer !important;
    border-radius: 6px !important;
    transition: all 0.2s !important;
}
.ui-datepicker-prev { order: 1; }
.ui-datepicker-next { order: 3; }
.ui-datepicker-prev:hover, .ui-datepicker-next:hover {
    background-color: #f1f5f9 !important;
    left: auto !important;
    right: auto !important;
    top: auto !important;
}
.ui-datepicker-prev span, .ui-datepicker-next span {
    display: none !important;
}
.ui-datepicker-prev::after {
    content: '<';
    display: flex;
    align-items: center;
    justify-content: center;
    height: 100%;
    color: var(--color-slate);
    font-weight: bold;
}
.ui-datepicker-next::after {
    content: '>';
    display: flex;
    align-items: center;
    justify-content: center;
    height: 100%;
    color: var(--color-slate);
    font-weight: bold;
}
.ui-datepicker-calendar {
    width: 100% !important;
    margin: 0 !important;
}
.ui-datepicker-calendar th {
    padding: 0 0 8px 0 !important;
    text-align: center !important;
    font-size: 12px !important;
    font-weight: 600 !important;
    color: var(--color-slate) !important;
}
.ui-datepicker-calendar td {
    padding: 2px !important;
}
.ui-state-default {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    aspect-ratio: 1 !important;
    background: transparent !important;
    border: none !important;
    border-radius: 6px !important;
    color: var(--color-navy) !important;
    font-size: 14px !important;
    transition: all 0.2s !important;
}
.ui-state-default:hover {
    background-color: #f1f5f9 !important;
}
.ui-state-active {
    background-color: var(--color-navy) !important;
    color: white !important;
    font-weight: 600 !important;
}
.ui-state-highlight:not(.ui-state-active) {
    border: 1px solid var(--color-orange) !important;
    color: var(--color-orange) !important;
}
.course-duration-day .ui-state-default {
    background-color: var(--color-orange) !important;
    color: white !important;
    font-weight: 600 !important;
}
.ui-datepicker-unselectable.ui-state-disabled .ui-state-default {
    opacity: 0.3 !important;
    cursor: default !important;
}
.ui-datepicker-unselectable.course-duration-day .ui-state-default {
    opacity: 1 !important;
    background-color: var(--color-orange) !important;
    color: white !important;
}
.btn-orange-shadow {
    box-shadow: 0 10px 15px -3px rgba(249, 115, 22, 0.2);
}
.btn-orange-shadow:hover {
    box-shadow: 0 20px 25px -5px rgba(15, 31, 61, 0.3);
}
.bg-slate-100-soft {
    background-color: rgba(241, 245, 249, 0.5);
}
.border-slate-100 {
    border-color: #f1f5f9 !important;
}
.hover-bg-orange:hover {
    background-color: var(--color-orange) !important;
}
.hover-text-white:hover {
    color: white !important;
}
.pagination .page-item.disabled .page-link {
    background-color: #f8fafc !important;
    color: #cbd5e1 !important;
}
.pagination .page-link {
    color: var(--color-navy);
    transition: all 0.2s;
}