@import url("root.css");

/* ============================================================
   Loading states — กรมการจัดหางาน (DOLE)
   1) Page preloader (overlay)
   2) Top progress bar (navigation)
   3) Skeleton placeholders (content / images)
   ใช้ brand color จาก root.css : --color-primary / --color-secondary
   ============================================================ */

:root {
    --ld-primary: var(--color-primary, #B63D97);
    --ld-secondary: var(--color-secondary, #F9EEF7);
}

/* ---------- 1) PAGE PRELOADER ---------- */
.page-preloader {
    position: fixed;
    inset: 0;
    z-index: 99999;
    display: flex;
    align-items: center;
    justify-content: center;
    background: #ffffff;
    opacity: 1;
    transition: opacity .45s ease, visibility .45s ease;
}

.page-preloader.is-done {
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
}

.page-preloader__box {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 18px;
    font-family: "Kanit", "Sarabun", sans-serif;
}

.page-preloader__logo {
    width: 140px;
    max-width: 55vw;
    height: auto;
    animation: ld-pulse 1.6s ease-in-out infinite;
}

.page-preloader__spinner {
    width: 44px;
    height: 44px;
    border-radius: 50%;
    border: 4px solid var(--ld-secondary);
    border-top-color: var(--ld-primary);
    animation: ld-spin .8s linear infinite;
}

.page-preloader__text {
    font-size: 14px;
    font-weight: 300;
    letter-spacing: .5px;
    color: var(--ld-primary);
}

/* ---------- 2) TOP PROGRESS BAR ---------- */
.page-progress {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    height: 3px;
    z-index: 100000;
    background: transparent;
    pointer-events: none;
    opacity: 0;
    transition: opacity .3s ease;
}

.page-progress.is-active {
    opacity: 1;
}

.page-progress__bar {
    height: 100%;
    width: 0;
    background: linear-gradient(90deg, var(--ld-primary), #e26ec3);
    box-shadow: 0 0 10px rgba(182, 61, 151, .7), 0 0 6px rgba(182, 61, 151, .5);
    border-radius: 0 3px 3px 0;
    transition: width .25s ease;
}

/* ---------- 3) SKELETON ---------- */
.skeleton,
.skeleton-text,
.skeleton-title,
.skeleton-img,
.skeleton-circle,
.is-skeleton-img {
    position: relative;
    background-color: #ececf1;
    background-image: linear-gradient(90deg, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, .65) 50%, rgba(255, 255, 255, 0) 100%);
    background-size: 200% 100%;
    background-repeat: no-repeat;
    background-position: -150% 0;
    animation: ld-shimmer 1.4s ease-in-out infinite;
    border-radius: 8px;
    overflow: hidden;
}

/* tint shimmer ด้วยสี brand เล็กน้อย */
.skeleton-img,
.is-skeleton-img {
    background-color: var(--ld-secondary);
}

.skeleton-text {
    height: 12px;
    margin: 8px 0;
    border-radius: 6px;
}

.skeleton-text.w-75 { width: 75%; }
.skeleton-text.w-50 { width: 50%; }
.skeleton-text.w-25 { width: 25%; }

.skeleton-title {
    height: 22px;
    width: 60%;
    margin: 6px 0 14px;
    border-radius: 6px;
}

.skeleton-img {
    width: 100%;
    aspect-ratio: 16 / 9;
    border-radius: 10px;
}

.skeleton-circle {
    width: 56px;
    height: 56px;
    border-radius: 50%;
}

/* การ์ด skeleton สำเร็จรูป (ใช้ซ้ำในหน้า news/list ได้) */
.skeleton-card {
    border: 1px solid #eee;
    border-radius: 12px;
    padding: 14px;
    background: #fff;
}

.skeleton-card .skeleton-img {
    margin-bottom: 14px;
}

/* รูปที่กำลังโหลด: ใส่ shimmer ไว้ใต้รูป แล้ว fade รูปเข้าเมื่อโหลดเสร็จ */
.is-skeleton-img {
    color: transparent !important;
}

img.is-skeleton-img {
    opacity: 0;
    transition: opacity .4s ease;
}

img.is-skeleton-img.is-loaded {
    opacity: 1;
    animation: none;
    background-image: none;
}

/* ---------- keyframes ---------- */
@keyframes ld-spin {
    to { transform: rotate(360deg); }
}

@keyframes ld-pulse {
    0%, 100% { transform: scale(1); opacity: 1; }
    50% { transform: scale(.94); opacity: .7; }
}

@keyframes ld-shimmer {
    0% { background-position: -150% 0; }
    100% { background-position: 150% 0; }
}

/* ---------- เคารพผู้ใช้ที่ปิดแอนิเมชัน ---------- */
@media (prefers-reduced-motion: reduce) {
    .page-preloader__logo,
    .page-preloader__spinner,
    .skeleton, .skeleton-text, .skeleton-title,
    .skeleton-img, .skeleton-circle, .is-skeleton-img {
        animation-duration: .01ms !important;
        animation-iteration-count: 1 !important;
    }
    .page-progress__bar { transition: none; }
}