/* ============================================================
   Ecobank Youth Ambassador – Public / Frontend Styles
   ============================================================ */

:root {
    --eyalb-green:   #006B3F;
    --eyalb-green-d: #004d2d;
    --eyalb-green-l: #e6f4ed;
    --eyalb-yellow:  #FCD116;
    --eyalb-red:     #CE1126;
    --eyalb-white:   #ffffff;
    --eyalb-gray-1:  #f7f8fa;
    --eyalb-gray-2:  #eaedf0;
    --eyalb-gray-3:  #c5cdd6;
    --eyalb-gray-4:  #7a8898;
    --eyalb-text:    #1a2333;
    --eyalb-radius:  12px;
    --eyalb-shadow:  0 2px 16px rgba(0,0,0,.09);
}

.eyalb-public-wrap { max-width:960px; margin:0 auto; padding:24px 16px; font-family:-apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif; color:var(--eyalb-text); }

/* ── Submission Form ────────────────────────────────────────── */
.eyalb-form-card { background:var(--eyalb-white); border-radius:var(--eyalb-radius); box-shadow:var(--eyalb-shadow); overflow:hidden; max-width:600px; margin:0 auto; }
.eyalb-form-header { background:linear-gradient(135deg,var(--eyalb-green) 0%,var(--eyalb-green-d) 100%); padding:32px 28px; text-align:center; color:var(--eyalb-white); }
.eyalb-form-logo { font-size:44px; margin-bottom:12px; }
.eyalb-form-header h2 { font-size:22px; font-weight:800; margin:0 0 6px; color:var(--eyalb-white); }
.eyalb-form-header p  { margin:0; opacity:.85; font-size:14px; }

