/* ── Student ID Manager – Homepage / Shortcode Styles ──────────────────── */

.sim-hp-wrap { max-width: 860px; margin: 0 auto; font-family: 'Plus Jakarta Sans', sans-serif; }

/* Override banner so it works outside admin */
.sim-hp-banner { border-radius: 14px; padding: 28px 32px; background: linear-gradient(135deg, #1e3a8a 0%, #2563eb 60%, #3b82f6 100%); color: #fff; margin-bottom: 16px; }
.sim-hp-banner h3 { font-size: 1.25rem; font-weight: 700; margin: 0 0 4px; }
.sim-hp-banner p  { margin: 0 0 18px; opacity: .85; font-size: .9rem; }

.sim-url-row { display: flex; gap: 10px; flex-wrap: wrap; align-items: center; margin-bottom: 12px; }
.sim-school-input { flex: 1 1 180px; min-width: 0; padding: 10px 14px; border-radius: 8px; border: none; font-size: .9rem; outline: none; }
.sim-url-field-wrap { display: flex; align-items: center; background: #fff; border-radius: 8px; overflow: hidden; flex: 1 1 200px; min-width: 0; }
.sim-url-prefix { padding: 10px 10px 10px 14px; background: #2563eb; color: #fff; font-size: .82rem; white-space: nowrap; font-weight: 600; border-right: 1px solid rgba(255,255,255,.3); }
.sim-url-input  { padding: 10px 12px; border: none; flex: 1; min-width: 0; font-size: .9rem; outline: none; }
.sim-btn-white  { background: #fff; color: #1e3a8a; border: none; padding: 10px 20px; border-radius: 8px; font-weight: 700; cursor: pointer; display: flex; align-items: center; gap: 6px; white-space: nowrap; transition: opacity .2s; }
.sim-btn-white:hover { opacity: .9; }
.sim-btn-white svg { width: 16px; height: 16px; }

.sim-access-row { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.sim-checkbox-label { display: flex; align-items: center; gap: 7px; cursor: pointer; font-size: .88rem; font-weight: 500; }
.sim-checkbox-label input[type=checkbox] { width: 16px; height: 16px; accent-color: #fff; cursor: pointer; }
.sim-code-input { padding: 8px 12px; border-radius: 7px; border: none; font-size: .88rem; outline: none; }

.sim-url-banner-error { margin-top: 12px; background: rgba(255,255,255,.15); color: #fef3c7; padding: 8px 12px; border-radius: 7px; font-size: .85rem; }

/* Result card */
.sim-hp-result { margin-top: 14px; }
.sim-hp-result-inner { display: flex; align-items: center; gap: 14px; background: #f0fdf4; border: 1.5px solid #86efac; border-radius: 12px; padding: 16px 20px; flex-wrap: wrap; }
.sim-hp-result-icon { font-size: 1.5rem; flex-shrink: 0; }
.sim-hp-result-title { font-weight: 700; color: #166534; margin-bottom: 2px; }
.sim-hp-result-url   { font-size: .88rem; color: #15803d; word-break: break-all; font-family: monospace; }
.sim-hp-result .sim-btn-outline { margin-left: auto; }

/* Embedded student form wrap */
.sim-hp-embed-wrap { max-width: 680px; margin: 0 auto; font-family: 'Plus Jakarta Sans', sans-serif; }

/* Lock card within embed */
.sim-embed-lock { display: flex; justify-content: center; padding: 20px 0; }
.sim-embed-lock .sim-lock-card { background: #fff; border: 1.5px solid #e2e8f0; border-radius: 16px; padding: 32px; max-width: 380px; width: 100%; box-shadow: 0 4px 24px rgba(0,0,0,.06); text-align: center; }
.sim-embed-lock .sim-lock-icon { width: 56px; height: 56px; background: linear-gradient(135deg,#dbeafe,#bfdbfe); border-radius: 14px; display: flex; align-items: center; justify-content: center; margin: 0 auto 16px; }
.sim-embed-lock .sim-lock-icon svg { width: 28px; height: 28px; color: #2563eb; }
.sim-embed-lock .sim-lock-title { font-size: 1.15rem; font-weight: 700; color: #1e293b; margin-bottom: 4px; }
.sim-embed-lock .sim-lock-sub   { font-size: .85rem; color: #64748b; margin-bottom: 20px; }
.sim-embed-lock .sim-field      { text-align: left; margin-bottom: 14px; }
.sim-embed-lock .sim-label      { display: block; font-size: .82rem; font-weight: 600; color: #374151; margin-bottom: 5px; }
.sim-embed-lock .sim-input      { width: 100%; padding: 10px 14px; border: 1.5px solid #e2e8f0; border-radius: 8px; font-size: .9rem; box-sizing: border-box; outline: none; transition: border-color .2s; }
.sim-embed-lock .sim-input:focus { border-color: #3b82f6; }
.sim-embed-lock .sim-field-error { color: #ef4444; font-size: .8rem; margin-top: 5px; min-height: 1em; }
.sim-embed-lock .sim-btn-primary { width: 100%; padding: 11px; background: linear-gradient(135deg,#2563eb,#3b82f6); color: #fff; border: none; border-radius: 9px; font-weight: 700; font-size: .95rem; cursor: pointer; display: flex; align-items: center; justify-content: center; gap: 8px; }
.sim-embed-lock .sim-btn-primary svg { width: 18px; height: 18px; }
.sim-embed-lock .sim-btn-primary:hover { opacity: .92; }

/* Inline form */
.sim-inline-form-wrap { background: #fff; border: 1.5px solid #e2e8f0; border-radius: 16px; overflow: hidden; box-shadow: 0 4px 24px rgba(0,0,0,.06); }
.sim-form-header { background: linear-gradient(135deg,#1e3a8a,#2563eb); padding: 24px 28px; color: #fff; }
.sim-form-school { font-size: 1.3rem; font-weight: 800; margin: 0 0 4px; }
.sim-form-sub    { margin: 0; opacity: .8; font-size: .88rem; }
.sim-form-body   { padding: 24px 28px; }
.sim-field-grid  { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; margin-bottom: 16px; }
.sim-field-full  { grid-column: 1 / -1; }
.sim-field .sim-label { display: block; font-size: .82rem; font-weight: 600; color: #374151; margin-bottom: 5px; }
.sim-field .sim-input { width: 100%; padding: 10px 14px; border: 1.5px solid #e2e8f0; border-radius: 8px; font-size: .88rem; box-sizing: border-box; outline: none; transition: border-color .2s; font-family: inherit; resize: vertical; }
.sim-field .sim-input:focus { border-color: #3b82f6; }
.sim-field-error { color: #ef4444; font-size: .82rem; margin-bottom: 10px; min-height: 1.2em; }
.sim-btn-primary { background: linear-gradient(135deg,#2563eb,#3b82f6); color: #fff; border: none; padding: 12px 24px; border-radius: 9px; font-weight: 700; font-size: .95rem; cursor: pointer; width: 100%; transition: opacity .2s; }
.sim-btn-primary:hover { opacity: .92; }
.sim-btn-primary:disabled { opacity: .6; cursor: not-allowed; }
.sim-btn-full { width: 100%; }

/* Success state */
.sim-inline-success { padding: 40px 28px; text-align: center; }
.sim-success-icon { font-size: 3rem; margin-bottom: 12px; }
.sim-inline-success h3 { font-size: 1.25rem; font-weight: 700; color: #166534; margin: 0 0 6px; }
.sim-inline-success p  { color: #64748b; font-size: .9rem; margin: 0; }

@media (max-width: 520px) {
    .sim-url-row       { flex-direction: column; }
    .sim-field-grid    { grid-template-columns: 1fr; }
    .sim-hp-banner     { padding: 20px 18px; }
    .sim-form-body     { padding: 18px 16px; }
}