/* Status Portal — frontend styles (sp- prefixed, theme-safe) */
.sp-wrap { max-width: 680px; margin: 0 auto; }

.sp-form { display: flex; gap: 10px; margin-bottom: 26px; }
.sp-form input[type="text"] {
    flex: 1; padding: 12px 16px; font-size: 1rem;
    border: 1px solid #c9d4e4; border-radius: 9px; font-family: inherit;
}
.sp-form input[type="text"]:focus { outline: none; border-color: #0c4076; box-shadow: 0 0 0 3px rgba(12,64,118,.12); }
.sp-form button {
    padding: 12px 26px; font-size: 1rem; font-weight: 700; color: #fff;
    background: #0c4076; border: none; border-radius: 9px; cursor: pointer; font-family: inherit;
}
.sp-form button:hover { background: #082c54; }

.sp-result { border: 1px solid #e3e9f2; border-radius: 14px; overflow: hidden; box-shadow: 0 10px 30px rgba(8,44,84,.10); background: #fff; color: #1a2332; }
.sp-result-head { background: #0c4076; color: #fff; padding: 20px 26px; }
.sp-result-head h3 { margin: 0 0 4px; color: #fff; font-size: 1.2rem; }
.sp-result-head span { color: #cdd9ec; font-size: .9rem; }
.sp-result-body { padding: 6px 26px 22px; }
.sp-row { display: flex; justify-content: space-between; gap: 14px; padding: 12px 0; border-bottom: 1px solid #eef2f7; font-size: .96rem; }
.sp-row:last-child { border-bottom: none; }
.sp-row > span:first-child { color: #5b6b82; }
.sp-row strong { text-align: right; }

.sp-badge { display: inline-block; padding: 4px 14px; border-radius: 999px; font-size: .82rem; font-weight: 700; white-space: nowrap; }
.sp-green  { background: #e6f4ec; color: #1e7e46; }
.sp-red    { background: #fbe7e8; color: #c6363c; }
.sp-amber  { background: #fdf3df; color: #96690d; }
.sp-blue   { background: #e8f0fa; color: #0c4076; }
.sp-purple { background: #f0e9fb; color: #6a3fb5; }

.sp-btn { display: inline-block; padding: 8px 20px; background: #0c4076; color: #fff !important; border-radius: 8px; font-weight: 700; font-size: .9rem; text-decoration: none !important; }
.sp-btn:hover { background: #082c54; }

.sp-notfound { border: 1px solid #f3c1c4; background: #fdf0f1; border-radius: 14px; padding: 26px; }
.sp-notfound h3 { margin: 0 0 8px; color: #8f1d22; }
.sp-notfound p { margin: 0; color: #5b6b82; }

.sp-note { text-align: center; color: #5b6b82; font-size: .88rem; margin-top: 16px; }

@media (max-width: 600px) {
    .sp-form { flex-direction: column; }
    .sp-row { flex-direction: column; gap: 2px; }
    .sp-row strong { text-align: left; }
}

/* ---- portal home page v2 (reference-style, sph- prefixed) ---- */
.sph { background: #fff; }
.sph-hero { position: relative; background: #14253c url('img/hero.jpg') center/cover no-repeat; color: #fff; padding: 96px 0 150px; }
.sph-hero::before { content: ""; position: absolute; inset: 0; background: linear-gradient(90deg, rgba(14,26,44,.78) 0%, rgba(14,26,44,.38) 55%, rgba(14,26,44,.12) 100%); }
.sph-hero-inner { position: relative; max-width: 1240px; margin: 0 auto; padding: 0 24px; text-align: center; }
.sph-hero h1 { color: #fff; font-size: 3.1rem; font-weight: 800; margin: 0 0 18px; letter-spacing: -.01em; }
.sph-lead { max-width: 760px; font-size: 1.12rem; color: #eef3fa; margin: 0 auto; }
.sph-check { max-width: 620px; margin: 30px auto 0; }
.sph-check .sp-form { margin-bottom: 0; background: rgba(255,255,255,.16); padding: 10px; border-radius: 12px; }
.sph-check .sp-form input[type="text"] { border: none; }
.sph-check .sp-form button { background: #4a90d9; }
.sph-check .sp-form button:hover { background: #3576b8; }
.sph-result { max-width: 760px; margin: 26px auto 0; text-align: left; }
.sph-hero .sp-note { color: #cdd9ec; text-align: center; }

.sph-card { position: relative; max-width: 1240px; margin: -80px auto 0; background: #fff; border-radius: 10px; box-shadow: 0 20px 55px rgba(14,26,44,.14); padding: 60px 70px 60px 84px; }
.sph-card::before { content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 16px; background: #4a90d9; border-radius: 10px 0 0 10px; }
.sph-sec-title { font-size: 2.05rem; color: #1b2f4a; font-weight: 800; margin: 0 0 14px; }
.sph-step { display: grid; grid-template-columns: 1fr 1fr; gap: 56px; align-items: center; padding: 38px 0; border-bottom: 1px solid #e3e9f2; }
.sph-step:last-of-type { border-bottom: none; }
.sph-step-text h3 { color: #1b2f4a; font-size: 1.4rem; margin: 0 0 12px; font-weight: 700; }
.sph-step-text p { color: #5a6b82; font-size: 1.02rem; margin: 0; }
.sph-step-img img { width: 100%; height: auto; border-radius: 6px; display: block; }
.sph-cta-row { margin-top: 26px; }
.sph-btn-big { display: inline-block; background: #4a90d9; color: #fff !important; font-weight: 700; font-size: 1.05rem; padding: 17px 46px; border-radius: 9px; text-decoration: none !important; }
.sph-btn-big:hover { background: #3576b8; color: #fff !important; text-decoration: none !important; }

.sph-services { background: #eef3f9; padding: 80px 24px 100px; margin-top: 80px; }
.sph-svc-card { max-width: 880px; margin: 0 auto; background: #fff; border-radius: 14px; box-shadow: 0 16px 44px rgba(14,26,44,.10); padding: 60px 56px; text-align: center; }
.sph-svc-card h2 { color: #1b2f4a; font-size: 1.9rem; font-weight: 800; margin: 0 0 32px; }
.sph-svc-btn { display: block; max-width: 600px; margin: 0 auto 18px; background: #4a90d9; color: #fff !important; font-weight: 700; font-size: 1.12rem; padding: 21px 20px; border-radius: 10px; text-decoration: none !important; }
.sph-svc-btn:last-child { margin-bottom: 0; }
.sph-svc-btn:hover { background: #3576b8; color: #fff !important; text-decoration: none !important; }

@media (max-width: 900px) {
    .sph-hero { padding: 70px 0 130px; }
    .sph-hero h1 { font-size: 2.2rem; }
    .sph-card { margin: -60px 16px 0; padding: 44px 30px 44px 42px; }
    .sph-step { grid-template-columns: 1fr; gap: 24px; }
    .sph-sec-title { font-size: 1.6rem; }
}
@media (max-width: 600px) {
    .sph-check .sp-form { flex-direction: column; }
    .sph-svc-card { padding: 40px 24px; }
}