.eyalb-ambassador-banner { background:var(--eyalb-green-l); border-bottom:1px solid #c8e6d7; padding:14px 28px; display:flex; flex-wrap:wrap; gap:20px; align-items:center; }
.eyalb-amb-info { display:flex; flex-direction:column; gap:2px; }
.eyalb-amb-label { font-size:10px; font-weight:700; text-transform:uppercase; letter-spacing:.05em; color:var(--eyalb-gray-4); }
.eyalb-amb-info strong { font-size:14px; color:var(--eyalb-green); font-weight:700; }
.eyalb-amb-info code { font-size:13px; background:var(--eyalb-green); color:#fff; padding:2px 8px; border-radius:4px; font-weight:700; }

.eyalb-form { padding:28px; }
.eyalb-field-group { margin-bottom:20px; }
.eyalb-field-group label { display:block; font-size:12px; font-weight:700; text-transform:uppercase; letter-spacing:.05em; color:var(--eyalb-gray-4); margin-bottom:7px; }
.eyalb-required { color:var(--eyalb-red); }
.eyalb-optional { color:var(--eyalb-gray-4); font-weight:400; text-transform:none; }

.eyalb-pub-input {
    width:100%; padding:12px 14px; border:2px solid var(--eyalb-gray-2);
    border-radius:8px; font-size:14px; color:var(--eyalb-text);
    background:var(--eyalb-gray-1); transition:all .2s; box-sizing:border-box;
    font-family:inherit;
}
.eyalb-pub-input:focus { border-color:var(--eyalb-green); background:var(--eyalb-white); outline:none; box-shadow:0 0 0 4px rgba(0,107,63,.08); }
.eyalb-pub-input[readonly] { background:var(--eyalb-gray-2); cursor:default; }
.eyalb-textarea { resize:vertical; min-height:88px; }

.eyalb-field-row { display:grid; grid-template-columns:1fr 1fr; gap:16px; }
@media(max-width:500px){ .eyalb-field-row { grid-template-columns:1fr; } }

.eyalb-input-with-btn { display:flex; gap:8px; }
.eyalb-input-with-btn .eyalb-pub-input { flex:1; }
.eyalb-verify-btn { padding:0 18px; background:var(--eyalb-green); color:#fff; border:none; border-radius:8px; font-size:13px; font-weight:700; cursor:pointer; transition:background .2s; white-space:nowrap; }
.eyalb-verify-btn:hover { background:var(--eyalb-green-d); }

.eyalb-code-result { margin-top:8px; font-size:13px; font-weight:600; }
.eyalb-code-result.valid   { color:var(--eyalb-green); }
.eyalb-code-result.invalid { color:var(--eyalb-red); }

.eyalb-pub-btn {
    width:100%; padding:15px; background:var(--eyalb-green); color:#fff; border:none;
    border-radius:10px; font-size:16px; font-weight:700; cursor:pointer;
    transition:background .2s, transform .1s; margin-top:8px; display:flex; align-items:center; justify-content:center; gap:8px;
}
.eyalb-pub-btn:hover  { background:var(--eyalb-green-d); }
.eyalb-pub-btn:active { transform:scale(.98); }
.eyalb-pub-btn:disabled { opacity:.6; cursor:not-allowed; }

.eyalb-form-msg { margin:0 28px 16px; padding:14px 16px; border-radius:8px; font-size:14px; font-weight:600; }
.eyalb-form-msg.success { background:var(--eyalb-green-l); color:var(--eyalb-green); border:1px solid #9dcfb4; }
.eyalb-form-msg.error   { background:#fdecea; color:var(--eyalb-red); border:1px solid #f5a8a8; }
.eyalb-notice { background:var(--eyalb-gray-1); border:1px solid var(--eyalb-gray-2); border-radius:10px; padding:20px; text-align:center; font-size:14px; color:var(--eyalb-gray-4); }

/* ── Leaderboard ─────────────────────────────────────────── */
.eyalb-lb-header { text-align:center; margin-bottom:32px; }
.eyalb-lb-header h2 { font-size:28px; font-weight:800; color:var(--eyalb-green); margin:0 0 8px; }
.eyalb-lb-header p  { color:var(--eyalb-gray-4); font-size:15px; margin:0; }

/* Podium */
.eyalb-podium { display:flex; align-items:flex-end; justify-content:center; gap:8px; margin-bottom:40px; }
.eyalb-podium-slot { display:flex; flex-direction:column; align-items:center; gap:4px; flex:1; max-width:200px; }
.eyalb-podium-crown { font-size:24px; }
.eyalb-podium-medal { font-size:32px; }
.eyalb-podium-name  { font-weight:800; font-size:14px; text-align:center; color:var(--eyalb-text); }
.eyalb-podium-school { font-size:11px; color:var(--eyalb-gray-4); text-align:center; }
.eyalb-podium-stat  { font-size:12px; color:var(--eyalb-green); font-weight:700; }
.eyalb-podium-block { width:100%; border-radius:8px 8px 0 0; display:flex; align-items:center; justify-content:center; font-size:20px; font-weight:900; color:#fff; }
.eyalb-podium-block-1 { background:linear-gradient(180deg,#ffd700,#f4a700); height:80px; }
.eyalb-podium-block-2 { background:linear-gradient(180deg,#c0c0c0,#9e9e9e); height:56px; }
.eyalb-podium-block-3 { background:linear-gradient(180deg,#cd7f32,#a5622a); height:44px; }

/* Public table */
.eyalb-pub-card { background:var(--eyalb-white); border-radius:var(--eyalb-radius); box-shadow:var(--eyalb-shadow); overflow:hidden; margin-bottom:24px; }
.eyalb-pub-table-wrap { overflow-x:auto; }
.eyalb-pub-table { width:100%; border-collapse:collapse; font-size:14px; }
.eyalb-pub-table thead th { background:var(--eyalb-green); color:#fff; padding:12px 16px; text-align:left; font-weight:700; font-size:12px; text-transform:uppercase; letter-spacing:.04em; white-space:nowrap; }
.eyalb-pub-table tbody td { padding:12px 16px; border-bottom:1px solid var(--eyalb-gray-2); vertical-align:middle; }
.eyalb-pub-table tbody tr:last-child td { border-bottom:none; }
.eyalb-pub-table tbody tr:hover { background:var(--eyalb-gray-1); }

.eyalb-top-row { font-weight:600; }
.eyalb-top-1 td { background:linear-gradient(90deg,#fffde7,transparent); }
.eyalb-top-2 td { background:linear-gradient(90deg,#fafafa,transparent); }
.eyalb-top-3 td { background:linear-gradient(90deg,#fff3e0,transparent); }

.eyalb-rank-cell { text-align:center; width:56px; }
.eyalb-medal { font-size:22px; }
.eyalb-rank-num { display:inline-flex; align-items:center; justify-content:center; width:28px; height:28px; background:var(--eyalb-gray-2); border-radius:50%; font-size:12px; font-weight:800; }
.eyalb-amb-name-cell { display:flex; align-items:center; gap:10px; }
.eyalb-pub-avatar { width:36px; height:36px; border-radius:50%; background:var(--eyalb-green); color:#fff; display:flex; align-items:center; justify-content:center; font-weight:800; font-size:13px; flex-shrink:0; }
.eyalb-score-pill { background:var(--eyalb-green-l); color:var(--eyalb-green); padding:3px 10px; border-radius:20px; font-size:12px; font-weight:700; }

/* ── Ambassador Profile ──────────────────────────────────── */
.eyalb-profile-card { background:linear-gradient(135deg,var(--eyalb-green) 0%,var(--eyalb-green-d) 100%); border-radius:var(--eyalb-radius); padding:28px; display:flex; align-items:center; gap:20px; flex-wrap:wrap; margin-bottom:24px; color:#fff; }
.eyalb-profile-avatar { width:72px; height:72px; border-radius:50%; background:rgba(255,255,255,.25); color:#fff; display:flex; align-items:center; justify-content:center; font-size:26px; font-weight:900; flex-shrink:0; border:3px solid rgba(255,255,255,.5); }
.eyalb-profile-info { flex:1; min-width:0; }
.eyalb-profile-info h2 { font-size:22px; font-weight:800; margin:0 0 4px; color:#fff; }
.eyalb-profile-info p  { margin:0 0 8px; opacity:.85; font-size:14px; }
.eyalb-profile-info code { background:rgba(255,255,255,.2); color:#fff; padding:3px 10px; border-radius:5px; font-size:13px; font-weight:700; }
.eyalb-profile-stats { display:flex; gap:20px; flex-wrap:wrap; margin-left:auto; }
.eyalb-profile-stat { display:flex; flex-direction:column; align-items:center; gap:2px; text-align:center; }
.eyalb-profile-stat-val { font-size:22px; font-weight:900; color:#fff; }
.eyalb-profile-stat-lbl { font-size:10px; opacity:.8; text-transform:uppercase; letter-spacing:.04em; }

/* Badges */
.eyalb-badges-card { padding:20px; }
.eyalb-badges-card h3 { font-size:15px; font-weight:700; margin:0 0 14px; }
.eyalb-badges-grid { display:flex; flex-wrap:wrap; gap:12px; }
.eyalb-badge-item { display:flex; flex-direction:column; align-items:center; gap:6px; }
.eyalb-badge-icon { width:48px; height:48px; border-radius:50%; display:flex; align-items:center; justify-content:center; font-size:22px; }
.eyalb-badge-item span { font-size:11px; font-weight:600; text-align:center; max-width:60px; color:var(--eyalb-gray-4); }

/* Status pills */
.eyalb-pub-status { display:inline-block; padding:4px 10px; border-radius:20px; font-size:11px; font-weight:700; }
.eyalb-pub-status-pending  { background:#fff8e1; color:#b7890a; }
.eyalb-pub-status-approved { background:var(--eyalb-green-l); color:var(--eyalb-green); }
.eyalb-pub-status-rejected { background:#fdecea; color:var(--eyalb-red); }

/* Empty state */
.eyalb-empty-state { text-align:center; padding:40px 20px; color:var(--eyalb-gray-4); }
.eyalb-empty-icon  { font-size:48px; margin-bottom:12px; }
.eyalb-empty-state p { font-size:14px; }

/* ── School Board (Public) ──────────────────────────────── */
.eyalb-schools-pub-grid { display:grid; gap:16px; }
.eyalb-school-pub-card { background:var(--eyalb-white); border-radius:var(--eyalb-radius); box-shadow:var(--eyalb-shadow); padding:20px; display:flex; align-items:center; gap:16px; border-left:5px solid var(--eyalb-gray-2); transition:box-shadow .2s; }
.eyalb-school-pub-card:hover { box-shadow:var(--eyalb-shadow); }
.eyalb-school-top:nth-child(1) { border-left-color:#ffd700; }
.eyalb-school-top:nth-child(2) { border-left-color:#c0c0c0; }
.eyalb-school-top:nth-child(3) { border-left-color:#cd7f32; }
.eyalb-school-pub-rank { font-size:28px; width:48px; text-align:center; flex-shrink:0; }
.eyalb-school-pub-rank span { display:inline-flex; align-items:center; justify-content:center; width:36px; height:36px; background:var(--eyalb-gray-2); border-radius:50%; font-size:15px; font-weight:800; }
.eyalb-school-pub-body { flex:1; min-width:0; }
.eyalb-school-pub-body h3 { font-size:16px; font-weight:800; margin:0 0 10px; }
.eyalb-school-pub-stats { display:flex; flex-wrap:wrap; gap:16px; margin-bottom:10px; }
.eyalb-school-pub-stat { display:flex; flex-direction:column; gap:2px; }
.eyalb-stat-num { font-size:18px; font-weight:800; color:var(--eyalb-green); }
.eyalb-stat-lbl { font-size:11px; color:var(--eyalb-gray-4); text-transform:uppercase; letter-spacing:.04em; font-weight:600; }
.eyalb-school-pub-bar { height:6px; background:var(--eyalb-gray-2); border-radius:3px; overflow:hidden; }
.eyalb-school-pub-fill { height:100%; background:linear-gradient(90deg,var(--eyalb-green),var(--eyalb-yellow)); border-radius:3px; transition:width .8s ease; }

/* Responsive */
@media(max-width:600px){
    .eyalb-profile-card { flex-direction:column; text-align:center; }
    .eyalb-profile-stats { justify-content:center; margin-left:0; }
    .eyalb-podium-name  { font-size:12px; }
    .eyalb-podium-stat  { font-size:11px; }
}