.loan-status-check-container{max-width:auto;margin:5px auto;padding:0px;background:#fff;border-radius:12px;box-shadow:0 8px 24px rgba(0,0,0,0.06)}
.lspv3-spinner{width:40px;height:40px;border:4px solid #eee;border-top-color:#4CAF50;border-radius:50%;margin:10px auto;animation:spin 1s linear infinite}
@keyframes spin{0%{transform:rotate(0)}100%{transform:rotate(360deg)}}
.lspv3-error{color:#a94442;background:#f2dede;padding:10px;border-radius:6px}
.lspv3-approved{background:#e8f5e9;padding:15px;border-radius:8px}
.lspv3-pending{background:#fff8e1;padding:15px;border-radius:8px}
.lspv3-table{width:100%;border-collapse:collapse;margin-top:10px}
.lspv3-table th,.lspv3-table td{border:1px solid #eee;padding:8px;text-align:left}
.loan-status-result.visible{animation:fadeInCard 0.6s ease}
.lspv3-notice{color:red; font-weight:700; margin-top:12px}
.loan-apply-container {
  font-family: 'Poppins', sans-serif;
  background: linear-gradient(135deg, #5b3dfd, #7f53ac);
  border-radius: 20px;
  padding: 25px;
  box-shadow: 0 4px 20px rgba(0,0,0,0.15);
  color: white;
  transition: all 0.4s ease;
  animation: fadeInScale 0.5s ease;
}
.lspv3-back-btn {
    background: linear-gradient(90deg, #6A00F4, #0078FF);
    color: #fff;
    border: none;
    padding: 10px 20px;
    border-radius: 8px;
    margin-top: 20px;
    cursor: pointer;
    transition: all 0.3s ease;
}
.lspv3-back-btn:hover {
    background: linear-gradient(90deg, #0078FF, #6A00F4);
    transform: scale(1.05);
}

@keyframes fadeInScale {
  from { opacity: 0; transform: scale(0.95); }
  to { opacity: 1; transform: scale(1); }
}


@keyframes fadeInCard{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:none}}

// Modern Responsive + Animated Styles (with Status Check UI)
// Modern Responsive + Animated Styles
add_action('wp_enqueue_scripts', function() {
    $custom_css = "
    /* === Global Animations === */
    @keyframes fadeInUp {
        from { opacity: 0; transform: translateY(20px); }
        to { opacity: 1; transform: translateY(0); }
    }
    @keyframes pop {
        0% { transform: scale(0.9); opacity: 0; }
        100% { transform: scale(1); opacity: 1; }
    }

    /* === Loan Apply Form === */
    form[action*='admin-post.php'] {
        max-width: 500px;
        margin: 30px auto;
        background: #ffffff;
        border-radius: 16px;
        padding: 25px 20px;
        box-shadow: 0 8px 20px rgba(0,0,0,0.08);
        display: flex;
        flex-direction: column;
        gap: 18px;
        animation: fadeInUp 0.6s ease forwards;
    }
    form[action*='admin-post.php'] label {
        font-weight: 600;
        color: #333;
        display: block;
        margin-bottom: 6px;
    }
    form[action*='admin-post.php'] input[type='text'],
    form[action*='admin-post.php'] input[type='number'],
    form[action*='admin-post.php'] input[type='file'] {
        width: 100%;
        padding: 12px 14px;
        border: 1px solid #ddd;
        border-radius: 10px;
        font-size: 15px;
        transition: all 0.3s ease;
    }
    form[action*='admin-post.php'] input:focus {
        border-color: #4CAF50;
        box-shadow: 0 0 8px rgba(76,175,80,0.3);
        transform: scale(1.02);
        outline: none;
    }

    form[action*='admin-post.php'] button {
        background: linear-gradient(135deg, #4CAF50, #66bb6a);
        color: white;
        border: none;
        padding: 14px;
        border-radius: 10px;
        font-size: 16px;
        font-weight: 600;
        cursor: pointer;
        transition: all 0.3s ease;
        box-shadow: 0 4px 10px rgba(76,175,80,0.3);
    }
    form[action*='admin-post.php'] button:hover {
        background: linear-gradient(135deg, #43a047, #5cb85c);
        transform: translateY(-2px);
        box-shadow: 0 6px 12px rgba(76,175,80,0.4);
    }
    form[action*='admin-post.php'] button:active {
        transform: translateY(0);
        box-shadow: 0 3px 8px rgba(76,175,80,0.3);
    }

    /* === Success + Status === */
    .loan-success {
        background: #e8f5e9;
        border: 1px solid #c8e6c9;
        border-radius: 12px;
        padding: 18px;
        max-width: 520px;
        margin: 25px auto;
        text-align: center;
        font-weight: 600;
        color: #2e7d32;
        animation: fadeInUp 0.7s ease forwards;
    }
    .loan-approved {
        text-align: center;
        margin: 40px auto;
        max-width: 600px;
        background: #ffffff;
        border-radius: 14px;
        padding: 30px 20px;
        box-shadow: 0 8px 18px rgba(0,0,0,0.08);
        animation: pop 0.7s ease forwards;
    }
    .loan-approved img {
        max-width: 220px;
        margin-bottom: 18px;
        animation: fadeInUp 0.8s ease forwards;
    }
    .loan-approved h3 {
        color: #2e7d32;
        margin-bottom: 12px;
        font-size: 1.6em;
        font-weight: 700;
    }
    .loan-status {
        background: #f9f9f9;
        border-radius: 12px;
        padding: 18px;
        margin: 25px auto;
        max-width: 520px;
        border: 1px solid #eee;
        box-shadow: 0 4px 10px rgba(0,0,0,0.04);
        animation: fadeInUp 0.7s ease forwards;
    }
/* === Dropdown Styling (Loan Type) === */
form[action*='admin-post.php'] select {
    width: 100%;
    padding: 12px 14px;
    border: 1px solid #ddd;
    border-radius: 10px;
    font-size: 15px;
    transition: all 0.3s ease;
    background: #fff;
    appearance: none;
    background-image: linear-gradient(45deg, transparent 50%, #4CAF50 50%),
                      linear-gradient(135deg, #4CAF50 50%, transparent 50%);
    background-position: calc(100% - 20px) calc(1em + 2px),
                         calc(100% - 15px) calc(1em + 2px);
    background-size: 5px 5px, 5px 5px;
    background-repeat: no-repeat;
}
form[action*='admin-post.php'] select:focus {
    border-color: #4CAF50;
    box-shadow: 0 0 8px rgba(76,175,80,0.3);
    transform: scale(1.02);
    outline: none;
}

    /* === Admin Table === */
    .wp-admin .wrap table.widefat {
        border-radius: 12px;
        overflow: hidden;
        border: none;
        box-shadow: 0 5px 14px rgba(0,0,0,0.05);
        animation: fadeInUp 0.5s ease forwards;
    }
    .wp-admin .wrap table.widefat th {
        background: linear-gradient(135deg, #4CAF50, #66bb6a);
        color: #fff;
        text-align: left;
        padding: 12px;
        font-weight: 600;
    }
    .wp-admin .wrap table.widefat td {
        padding: 12px;
        vertical-align: middle;
        border-top: 1px solid #eee;
        transition: background 0.3s ease;
    }
    .wp-admin .wrap table.widefat tr:hover td {
        background: #f1f8e9;
    }
    .wp-admin .wrap a {
        color: #0073aa;
        text-decoration: none;
        transition: color 0.2s ease;
    }
    .wp-admin .wrap a:hover {
        color: #005f8d;
        text-decoration: underline;
    }

    /* === Responsive Layout === */
    @media (max-width: 600px) {
        form[action*='admin-post.php'] {
            padding: 15px;
        }
        form[action*='admin-post.php'] button {
            font-size: 15px;
        }
        .loan-approved {
            padding: 18px;
        }
        .wp-admin .wrap table.widefat {
            font-size: 13px;
        }
        .loan-status, .loan-success {
            padding: 15px;
        }
    }
	
	 /* ====== Animations ====== */
    @keyframes fadeInUp {
        from { opacity: 0; transform: translateY(20px); }
        to { opacity: 1; transform: translateY(0); }
    }
    @keyframes pulse {
        0% { transform: scale(1); box-shadow: 0 0 0 0 rgba(76,175,80, 0.4); }
        70% { transform: scale(1.05); box-shadow: 0 0 0 10px rgba(76,175,80, 0); }
        100% { transform: scale(1); box-shadow: 0 0 0 0 rgba(76,175,80, 0); }
    }

    /* ====== Status Page Container ====== */
    .loan-status-check-container {
        max-width: 600px;
        margin: 40px auto;
        padding: 20px;
        border-radius: 16px;
        background: #ffffff;
        box-shadow: 0 8px 24px rgba(0,0,0,0.08);
        animation: fadeInUp 0.6s ease-out;
    }

    .loan-status-check-container h2 {
        text-align: center;
        color: #2e7d32;
        margin-bottom: 15px;
        font-size: 1.6em;
        font-weight: 700;
    }

    /* ====== Status Form ====== */
    .loan-status-check-container form {
        display: flex;
        flex-direction: column;
        gap: 15px;
        animation: fadeInUp 0.8s ease;
    }

    .loan-status-check-container input[name='search_value'] {
        padding: 12px 14px;
        border: 1px solid #ccc;
        border-radius: 10px;
        font-size: 16px;
        transition: all 0.3s ease;
    }
    .loan-status-check-container input[name='search_value']:focus {
        border-color: #4CAF50;
        box-shadow: 0 0 8px rgba(76,175,80,0.3);
        transform: scale(1.02);
        outline: none;
    }

    .loan-status-check-container button[type='submit'] {
        background: linear-gradient(135deg, #4CAF50, #66bb6a);
        color: white;
        border: none;
        border-radius: 10px;
        padding: 12px;
        font-size: 16px;
        font-weight: 600;
        cursor: pointer;
        transition: all 0.3s ease;
        box-shadow: 0 4px 10px rgba(76,175,80,0.3);
    }
    .loan-status-check-container button[type='submit']:hover {
        background: linear-gradient(135deg, #43a047, #5cb85c);
        transform: translateY(-2px);
    }

    /* ====== Result Card ====== */
    .loan-status-result {
        background: #fff;
        border-radius: 16px;
        padding: 20px;
        margin-top: 25px;
        box-shadow: 0 8px 20px rgba(0,0,0,0.05);
        animation: fadeInUp 0.7s ease-out;
    }

    .loan-status-result h3 {
        color: #2e7d32;
        margin-bottom: 12px;
        font-weight: 700;
        text-align: center;
    }

    .loan-status-result p {
        margin: 6px 0;
        font-size: 15px;
        color: #444;
        text-align: center;
    }
	
	/* ====== Status Badges ====== */
.loan-status-badge {
    display: inline-block;
    padding: 8px 16px;
    border-radius: 30px;
    font-weight: 600;
    color: #fff;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    font-size: 0.9rem;
    opacity: 0;
    transform: scale(0.9);
    transition: all 0.4s ease;
}

/* Colors by status */
.loan-status-badge.approved {
    background: linear-gradient(135deg, #28a745, #6ad47c);
    box-shadow: 0 0 12px rgba(40,167,69,0.3);
}
.loan-status-badge.pending {
    background: linear-gradient(135deg, #ffc107, #ffe680);
    box-shadow: 0 0 12px rgba(255,193,7,0.3);
    color: #333;
}
.loan-status-badge.rejected {
    background: linear-gradient(135deg, #dc3545, #ff7b7b);
    box-shadow: 0 0 12px rgba(220,53,69,0.3);
}

/* Animation when visible */
@keyframes pulseBadge {
    0% { transform: scale(0.9); opacity: 0; }
    40% { transform: scale(1.1); opacity: 1; }
    100% { transform: scale(1); opacity: 1; }
}

.loan-status-badge.visible {
    animation: pulseBadge 0.8s ease forwards;
}
/* ====== Shine (Shimmer) Effect for Approved Badge ====== */
.loan-status-badge.approved {
    position: relative;
    overflow: hidden;
}

.loan-status-badge.approved::after {
    content: '';
    position: absolute;
    top: 0;
    left: -75%;
    width: 50%;
    height: 100%;
    background: linear-gradient(120deg, rgba(255,255,255,0.3) 0%, rgba(255,255,255,0.8) 50%, rgba(255,255,255,0.3) 100%);
    transform: skewX(-25deg);
    opacity: 0;
}

/* Animate the shimmer only once */
@keyframes shineSweep {
    0% { left: -75%; opacity: 0; }
    20% { opacity: 1; }
    100% { left: 125%; opacity: 0; }
}

.loan-status-badge.approved.shine::after {
    animation: shineSweep 1.3s ease-in-out forwards;
}


    /* ====== Status Badges ====== */
    .status-badge {
        display: inline-block;
        padding: 6px 14px;
        border-radius: 50px;
        font-size: 14px;
        font-weight: 600;
        text-transform: uppercase;
        margin-top: 10px;
        animation: pulse 2s infinite;
    }
    .status-approved {
        background: #c8e6c9;
        color: #2e7d32;
        animation: pulse 2.5s infinite;
    }
    .status-pending {
        background: #fff3cd;
        color: #856404;
        animation: none;
    }
    .status-rejected {
        background: #f8d7da;
        color: #842029;
        animation: none;
    }

    /* ====== Congrats Animation ====== */
    .loan-approved img {
        display: block;
        margin: 20px auto;
        max-width: 250px;
        border-radius: 12px;
        animation: fadeInUp 0.8s ease-out;
    }

    /* ====== Responsive ====== */
    @media (max-width: 600px) {
        .loan-status-check-container {
            margin: 20px;
            padding: 15px;
        }
        .loan-status-result {
            padding: 15px;
        }
        .loan-status-result p {
            font-size: 14px;
        }
        .loan-status-check-container input,
        .loan-status-check-container button {
            font-size: 15px;
        }
    }
	
	/* ====== Spinner Loader ====== */
.loan-status-spinner {
    text-align: center;
    margin-top: 20px;
    animation: fadeInUp 0.4s ease;
}
.loan-status-spinner .spinner {
    border: 4px solid #e0e0e0;
    border-top: 4px solid #4CAF50;
    border-radius: 50%;
    width: 40px;
    height: 40px;
    margin: 0 auto 10px;
    animation: spin 1s linear infinite;
}
@keyframes spin {
    0% { transform: rotate(0deg); }
    100% { transform: rotate(360deg); }
}
.loan-status-spinner p {
    font-size: 15px;
    color: #555;
    font-weight: 500;
}

/* ====== Smooth Fade-in Animation for Results ====== */
@keyframes fadeInCard {
    0% { opacity: 0; transform: translateY(30px); }
    100% { opacity: 1; transform: translateY(0); }
}

.loan-status-result {
    opacity: 0;
    transform: translateY(20px);
    transition: all 0.6s ease-out;
}

.loan-status-result.visible {
    opacity: 1;
    transform: translateY(0);
    animation: fadeInCard 0.7s ease-out;
}

/* ====== Confetti Animation ====== */
.confetti-piece {
  position: fixed;
  top: 0;
  width: 10px;
  height: 14px;
  opacity: 0.8;
  z-index: 9999;
  animation: fallConfetti 3s linear forwards;
}

@keyframes fallConfetti {
  0% { transform: translateY(0) rotate(0deg); opacity: 1; }
  100% { transform: translateY(100vh) rotate(720deg); opacity: 0; }
}

/* ====== Bounce-in Animation for Congrats GIF ====== */
@keyframes bounceIn {
  0%   { transform: scale(0.3); opacity: 0; }
  50%  { transform: scale(1.05); opacity: 1; }
  70%  { transform: scale(0.9); }
  100% { transform: scale(1); opacity: 1; }
}

.loan-approved img {
  display: block;
  margin: 20px auto;
  max-width: 320px;
  border-radius: 10px;
  box-shadow: 0 4px 15px rgba(0,0,0,0.15);
  transform: scale(0.9);
  opacity: 0;
  transition: all 0.5s ease;
}

.loan-approved img.bounce-visible {
  animation: bounceIn 1s cubic-bezier(.68,-0.55,.27,1.55) forwards;
}

.form-group {
  margin-bottom: 15px;
  animation: fadeInUp 0.6s ease;
}
.form-group label {
  font-weight: 600;
  color: #333;
}
.form-group input, 
.form-group select {
  width: 100%;
  padding: 10px;
  border-radius: 10px;
  border: 1px solid #ddd;
  transition: all 0.3s ease;
}
.form-group input:focus, 
.form-group select:focus {
  border-color: #4CAF50;
  box-shadow: 0 0 6px rgba(76,175,80,0.3);
  transform: scale(1.02);
}

    ";
    wp_add_inline_style('wp-block-library', $custom_css);
});

/* Loan Apply & Status Pro Styles */
.loan-status-check-container {
  background: #fff;
  padding: 20px;
  border-radius: 16px;
  max-width: 420px;
  margin: auto;
  box-shadow: 0 8px 20px rgba(0,0,0,0.05);
  animation: fadeInUp 0.6s ease;
}
.loan-status-check-container input {
  width: 100%;
  padding: 10px;
  border: 1px solid #ddd;
  border-radius: 8px;
  margin-bottom: 10px;
}
.loan-status-check-container button {
  background: #4CAF50;
  color: #fff;
  border: none;
  border-radius: 6px;
  padding: 10px 15px;
  cursor: pointer;
}
.loan-status-check-container button:hover {
  background: #45a049;
}
.lspv3-table {
  width: 100%;
  border-collapse: collapse;
  margin-top: 10px;
}
.lspv3-table th, .lspv3-table td {
  border: 1px solid #ddd;
  padding: 8px;
  text-align: left;
}
.lspv3-approved h3 {
  color: #4CAF50;
}
.lspv3-error {
  color: red;
  font-weight: bold;
  margin-top: 10px;
}