/* =====================================================================
   Staff Mini Widget — [staff_mini] shortcode v1.0
   Transparent background · input + button only · no glow/shadow
   ===================================================================== */

/* ── Wrapper ── */
.svm-wrapper {
  font-family: "Segoe UI", -apple-system, BlinkMacSystemFont, Roboto, sans-serif;
  display    : block;
  background : transparent;
  padding    : 0;
  box-sizing : border-box;
}

/* ── Inner ── */
.svm-inner {
  width     : 100%;
  background: transparent;
}

/* ── Input Row ── */
.svm-form-row {
  display      : flex;
  align-items  : stretch;
  border-radius: 10px;
  overflow     : hidden;
  margin-bottom: 12px;
  background   : #ffffff;
  border       : 2px solid transparent;
  transition   : border-color 0.2s;
}

.svm-form-row:focus-within {
  border-color: #BF9000;
}

/* +60 prefix */
.svm-prefix {
  background  : #e8e8e8;
  color       : #222A35;
  font-weight : 700;
  font-size   : 1rem;
  padding     : 14px 20px;
  border-right: 1px solid #d4d4d4;
  display     : flex;
  align-items : center;
  white-space : nowrap;
  user-select : none;
}

/* number input */
.svm-input {
  flex       : 1;
  border     : none;
  outline    : none;
  padding    : 14px 18px;
  font-size  : 1rem;
  color      : #222A35;
  background : transparent;
  min-width  : 0;
}

.svm-input::placeholder { color: #aaaaaa; }

/* ── VERIFY Button — full width, no glow ── */
.svm-btn {
  display        : flex;
  align-items    : center;
  justify-content: center;
  gap            : 8px;
  width          : 100%;
  padding        : 15px 24px;
  border         : none;
  border-radius  : 10px;
  color          : #ffffff;
  font-size      : 0.9rem;
  font-weight    : 800;
  letter-spacing : 0.13em;
  text-transform : uppercase;
  cursor         : pointer;
  box-shadow     : none;
  transition     : opacity 0.15s, transform 0.1s;
}

.svm-btn:hover   { opacity: 0.9; }
.svm-btn:active  { transform: scale(0.98); }
.svm-btn:disabled {
  opacity: 0.6;
  cursor : not-allowed;
}

/* ── Spinner ── */
.svm-spinner {
  width            : 15px;
  height           : 15px;
  border           : 2px solid rgba(255,255,255,0.35);
  border-top-color : #fff;
  border-radius    : 50%;
  animation        : svm-spin 0.65s linear infinite;
  flex-shrink      : 0;
}

@keyframes svm-spin { to { transform: rotate(360deg); } }

/* ── Result ── */
.svm-result {
  margin       : 14px 0 0;
  border-radius: 8px;
  padding      : 16px 18px;
  font-size    : 0.9rem;
  line-height  : 1.6;
  text-align   : center;
}

/* Success */
.svm-result.svm-success {
  background: rgba(255,255,255,0.15);
  border    : 1.5px solid rgba(255,255,255,0.3);
  color     : #ffffff;
}

.svm-result.svm-success .svm-check-icon { font-size:1.6rem; display:block; margin-bottom:6px; }
.svm-result.svm-success .svm-staff-name { font-size:1.1rem; font-weight:800; display:block; margin-bottom:2px; }
.svm-result.svm-success .svm-staff-role { font-size:0.85rem; display:block; margin-bottom:10px; opacity:0.85; }

.svm-result.svm-success .svm-badge {
  display       : inline-flex;
  align-items   : center;
  gap           : 5px;
  background    : #BF9000;
  color         : #fff;
  font-size     : 0.7rem;
  font-weight   : 700;
  text-transform: uppercase;
  letter-spacing: 0.09em;
  padding       : 5px 14px;
  border-radius : 50px;
}

/* Not Found */
.svm-result.svm-not-found {
  background: #ffffff;
  border    : 1.5px solid #e0e0e0;
  color     : #67686B;
  text-align: center;
}

.svm-result.svm-not-found .svm-warn-icon  { font-size:1.6rem; display:block; margin-bottom:6px; }
.svm-result.svm-not-found .svm-warn-title { font-weight:700; display:block; margin-bottom:4px; color:#093059; }
.svm-result.svm-not-found p               { margin:0; font-size:0.85rem; color:#67686B; }
.svm-result.svm-not-found a               { color:#093059; font-weight:700; }

/* Error */
.svm-result.svm-error {
  background: rgba(255,200,200,0.12);
  border    : 1.5px solid rgba(245,165,165,0.35);
  color     : #ffd0d0;
  text-align: center;
}

/* ── Mobile ── */
@media (max-width: 400px) {
  .svm-prefix { padding: 12px 14px; }
  .svm-input  { padding: 12px 14px; }
}