/* ==========================================================================
   Inoversi public theme — palette from the logo (navy #19315B, orange #EC700A)
   Loaded by application/views/template2.php after MDB. Pages use these classes:
   .inv-section, .inv-section--soft, .inv-section-title, .inv-eyebrow, .inv-card,
   .inv-btn, .inv-btn--navy, .inv-btn--orange, .inv-btn--outline, .inv-hero,
   .inv-avatar, .inv-badge, .inv-auth, .inv-prose, .inv-breadcrumb, .inv-table
   ========================================================================== */

:root {
	--inv-navy: #19315B;
	--inv-navy-dark: #122443;
	--inv-navy-soft: #E8EDF6;
	--inv-orange: #EC700A;
	--inv-orange-dark: #D0620A;
	--inv-orange-soft: #FDEADA;
	--inv-ink: #1F2937;
	--inv-muted: #6B7280;
	--inv-line: #E5E7EB;
	--inv-bg: #FFFFFF;
	--inv-bg-soft: #F6F8FB;
	--inv-radius: 16px;
	--inv-radius-sm: 10px;
	--inv-shadow: 0 10px 30px rgba(25, 49, 91, 0.08);
	--inv-shadow-hover: 0 18px 40px rgba(25, 49, 91, 0.16);
}

html { scroll-behavior: smooth; }
body { background: var(--inv-bg); color: var(--inv-ink); -webkit-font-smoothing: antialiased; }
a { color: var(--inv-orange); text-decoration: none; }
a:hover { color: var(--inv-orange-dark); }
h1, h2, h3, h4, h5, h6 { color: var(--inv-navy); font-weight: 700; letter-spacing: -0.01em; }
img { max-width: 100%; }

