/* style.css — ปรับแต่งเพิ่มเติมจาก Bootstrap 5 */

body {
    background: linear-gradient(135deg, #eef2f7 0%, #dfe7f0 100%);
    min-height: 100vh;
    font-family: "Segoe UI", "Sarabun", sans-serif;
}

.auth-wrapper {
    min-height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 24px;
}

.auth-card {
    width: 100%;
    max-width: 420px;
    border: none;
    border-radius: 16px;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.08);
}

.auth-card .card-body {
    padding: 2.25rem;
}

.auth-icon {
    font-size: 2.5rem;
    text-align: center;
    display: block;
    margin-bottom: .5rem;
}

.brand-title {
    text-align: center;
    font-weight: 700;
    margin-bottom: 1.5rem;
    color: #2b3a55;
}

.navbar-central {
    box-shadow: 0 2px 8px rgba(0,0,0,0.06);
}

.status-badge-ACTIVE   { background-color: #198754; }
.status-badge-INACTIVE { background-color: #6c757d; }
.status-badge-BLOCKED  { background-color: #dc3545; }

.table-actions form {
    display: inline-block;
    margin: 0 2px;
}

.footer-note {
    text-align: center;
    margin-top: 1rem;
    font-size: .85rem;
    color: #6c757d;
}
/* =====================================================
   สมัครสมาชิก - สีรุ้ง + กระพริบ
   ===================================================== */

.register-link {
    font-weight: 800;
    font-size: 1.1rem;
    text-decoration: none;

    /* สีรุ้ง */
    background: linear-gradient(
        90deg,
        #ff0000,
        #ff7a00,
        #ffee00,
        #00c853,
        #00b0ff,
        #7c4dff,
        #ff00aa,
        #ff0000
    );

    background-size: 400% auto;

    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;

    /* สีรุ้งเคลื่อน + กระพริบ */
    animation:
        rainbowText 3s linear infinite,
        blinkText 1.2s ease-in-out infinite;
}

/* สีรุ้งเคลื่อน */
@keyframes rainbowText {
    0% {
        background-position: 0% center;
    }

    100% {
        background-position: 400% center;
    }
}

/* กระพริบ */
@keyframes blinkText {
    0%, 100% {
        opacity: 1;
    }

    50% {
        opacity: 0.35;
    }
}

/* เมื่อเอาเมาส์ชี้ */
.register-link:hover {
    transform: scale(1.08);
    filter: drop-shadow(0 0 6px rgba(255, 0, 180, 0.8));
}