/* ============================================================
   Skeleton Loader — Belstar Microfinance
   All animated blocks use .sk-box with shimmer keyframe
   ============================================================ */

*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

body {
    font-family: 'Poppins', sans-serif;
    background: #fff;
    max-width: 1920px;
    margin: 0 auto;
}

/* ── Shimmer animation ────────────────────────────────────── */
@keyframes sk-shimmer {
    0%   { background-position: 200% 0; }
    100% { background-position: -200% 0; }
}

.sk-box {
    background: linear-gradient(90deg, #e8e8e8 25%, #f4f4f4 50%, #e8e8e8 75%);
    background-size: 200% 100%;
    animation: sk-shimmer 1.6s ease-in-out infinite;
    border-radius: 6px;
    display: block;
}

/* ── Text line sizes ──────────────────────────────────────── */
.sk-line        { height: 14px; width: 100%; margin-bottom: 10px; border-radius: 4px; }
.sk-line--xl    { height: 48px; border-radius: 8px; }
.sk-line--lg    { height: 28px; border-radius: 6px; }
.sk-line--md    { height: 18px; border-radius: 5px; }
.sk-line--sm    { height: 13px; border-radius: 4px; }
.sk-line--xs    { height: 11px; border-radius: 3px; }
.sk-line--w100  { width: 100%; }
.sk-line--w80   { width: 80%; }
.sk-line--w75   { width: 75%; }
.sk-line--w60   { width: 60%; }
.sk-line--w45   { width: 45%; }
.sk-line--w30   { width: 30%; }
.sk-line--w20   { width: 20%; }

/* ── Image / media blocks ─────────────────────────────────── */
.sk-img          { width: 100%; border-radius: 8px; }
.sk-img--hero    { height: 520px; border-radius: 0; }
.sk-img--hero-sm { height: 320px; border-radius: 0; }
.sk-img--3x4     { aspect-ratio: 3/4; }
.sk-img--16x9    { aspect-ratio: 16/9; }
.sk-img--4x3     { aspect-ratio: 4/3; }
.sk-img--1x1     { aspect-ratio: 1/1; }
.sk-img--3x2     { aspect-ratio: 3/2; }

/* ── Circle ───────────────────────────────────────────────── */
.sk-circle      { border-radius: 50%; flex-shrink: 0; }
.sk-circle--lg  { width: 80px;  height: 80px; }
.sk-circle--md  { width: 48px;  height: 48px; }
.sk-circle--sm  { width: 36px;  height: 36px; }

/* ── Buttons ──────────────────────────────────────────────── */
.sk-btn        { height: 44px; border-radius: 4px; display: block; }
.sk-btn--sm    { height: 36px; }
.sk-btn--lg    { height: 52px; border-radius: 6px; }
.sk-btn--w180  { width: 180px; }
.sk-btn--w160  { width: 160px; }
.sk-btn--w120  { width: 120px; }
.sk-btn--w100  { width: 100%; }

/* ── Badge / pill ─────────────────────────────────────────── */
.sk-badge      { height: 26px; width: 80px; border-radius: 100px; }
.sk-badge--sm  { height: 22px; width: 60px; }

/* ── Layout helpers ───────────────────────────────────────── */
.sk-container {
    max-width: 1440px;
    margin: 0 auto;
    padding: 0 40px;
}

.sk-section     { padding: 64px 0; }
.sk-section--lg { padding: 80px 0; }
.sk-section--sm { padding: 40px 0; }
.sk-section--xs { padding: 24px 0; }

/* ── Spacing — margin bottom ──────────────────────────────── */
.sk-mb4  { margin-bottom: 4px; }
.sk-mb6  { margin-bottom: 6px; }
.sk-mb8  { margin-bottom: 8px; }
.sk-mb10 { margin-bottom: 10px; }
.sk-mb12 { margin-bottom: 12px; }
.sk-mb16 { margin-bottom: 16px; }
.sk-mb20 { margin-bottom: 20px; }
.sk-mb24 { margin-bottom: 24px; }
.sk-mb28 { margin-bottom: 28px; }
.sk-mb32 { margin-bottom: 32px; }
.sk-mb40 { margin-bottom: 40px; }
.sk-mb48 { margin-bottom: 48px; }
.sk-mb64 { margin-bottom: 64px; }

/* ── Spacing — margin top ─────────────────────────────────── */
.sk-mt8  { margin-top: 8px; }
.sk-mt16 { margin-top: 16px; }
.sk-mt20 { margin-top: 20px; }
.sk-mt32 { margin-top: 32px; }
.sk-mt40 { margin-top: 40px; }

/* ── Grids ────────────────────────────────────────────────── */
.sk-grid     { display: grid; gap: 28px; }
.sk-grid--4  { grid-template-columns: repeat(4, 1fr); }
.sk-grid--3  { grid-template-columns: repeat(3, 1fr); }
.sk-grid--2  { grid-template-columns: repeat(2, 1fr); }
.sk-grid--2-1 { grid-template-columns: 2fr 1fr; }
.sk-grid--1-2 { grid-template-columns: 1fr 2fr; }
.sk-grid--5col { grid-template-columns: repeat(5, 1fr); }

/* Specific named grids for page components */
.sk-grid--report {
    display: grid;
    grid-template-columns: 60px 1fr 160px 120px;
    gap: 16px;
    align-items: center;
}
.sk-grid--notice {
    display: grid;
    grid-template-columns: 130px 1fr 110px;
    gap: 16px;
    align-items: center;
}
.sk-grid--career {
    display: grid;
    grid-template-columns: 1fr 500px 260px 110px;
    gap: 16px;
    align-items: center;
}
.sk-grid--map {
    display: grid;
    grid-template-columns: 1fr 380px;
    gap: 32px;
    align-items: start;
}
.sk-grid--sitemap {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 40px 64px;
    align-items: start;
}
.sk-grid--2-equal {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 20px;
}
.sk-grid--article {
    display: grid;
    grid-template-columns: 1fr 140px;
    overflow: hidden;
}
.sk-grid--aside {
    display: grid;
    grid-template-columns: 1fr 380px;
    gap: 64px;
    align-items: start;
}

/* ── Flex helpers ─────────────────────────────────────────── */
.sk-flex           { display: flex; }
.sk-flex--between  { justify-content: space-between; align-items: center; }
.sk-flex--center   { align-items: center; }
.sk-flex--col      { flex-direction: column; }
.sk-flex--wrap     { flex-wrap: wrap; }
.sk-flex--gap8     { gap: 8px; }
.sk-flex--gap12    { gap: 12px; }
.sk-flex--gap16    { gap: 16px; }
.sk-flex--gap24    { gap: 24px; }
.sk-flex--gap32    { gap: 32px; }
.sk-flex--gap48    { gap: 48px; }
.sk-flex-1         { flex: 1; }
.sk-flex-shrink-0  { flex-shrink: 0; }

/* ── Gap overrides (place after grid/flex rules to take precedence) ── */
.sk-gap-6  { gap: 6px; }
.sk-gap-8  { gap: 8px; }
.sk-gap-10 { gap: 10px; }
.sk-gap-12 { gap: 12px; }
.sk-gap-16 { gap: 16px; }
.sk-gap-20 { gap: 20px; }
.sk-gap-24 { gap: 24px; }
.sk-gap-28 { gap: 28px; }
.sk-gap-32 { gap: 32px; }
.sk-gap-40 { gap: 40px; }
.sk-gap-48 { gap: 48px; }
.sk-gap-64 { gap: 64px; }

/* ── Alignment ────────────────────────────────────────────── */
.sk-align-center { align-items: center; }
.sk-align-start  { align-items: start; }
.sk-justify-center { justify-content: center; }
.sk-text-center  { text-align: center; }

/* ── Width — percentage ───────────────────────────────────── */
.sk-wp-20  { width: 20%; }
.sk-wp-28  { width: 28%; }
.sk-wp-30  { width: 30%; }
.sk-wp-32  { width: 32%; }
.sk-wp-33  { width: 33%; }
.sk-wp-38  { width: 38%; }
.sk-wp-40  { width: 40%; }
.sk-wp-42  { width: 42%; }
.sk-wp-43  { width: 43%; }
.sk-wp-45  { width: 45%; }
.sk-wp-46  { width: 46%; }
.sk-wp-48  { width: 48%; }
.sk-wp-50  { width: 50%; }
.sk-wp-52  { width: 52%; }
.sk-wp-55  { width: 55%; }
.sk-wp-58  { width: 58%; }
.sk-wp-60  { width: 60%; }
.sk-wp-62  { width: 62%; }
.sk-wp-65  { width: 65%; }
.sk-wp-68  { width: 68%; }
.sk-wp-70  { width: 70%; }
.sk-wp-72  { width: 72%; }
.sk-wp-75  { width: 75%; }
.sk-wp-78  { width: 78%; }
.sk-wp-80  { width: 80%; }
.sk-wp-85  { width: 85%; }
.sk-wp-88  { width: 88%; }
.sk-wp-90  { width: 90%; }
.sk-wp-95  { width: 95%; }
.sk-wp-97  { width: 97%; }
.sk-wp-100 { width: 100%; }

/* ── Width — fixed (px) ───────────────────────────────────── */
.sk-w-8   { width: 8px; }
.sk-w-20  { width: 20px; }
.sk-w-22  { width: 22px; }
.sk-w-50  { width: 50px; }
.sk-w-55  { width: 55px; }
.sk-w-60  { width: 60px; }
.sk-w-65  { width: 65px; }
.sk-w-70  { width: 70px; }
.sk-w-80  { width: 80px; }
.sk-w-90  { width: 90px; }
.sk-w-100 { width: 100px; }
.sk-w-105 { width: 105px; }
.sk-w-110 { width: 110px; }
.sk-w-120 { width: 120px; }
.sk-w-130 { width: 130px; }
.sk-w-140 { width: 140px; }
.sk-w-160 { width: 160px; }
.sk-w-180 { width: 180px; }
.sk-w-200 { width: 200px; }
.sk-w-260 { width: 260px; }
.sk-w-340 { width: 340px; }
.sk-w-380 { width: 380px; }

/* ── Height ───────────────────────────────────────────────── */
.sk-h-8   { height: 8px; }
.sk-h-10  { height: 10px; }
.sk-h-11  { height: 11px; }
.sk-h-12  { height: 12px; }
.sk-h-13  { height: 13px; }
.sk-h-14  { height: 14px; }
.sk-h-15  { height: 15px; }
.sk-h-16  { height: 16px; }
.sk-h-18  { height: 18px; }
.sk-h-20  { height: 20px; }
.sk-h-22  { height: 22px; }
.sk-h-24  { height: 24px; }
.sk-h-28  { height: 28px; }
.sk-h-32  { height: 32px; }
.sk-h-36  { height: 36px; }
.sk-h-40  { height: 40px; }
.sk-h-44  { height: 44px; }
.sk-h-48  { height: 48px; }
.sk-h-52  { height: 52px; }
.sk-h-56  { height: 56px; }
.sk-h-120 { height: 120px; }
.sk-h-full { height: 100%; }

/* ── Border-radius ────────────────────────────────────────── */
.sk-r-0    { border-radius: 0; }
.sk-r-3    { border-radius: 3px; }
.sk-r-4    { border-radius: 4px; }
.sk-r-5    { border-radius: 5px; }
.sk-r-6    { border-radius: 6px; }
.sk-r-7    { border-radius: 7px; }
.sk-r-8    { border-radius: 8px; }
.sk-r-12   { border-radius: 12px; }
.sk-r-16   { border-radius: 16px; }
.sk-r-full { border-radius: 50%; }
.sk-r-pill { border-radius: 100px; }

/* ── Padding ──────────────────────────────────────────────── */
.sk-p-16   { padding: 16px; }
.sk-p-20   { padding: 20px; }
.sk-p-24   { padding: 24px; }
.sk-p-28   { padding: 28px; }
.sk-p-36   { padding: 36px; }
.sk-py-14  { padding-top: 14px; padding-bottom: 14px; }
.sk-py-16  { padding-top: 16px; padding-bottom: 16px; }
.sk-px-20  { padding-left: 20px; padding-right: 20px; }
.sk-px-24  { padding-left: 24px; padding-right: 24px; }
.sk-pl-16  { padding-left: 16px; }
.sk-pl-20  { padding-left: 20px; }
.sk-pb-24  { padding-bottom: 24px; }

/* ── Misc layout ──────────────────────────────────────────── */
.sk-mx-auto        { margin-left: auto; margin-right: auto; }
.sk-overflow-hidden { overflow: hidden; }
.sk-pos-rel         { position: relative; }
.sk-pos-abs-center  {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}
.sk-d-inline { display: inline-block; }
.sk-border-b        { border-bottom: 1px solid #ebebeb; }
.sk-border-b-light  { border-bottom: 1px solid #f0f0f0; }
.sk-bg-light        { background: #f9f9f9; }
.sk-bg-table-hd     { background: #f8f8f8; }

/* ── Card ─────────────────────────────────────────────────── */
.sk-card           { border-radius: 12px; overflow: hidden; background: #fafafa; }
.sk-card--bordered { border: 1px solid #ebebeb; }
.sk-card__body     { padding: 20px; }

/* ── Bullet list ──────────────────────────────────────────── */
.sk-bullet-list { display: flex; flex-direction: column; gap: 12px; margin-bottom: 28px; }
.sk-bullet-item { display: flex; align-items: center; gap: 12px; }
.sk-bullet-dot  { width: 8px; height: 8px; border-radius: 50%; flex-shrink: 0; }

/* ── Panel (scrollable list containers) ──────────────────── */
.sk-panel-hd     { padding: 16px 20px; border-bottom: 1px solid #ebebeb; }
.sk-panel-item   { padding: 16px 20px; border-bottom: 1px solid #f0f0f0; }
.sk-panel-item--last { padding: 16px 20px; }
.sk-panel-scroll { overflow: auto; max-height: 380px; }

/* ── CTA center wrapper ───────────────────────────────────── */
.sk-cta-center { display: flex; justify-content: center; }

/* ══════════════════════════════════════════════════════════ */
/* HEADER SKELETON                                            */
/* ══════════════════════════════════════════════════════════ */
.sk-header {
    background: #fff;
    box-shadow: 0 2px 8px rgba(0,0,0,0.07);
    position: sticky;
    top: 0;
    z-index: 100;
}

.sk-header__utility {
    background: #f8f8f8;
    height: 36px;
    padding: 0 40px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    border-bottom: 1px solid #ebebeb;
}

.sk-header__main {
    height: 72px;
    padding: 0 40px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 32px;
}

.sk-header__logo {
    width: 140px;
    height: 40px;
    border-radius: 4px;
    flex-shrink: 0;
}

.sk-header__nav {
    display: flex;
    gap: 28px;
    flex: 1;
    justify-content: center;
    align-items: center;
}

.sk-header__nav-item {
    height: 13px;
    border-radius: 3px;
    flex-shrink: 0;
}

.sk-header__actions {
    display: flex;
    gap: 16px;
    align-items: center;
    flex-shrink: 0;
}

/* ══════════════════════════════════════════════════════════ */
/* FOOTER SKELETON                                            */
/* ══════════════════════════════════════════════════════════ */
.sk-footer { background: #1a1a1a; }

.sk-footer__notice {
    background: #111;
    height: 36px;
    border-bottom: 1px solid rgba(255,255,255,0.06);
    display: flex;
    align-items: center;
    padding: 0 40px;
}

.sk-footer__cta {
    background: #b01218;
    padding: 56px 0;
}

.sk-footer__main { padding: 48px 0 24px; }

.sk-footer__top {
    display: flex;
    gap: 48px;
    margin-bottom: 40px;
    align-items: flex-start;
}

.sk-footer__links {
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    gap: 24px 32px;
    padding: 32px 0;
    border-top: 1px solid rgba(255,255,255,0.1);
    border-bottom: 1px solid rgba(255,255,255,0.08);
    margin-bottom: 24px;
}

.sk-footer__bottom {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding-top: 16px;
}

.sk-footer-brand   { flex: 0 0 200px; }
.sk-footer-content { flex: 1; }

/* Footer boxes have inverted shimmer (light on dark) */
.sk-footer .sk-box {
    background: linear-gradient(
        90deg,
        rgba(255,255,255,0.07) 25%,
        rgba(255,255,255,0.14) 50%,
        rgba(255,255,255,0.07) 75%
    );
    background-size: 200% 100%;
    animation: sk-shimmer 1.6s ease-in-out infinite;
}

/* ── Breadcrumb ───────────────────────────────────────────── */
.sk-breadcrumb {
    display: flex;
    gap: 10px;
    align-items: center;
    margin-bottom: 28px;
    padding-top: 24px;
}

.sk-breadcrumb__sep {
    color: #ccc;
    font-size: 12px;
    line-height: 1;
}

/* ── Journey page header ──────────────────────────────────── */
.sk-journey-header { margin-bottom: 48px; }

/* ── Hero section ─────────────────────────────────────────── */
.sk-hero__dots {
    display: flex;
    gap: 8px;
    justify-content: center;
    margin-top: 16px;
}

.sk-hero__dot {
    width: 10px;
    height: 10px;
    border-radius: 50%;
}

/* ── Stats bar ────────────────────────────────────────────── */
.sk-stats {
    background: #f9f9f9;
    padding: 36px 40px;
}

.sk-stats__inner {
    max-width: 1440px;
    margin: 0 auto;
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 20px;
}

.sk-stats__item { text-align: center; flex: 1; }

/* ── Filter bar ───────────────────────────────────────────── */
.sk-filter { display: flex; gap: 12px; flex-wrap: wrap; margin-bottom: 32px; }

/* ── Table rows ───────────────────────────────────────────── */
.sk-table-row {
    display: flex;
    gap: 16px;
    padding: 16px 0;
    border-bottom: 1px solid #f0f0f0;
    align-items: center;
}

/* ── Map placeholder ──────────────────────────────────────── */
.sk-map { width: 100%; height: 420px; border-radius: 12px; }

/* ── Pagination ───────────────────────────────────────────── */
.sk-pagination {
    display: flex;
    gap: 8px;
    justify-content: center;
    margin-top: 48px;
}

.sk-pagination__item { width: 40px; height: 40px; border-radius: 6px; }

/* ══════════════════════════════════════════════════════════ */
/* RESPONSIVE                                                 */
/* ══════════════════════════════════════════════════════════ */
@media (max-width: 1280px) {
    .sk-grid--4 { grid-template-columns: repeat(3, 1fr); }
}

@media (max-width: 1024px) {
    .sk-grid--4  { grid-template-columns: repeat(2, 1fr); }
    .sk-grid--3  { grid-template-columns: repeat(2, 1fr); }
    .sk-header__nav-item:nth-child(n+6) { display: none; }
    .sk-footer__links { grid-template-columns: repeat(3, 1fr); }
    .sk-grid--2-1, .sk-grid--1-2 { grid-template-columns: 1fr; }
    .sk-grid--career { grid-template-columns: 1fr 1fr; }
    .sk-grid--map, .sk-grid--aside { grid-template-columns: 1fr; }
}

@media (max-width: 767px) {
    .sk-container            { padding: 0 20px; }
    .sk-section              { padding: 40px 0; }
    .sk-section--lg          { padding: 48px 0; }
    .sk-img--hero            { height: 260px; }
    .sk-img--hero-sm         { height: 200px; }
    .sk-grid--4,
    .sk-grid--3,
    .sk-grid--2,
    .sk-grid--2-1,
    .sk-grid--1-2            { grid-template-columns: 1fr; }
    .sk-grid--2-equal        { grid-template-columns: 1fr; }
    .sk-header__nav          { display: none; }
    .sk-header__main         { height: 64px; padding: 0 20px; gap: 16px; }
    .sk-header__utility      { height: 42px; padding: 0 20px; gap: 16px; }
    .sk-header__utility .sk-flex { gap: 10px; }
    .sk-header__utility .sk-w-160 { width: min(42vw, 150px); }
    .sk-header__utility .sk-w-90 { width: min(24vw, 80px); }
    .sk-header__logo         { width: 130px; height: 36px; }
    .sk-header__actions      { margin-left: auto; gap: 10px; }
    .sk-header__action-button { display: none; }
    .sk-stats                { padding: 24px 20px; }
    .sk-stats__inner         { flex-wrap: wrap; gap: 20px; }
    .sk-stats__item          { flex: 0 0 calc(33.33% - 14px); }
    .sk-footer__links        { grid-template-columns: 1fr; }
    .sk-footer__top          { flex-direction: column; gap: 20px; }
    .sk-footer__cta          { padding: 36px 0; }
    .sk-footer__main         { padding: 32px 0 20px; }
    .sk-footer__bottom       { flex-direction: column; gap: 12px; }
    .sk-footer__notice       { padding: 0 20px; }
    .sk-breadcrumb           { flex-wrap: wrap; }
    .sk-grid--career         { grid-template-columns: 1fr; }
    .sk-grid--sitemap        { grid-template-columns: 1fr; }
    .sk-grid--report,
    .sk-grid--notice         { grid-template-columns: 1fr 1fr; }
    .sk-grid--article        { grid-template-columns: 1fr; }
}