/* ---------- buttons ---------- */
.inv-btn, .btn.inv-btn {
	display: inline-flex; align-items: center; gap: .5rem;
	padding: .7rem 1.4rem; border-radius: 999px; font-weight: 600; font-size: .92rem;
	letter-spacing: .01em; text-transform: none; box-shadow: none; border: 2px solid transparent;
	transition: transform .15s ease, box-shadow .15s ease, background-color .15s ease, color .15s ease;
}
.inv-btn:hover { transform: translateY(-1px); box-shadow: var(--inv-shadow); }
.inv-btn--orange { background: var(--inv-orange); color: #fff !important; }
.inv-btn--orange:hover { background: var(--inv-orange-dark); color: #fff !important; }
.inv-btn--navy { background: var(--inv-navy); color: #fff !important; }
.inv-btn--navy:hover { background: var(--inv-navy-dark); color: #fff !important; }
.inv-btn--outline { background: transparent; border-color: var(--inv-orange); color: var(--inv-orange) !important; }
.inv-btn--outline:hover { background: var(--inv-orange); color: #fff !important; }
.inv-btn--white { background: #fff; color: var(--inv-navy) !important; }
.inv-btn--sm { padding: .45rem 1rem; font-size: .82rem; }
.inv-btn--lg { padding: .9rem 1.8rem; font-size: 1rem; }

/* MDB default primary buttons used across old markup */
.btn-primary { background-color: var(--inv-orange) !important; border-color: var(--inv-orange) !important; color: #fff !important; box-shadow: none !important; border-radius: 999px; font-weight: 600; text-transform: none; }
.btn-primary:hover, .btn-primary:focus { background-color: var(--inv-orange-dark) !important; }
.btn-secondary { border-radius: 999px; text-transform: none; }
.btn-link { text-transform: none; font-weight: 600; }

/* ---------- navbar ---------- */
.inv-navbar {
	position: sticky; top: 0; z-index: 1030;
	background: rgba(255, 255, 255, .96); backdrop-filter: saturate(180%) blur(8px);
	border-bottom: 1px solid var(--inv-line); box-shadow: 0 2px 12px rgba(25, 49, 91, .06);
	padding: .35rem 0;
}
.inv-navbar .navbar-brand img { height: 46px; width: auto; }
.inv-navbar .nav-link { color: var(--inv-navy) !important; font-weight: 600; font-size: .95rem; padding: .6rem .9rem !important; border-radius: 8px; }
.inv-navbar .nav-link:hover, .inv-navbar .nav-link.show { color: var(--inv-orange) !important; background: var(--inv-orange-soft); }
.inv-navbar .dropdown-menu { border: 0; border-radius: 12px; box-shadow: var(--inv-shadow); padding: .5rem; }
.inv-navbar .dropdown-item { border-radius: 8px; color: var(--inv-ink) !important; font-weight: 500; padding: .55rem .9rem; }
.inv-navbar .dropdown-item:hover { background: var(--inv-orange-soft); color: var(--inv-orange) !important; }
.inv-navbar .inv-icon-btn { color: var(--inv-navy); font-size: 1.1rem; padding: .45rem .55rem; border-radius: 50%; transition: background .15s; }
.inv-navbar .inv-icon-btn:hover { background: var(--inv-orange-soft); color: var(--inv-orange); }
.inv-navbar .badge-notification { background: var(--inv-orange) !important; }
.inv-navbar .inv-avatar-sm { width: 36px; height: 36px; border-radius: 50%; object-fit: cover; border: 2px solid var(--inv-orange-soft); }

/* ---------- search (autocomplete) ---------- */
.inv-search .form-control { border-radius: 999px; padding: .65rem 1.2rem; border: 1px solid var(--inv-line); }
.inv-search .form-control:focus { border-color: var(--inv-orange); box-shadow: 0 0 0 3px rgba(236, 112, 10, .15); }
.autoComplete_wrapper > ul { border-radius: 12px !important; box-shadow: var(--inv-shadow); border: 1px solid var(--inv-line) !important; }

/* ---------- sections ---------- */
.inv-section { padding: 4.5rem 0; }
.inv-section--soft { background: var(--inv-bg-soft); }
.inv-section--navy { background: linear-gradient(135deg, var(--inv-navy) 0%, var(--inv-navy-dark) 100%); color: #fff; }
.inv-section--navy h1, .inv-section--navy h2, .inv-section--navy h3, .inv-section--navy p { color: #fff; }
.inv-section--tight { padding: 2.5rem 0; }
.inv-eyebrow { display: inline-block; color: var(--inv-orange); font-weight: 700; letter-spacing: .12em; text-transform: uppercase; font-size: .75rem; margin-bottom: .6rem; }
.inv-section-title { font-size: clamp(1.5rem, 2.6vw, 2.1rem); font-weight: 700; color: var(--inv-navy); margin-bottom: .6rem; position: relative; }
.inv-section-title::after { content: ""; display: block; width: 56px; height: 4px; border-radius: 4px; background: var(--inv-orange); margin-top: .7rem; }
.inv-section-title--center { text-align: center; }
.inv-section-title--center::after { margin-left: auto; margin-right: auto; }
.inv-section-sub { color: var(--inv-muted); max-width: 720px; font-size: 1.02rem; }
.inv-section-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 1rem; flex-wrap: wrap; margin-bottom: 2rem; }

/* ---------- hero (banner slider) ---------- */
.inv-hero { padding: 2.5rem 0 1rem; background: radial-gradient(1200px 500px at 85% -10%, var(--inv-orange-soft) 0%, transparent 60%), var(--inv-bg); }
.inv-hero .swiper-slide .row { background: transparent !important; }
.inv-hero .banner-img-swiper { border-radius: var(--inv-radius); box-shadow: var(--inv-shadow); object-fit: cover; }
.inv-hero .banner-card {
	background: linear-gradient(135deg, var(--inv-orange) 0%, #F28A33 100%);
	color: #fff; border-radius: var(--inv-radius); box-shadow: 0 20px 50px rgba(236, 112, 10, .28);
	position: relative; overflow: hidden;
}
.inv-hero .banner-card::before { content: ""; position: absolute; right: -60px; top: -60px; width: 220px; height: 220px; border-radius: 50%; background: rgba(255, 255, 255, .12); }
.inv-hero .banner-card::after { content: ""; position: absolute; right: 40px; bottom: -90px; width: 180px; height: 180px; border-radius: 50%; background: rgba(255, 255, 255, .10); }
.inv-hero .banner-card .card-body { position: relative; z-index: 1; }
.inv-hero .banner-card h1 { color: #fff; font-size: clamp(1.7rem, 3.2vw, 2.6rem); line-height: 1.15; font-weight: 800; }
.inv-hero .banner-card p { color: rgba(255, 255, 255, .92); font-size: 1.02rem; }
.inv-hero .banner-btn { background: var(--inv-navy) !important; border-color: var(--inv-navy) !important; color: #fff !important; border-radius: 999px; padding: .75rem 1.5rem; font-weight: 600; }
.inv-hero .banner-btn:hover { background: var(--inv-navy-dark) !important; }
.inv-hero .swiper-pagination-bullet { background: var(--inv-navy); opacity: .25; }
.inv-hero .swiper-pagination-bullet-active { background: var(--inv-orange); opacity: 1; width: 22px; border-radius: 6px; }

/* ---------- generic cards ---------- */
.inv-card {
	background: #fff; border: 1px solid var(--inv-line); border-radius: var(--inv-radius);
	box-shadow: var(--inv-shadow); overflow: hidden; transition: transform .2s ease, box-shadow .2s ease, border-color .2s ease;
}
.inv-card:hover { transform: translateY(-4px); box-shadow: var(--inv-shadow-hover); border-color: var(--inv-orange-soft); }
.inv-card__img { width: 100%; aspect-ratio: 16 / 9; object-fit: cover; }
.inv-card__img--portrait { aspect-ratio: 4 / 5; object-fit: contain; object-position: top center; background: var(--inv-bg-soft); }
.inv-card__body { padding: 1.25rem 1.35rem 1.35rem; }
.inv-card__title { font-size: 1.05rem; font-weight: 700; color: var(--inv-navy); line-height: 1.35; margin-bottom: .35rem; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.inv-card__meta { color: var(--inv-muted); font-size: .85rem; margin-bottom: .6rem; }
.inv-card__text { color: #4B5563; font-size: .92rem; line-height: 1.55; display: -webkit-box; -webkit-line-clamp: 4; -webkit-box-orient: vertical; overflow: hidden; }
.inv-card__footer { display: flex; align-items: center; justify-content: space-between; gap: .75rem; margin-top: 1rem; padding-top: .9rem; border-top: 1px solid var(--inv-line); }
.inv-card a.stretched { color: inherit; }

/* course cards (home slider, search results, my learning) */
.card-list .card-item .card-link { border: 1px solid var(--inv-line) !important; box-shadow: var(--inv-shadow) !important; border-radius: var(--inv-radius) !important; }
.card-list .card-item .card-link:hover { border-color: var(--inv-orange) !important; box-shadow: var(--inv-shadow-hover) !important; transform: translateY(-4px); }
.card-list .card-link .card-title { color: var(--inv-navy); }
.card-list .card-link .badge { background: var(--inv-orange-soft) !important; color: var(--inv-orange) !important; }
.card-wrapper .swiper-slide-button { color: var(--inv-orange); background: #fff; width: 44px; height: 44px; border-radius: 50%; box-shadow: var(--inv-shadow); }
.card-wrapper .swiper-slide-button::after { font-size: 1rem; font-weight: 700; }

/* ---------- badges / rating / price ---------- */
.inv-badge { display: inline-block; padding: .3rem .7rem; border-radius: 999px; font-size: .75rem; font-weight: 600; background: var(--inv-orange-soft); color: var(--inv-orange); }
.inv-badge--navy { background: var(--inv-navy-soft); color: var(--inv-navy); }
.inv-price { font-weight: 800; color: var(--inv-navy); font-size: 1.15rem; }
.inv-price--old { color: var(--inv-muted); text-decoration: line-through; font-weight: 500; font-size: .95rem; margin-right: .4rem; }
.rating-icons .star, .inv-stars .star { color: #D1D5DB; font-size: 1rem; }
.rating-icons .star[style*="gold"], .inv-stars .star--on { color: #F5B301 !important; }

/* ---------- avatars (facilitators) ---------- */
.inv-avatar { width: 140px; height: 140px; border-radius: 50%; object-fit: cover; border: 4px solid #fff; box-shadow: var(--inv-shadow); }
.inv-avatar--lg { width: 200px; height: 200px; }
.inv-avatar--sm { width: 56px; height: 56px; border-width: 2px; }

/* ---------- prose (rich text from summernote) ---------- */
.inv-prose { color: #374151; line-height: 1.75; font-size: 1rem; }
.inv-prose h1, .inv-prose h2, .inv-prose h3, .inv-prose h4 { color: var(--inv-navy); margin-top: 1.4rem; margin-bottom: .6rem; }
.inv-prose p { margin-bottom: 1rem; }
.inv-prose ul, .inv-prose ol { padding-left: 1.3rem; margin-bottom: 1rem; }
.inv-prose img { border-radius: var(--inv-radius-sm); }
.inv-prose table { width: 100%; border-collapse: collapse; }
.inv-prose td, .inv-prose th { border: 1px solid var(--inv-line); padding: .5rem .7rem; }

/* ---------- page header / breadcrumb ---------- */
.inv-page-head { background: linear-gradient(135deg, var(--inv-navy) 0%, var(--inv-navy-dark) 100%); color: #fff; padding: 3.2rem 0 2.6rem; position: relative; overflow: hidden; }
.inv-page-head::after { content: ""; position: absolute; right: -80px; bottom: -120px; width: 320px; height: 320px; border-radius: 50%; background: rgba(236, 112, 10, .25); }
.inv-page-head h1 { color: #fff; font-size: clamp(1.6rem, 3vw, 2.3rem); margin-bottom: .3rem; position: relative; z-index: 1; }
.inv-page-head p { color: rgba(255, 255, 255, .8); margin: 0; position: relative; z-index: 1; }
.inv-breadcrumb { font-size: .85rem; color: rgba(255, 255, 255, .7); margin-bottom: .6rem; position: relative; z-index: 1; }
.inv-breadcrumb a { color: rgba(255, 255, 255, .85); }
.inv-breadcrumb a:hover { color: #fff; }

/* ---------- forms / auth ---------- */
.inv-auth { min-height: calc(100vh - 140px); display: flex; align-items: center; padding: 3rem 0; background: var(--inv-bg-soft); }
.inv-auth__card { background: #fff; border-radius: var(--inv-radius); box-shadow: var(--inv-shadow); overflow: hidden; }
.inv-auth__side { background: linear-gradient(160deg, var(--inv-navy) 0%, var(--inv-navy-dark) 100%); color: #fff; padding: 2.5rem; height: 100%; display: flex; flex-direction: column; justify-content: center; position: relative; overflow: hidden; }
.inv-auth__side::after { content: ""; position: absolute; right: -70px; bottom: -70px; width: 240px; height: 240px; border-radius: 50%; background: rgba(236, 112, 10, .35); }
.inv-auth__side h2 { color: #fff; font-size: 1.6rem; }
.inv-auth__side p { color: rgba(255, 255, 255, .85); }
.inv-auth__side img { border-radius: var(--inv-radius-sm); position: relative; z-index: 1; }
.inv-auth__form { padding: 2.5rem; }
.inv-auth__form h3 { margin-bottom: .3rem; }
.inv-auth__form .form-text { color: var(--inv-muted); }
.inv-form .form-control, .inv-form .form-select { border-radius: var(--inv-radius-sm); padding: .75rem 1rem; border: 1px solid var(--inv-line); background: #fff; }
.inv-form .form-control:focus, .inv-form .form-select:focus { border-color: var(--inv-orange); box-shadow: 0 0 0 3px rgba(236, 112, 10, .15); }
.inv-form .input-group-text { background: var(--inv-bg-soft); border: 1px solid var(--inv-line); border-radius: 0 var(--inv-radius-sm) var(--inv-radius-sm) 0; color: var(--inv-muted); }
.inv-form .input-group .form-control { border-radius: var(--inv-radius-sm) 0 0 var(--inv-radius-sm); }
.inv-form label { font-weight: 600; color: var(--inv-navy); font-size: .9rem; margin-bottom: .35rem; }
.inv-alert { border-radius: var(--inv-radius-sm); padding: .8rem 1rem; font-size: .92rem; }
.inv-alert--error { background: #FEF2F2; color: #B91C1C; border: 1px solid #FECACA; }
.inv-alert--info { background: var(--inv-navy-soft); color: var(--inv-navy); border: 1px solid #C7D2E5; }
.inv-alert--success { background: #ECFDF5; color: #047857; border: 1px solid #A7F3D0; }

/* ---------- tables (cart) ---------- */
.inv-table { width: 100%; border-collapse: separate; border-spacing: 0; }
.inv-table th { font-size: .78rem; text-transform: uppercase; letter-spacing: .08em; color: var(--inv-muted); font-weight: 600; padding: .8rem 1rem; border-bottom: 1px solid var(--inv-line); }
.inv-table td { padding: 1rem; border-bottom: 1px solid var(--inv-line); vertical-align: middle; }
.inv-table tr:last-child td { border-bottom: 0; }
.inv-summary { background: var(--inv-bg-soft); border-radius: var(--inv-radius); padding: 1.5rem; }
.inv-summary__row { display: flex; justify-content: space-between; padding: .45rem 0; color: #374151; }
.inv-summary__total { font-size: 1.25rem; font-weight: 800; color: var(--inv-navy); border-top: 1px solid var(--inv-line); margin-top: .5rem; padding-top: .9rem; }

/* ---------- learning player ---------- */
.inv-player { background: #fff; border: 1px solid var(--inv-line); border-radius: var(--inv-radius); box-shadow: var(--inv-shadow); overflow: hidden; }
.inv-player video, .inv-player img { border-radius: var(--inv-radius-sm); }
.main-tablinks { font-weight: 700; color: var(--inv-navy) !important; background: var(--inv-bg-soft) !important; }
.tablinks { font-size: .92rem; color: #374151; }
.tablinks:hover { background: var(--inv-orange-soft) !important; }
.inv-progress { height: 10px; border-radius: 999px; background: var(--inv-line); overflow: hidden; }
.inv-progress > span { display: block; height: 100%; background: linear-gradient(90deg, var(--inv-orange), #F28A33); border-radius: 999px; }

/* ---------- pagination (simple-pagination plugin) ---------- */
.simple-pagination li a, .simple-pagination li span { border-radius: 999px !important; border: 1px solid var(--inv-line) !important; color: var(--inv-navy) !important; background: #fff !important; box-shadow: none !important; }
.simple-pagination li a.current, .simple-pagination li span.current { background: var(--inv-orange) !important; color: #fff !important; border-color: var(--inv-orange) !important; }

/* ---------- footer ---------- */
.inv-footer { background: linear-gradient(160deg, var(--inv-navy) 0%, var(--inv-navy-dark) 100%); color: rgba(255, 255, 255, .85); margin-top: 4rem; }
.inv-footer h6 { color: #fff; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; font-size: .8rem; margin-bottom: 1.2rem; }
.inv-footer p, .inv-footer li { color: rgba(255, 255, 255, .82); font-size: .93rem; }
.inv-footer a { color: rgba(255, 255, 255, .85); }
.inv-footer a:hover { color: #fff; text-decoration: underline; }
.inv-footer__brand img { height: 44px; width: auto; background: #fff; padding: 6px 10px; border-radius: 10px; }
.inv-footer__list { list-style: none; padding: 0; margin: 0; }
.inv-footer__list li { margin-bottom: .55rem; }
.inv-footer__contact li { display: flex; gap: .7rem; align-items: flex-start; margin-bottom: .7rem; }
.inv-footer__contact i { color: var(--inv-orange); margin-top: .2rem; }
.inv-footer__social a { display: inline-flex; align-items: center; justify-content: center; width: 40px; height: 40px; border-radius: 50%; background: rgba(255, 255, 255, .1); margin-right: .5rem; color: #fff; transition: background .15s, transform .15s; }
.inv-footer__social a:hover { background: var(--inv-orange); transform: translateY(-2px); text-decoration: none; }
.inv-footer__bottom { border-top: 1px solid rgba(255, 255, 255, .12); padding: 1.1rem 0; font-size: .85rem; color: rgba(255, 255, 255, .7); }

/* ---------- mobile sidebar (existing) ---------- */
.sidebar { box-shadow: var(--inv-shadow-hover); }
.sidebar ul li a { color: var(--inv-navy) !important; font-weight: 500; }
.sidebar ul li a:hover { color: var(--inv-orange) !important; }
.close-btn { color: var(--inv-navy) !important; }

/* ---------- utilities ---------- */
.inv-muted { color: var(--inv-muted); }
.inv-navy { color: var(--inv-navy) !important; }
.inv-orange { color: var(--inv-orange) !important; }
.inv-rounded { border-radius: var(--inv-radius); }
.inv-shadow { box-shadow: var(--inv-shadow); }
.inv-divider { height: 1px; background: var(--inv-line); margin: 2rem 0; }
.inv-loading { position: fixed; inset: 0; background: rgba(255, 255, 255, .8); z-index: 1051; display: none; align-items: center; justify-content: center; }
.inv-spinner { width: 44px; height: 44px; border: 4px solid var(--inv-orange-soft); border-top-color: var(--inv-orange); border-radius: 50%; animation: inv-spin .8s linear infinite; }
@keyframes inv-spin { to { transform: rotate(360deg); } }

@media (max-width: 767px) {
	.inv-section { padding: 3rem 0; }
	.inv-hero { padding-top: 1rem; }
	.inv-hero .banner-card { margin-top: -1rem; }
	.inv-auth__form { padding: 1.75rem; }
	.inv-auth__side { padding: 1.75rem; }
	.inv-page-head { padding: 2.2rem 0 1.8rem; }
}

/* ---------- toast notifications (invNotify / alert override in template2) ---------- */
.inv-toast-wrap { position: fixed; top: 84px; right: 16px; z-index: 2000; display: flex; flex-direction: column; gap: .6rem; width: min(380px, calc(100vw - 32px)); pointer-events: none; }
.inv-toast { pointer-events: auto; display: flex; align-items: flex-start; gap: .8rem; background: #fff; border: 1px solid var(--inv-line); border-left: 5px solid var(--inv-navy); border-radius: 14px; box-shadow: var(--inv-shadow-hover); padding: .9rem 1rem; color: var(--inv-ink); font-size: .92rem; line-height: 1.5; animation: inv-toast-in .28s ease; }
.inv-toast--leaving { animation: inv-toast-out .25s ease forwards; }
.inv-toast__icon { flex: 0 0 34px; width: 34px; height: 34px; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; font-size: .95rem; background: var(--inv-navy-soft); color: var(--inv-navy); }
.inv-toast__body { flex: 1 1 auto; min-width: 0; }
.inv-toast__title { display: block; font-weight: 700; color: var(--inv-navy); margin-bottom: .1rem; font-size: .85rem; letter-spacing: .02em; }
.inv-toast__close { flex: 0 0 auto; border: 0; background: transparent; color: var(--inv-muted); font-size: 1rem; line-height: 1; padding: .1rem .2rem; cursor: pointer; border-radius: 6px; }
.inv-toast__close:hover { background: var(--inv-bg-soft); color: var(--inv-ink); }
.inv-toast--success { border-left-color: #059669; }
.inv-toast--success .inv-toast__icon { background: #ECFDF5; color: #059669; }
.inv-toast--success .inv-toast__title { color: #047857; }
.inv-toast--error { border-left-color: #DC2626; }
.inv-toast--error .inv-toast__icon { background: #FEF2F2; color: #DC2626; }
.inv-toast--error .inv-toast__title { color: #B91C1C; }
.inv-toast--warning { border-left-color: var(--inv-orange); }
.inv-toast--warning .inv-toast__icon { background: var(--inv-orange-soft); color: var(--inv-orange); }
.inv-toast--warning .inv-toast__title { color: var(--inv-orange-dark); }
@keyframes inv-toast-in { from { opacity: 0; transform: translateX(24px); } to { opacity: 1; transform: none; } }
@keyframes inv-toast-out { to { opacity: 0; transform: translateX(24px); } }
@media (max-width: 575px) { .inv-toast-wrap { top: auto; bottom: 16px; right: 16px; left: 16px; width: auto; } }