/* Container & Identity Bar */
.fnf-wrap { padding: 10px; max-width: 800px; margin: auto; }
.fnf-id-bar { 
    background: #0073aa; color: #fff; padding: 15px; 
    display: flex; justify-content: space-between; 
    border-radius: 8px; margin-bottom: 20px; font-weight: bold;
}

/* Tables */
.fnf-table { width: 100%; border-collapse: collapse; background: #fff; margin-top: 15px; box-shadow: 0 2px 5px rgba(0,0,0,0.1); }
.fnf-table th, .fnf-table td { padding: 12px; border-bottom: 1px solid #eee; text-align: left; }
.fnf-btn { background: #28a745; color: white; border: none; padding: 10px 15px; border-radius: 4px; cursor: pointer; font-weight: bold; }
.status-issued { color: #f39c12; font-weight: bold; }

/* Grid & Cards */
.fnf-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); gap: 15px; }
.fnf-card { background: #fff; border: 2px solid #0073aa; padding: 15px; border-radius: 10px; text-align: center; }

/* Batch Hub */
.fnf-hub-wrap { background: #f9f9f9; padding: 25px; border-radius: 12px; text-align: center; border: 1px solid #ddd; }
.fnf-progress-bg { background: #e0e0e0; height: 22px; border-radius: 11px; margin: 20px 0; overflow: hidden; }
.fnf-progress-fill { background: #ffc107; height: 100%; transition: width 0.6s ease-in-out; }

/* Referral & WhatsApp */
.fnf-ref-box { background: #e3f2fd; border: 1px dashed #2196f3; padding: 15px; margin-bottom: 20px; border-radius: 8px; text-align: center; }
.wa-btn { background: #25d366; color: white; border: none; padding: 12px; margin-top: 10px; border-radius: 6px; width: 100%; font-weight: bold; cursor: pointer; }
.fnf-vendor-search { position: relative; margin-bottom: 15px; }
#fnf_search_results { background: white; border: 1px solid #ccc; position: absolute; width: 100%; z-index: 99; }