/* =====================================================================
   Staff Verification Plugin v1.1 — Million Dollar Advisory Brand Theme
   Palette: #203864 (Navy) · #BF9000 (Gold) · #222A35 (Dark) · #F2F2F2 (Light)
   ===================================================================== */

:root {
  --sv-primary   : #203864;
  --sv-gold      : #BF9000;
  --sv-dark      : #222A35;
  --sv-light     : #F2F2F2;
  --sv-white     : #ffffff;
  --sv-radius    : 14px;
  --sv-shadow    : 0 8px 32px rgba(32,56,100,0.13);
}

/* ── Wrapper ── */
.sv-wrapper {
  font-family: "Segoe UI", -apple-system, BlinkMacSystemFont, Roboto, sans-serif;
  display      : flex;
  justify-content: center;
  padding      : 24px 16px;
  box-sizing   : border-box;
}

/* ── Card ── */
.sv-card {
  background   : var(--sv-white);
  border-radius: var(--sv-radius);
  padding      : 0 0 40px;
  max-width    : 580px;
  width        : 100%;
  text-align   : center;
  box-shadow   : var(--sv-shadow);
  overflow     : hidden;
}

/* ── Gold accent bar at top ── */
.sv-header-bar {
  height    : 5px;
  background: linear-gradient(90deg, var(--sv-primary) 0%, var(--sv-gold) 100%);
  margin-bottom: 28px;
}

/* ── Icon ── */
.sv-icon-wrap {
  display        : flex;
  justify-content: center;
  padding-top    : 32px;
  margin-bottom  : 4px;
}

/* ── Heading ── */
.sv-heading {
  font-size  : 1.85rem;
  font-weight: 800;
  color      : var(--sv-primary);
  margin     : 0 32px 12px;
  line-height: 1.2;
  letter-spacing: -0.01em;
}

/* ── Description ── */
.sv-desc {
  font-size  : 0.93rem;
  color      : #5a6376;
  line-height: 1.7;
  margin     : 0 40px 28px;
}

/* ── Input Row ── */
.sv-form-row {
  display       : flex;
  align-items   : stretch;
  border        : 2px solid #d8dde8;
  border-radius : 10px;
  overflow      : hidden;
  margin        : 0 32px 14px;
  transition    : border-color 0.2s, box-shadow 0.2s;
  background    : var(--sv-white);
}

.sv-form-row:focus-within {
  border-color: var(--sv-primary);
  box-shadow  : 0 0 0 3px rgba(32,56,100,0.12);
}

.sv-prefix {
  background  : var(--sv-light);
  color       : var(--sv-dark);
  font-weight : 700;
  font-size   : 0.95rem;
  padding     : 14px 18px;
  border-right: 2px solid #d8dde8;
  display     : flex;
  align-items : center;
  white-space : nowrap;
  user-select : none;
  letter-spacing: 0.02em;
}

.sv-input {
  flex       : 1;
  border     : none;
  outline    : none;
  padding    : 14px 18px;
  font-size  : 1rem;
  color      : var(--sv-dark);
  background : transparent;
  min-width  : 0;
}

.sv-input::placeholder { color: #b0b8c8; }

/* ── Verify Button ── */
.sv-btn {
  display        : flex;
  align-items    : center;
  justify-content: center;
  gap            : 8px;
  width          : calc(100% - 64px);
  margin         : 0 32px;
  padding        : 15px 24px;
  background     : var(--sv-primary);
  border         : none;
  border-radius  : 50px;
  color          : var(--sv-white);
  font-size      : 0.9rem;
  font-weight    : 800;
  letter-spacing : 0.12em;
  cursor         : pointer;
  transition     : background 0.2s, transform 0.1s, box-shadow 0.2s;
  box-shadow     : 0 4px 14px rgba(32,56,100,0.28);
}

.sv-btn:hover {
  background : var(--sv-gold);
  box-shadow : 0 6px 18px rgba(191,144,0,0.35);
}

.sv-btn:active  { transform: scale(0.98); }

.sv-btn:disabled {
  opacity   : 0.65;
  cursor    : not-allowed;
  transform : none;
}

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

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

/* ── Result Box ── */
.sv-result {
  margin     : 20px 32px 0;
  border-radius: 10px;
  padding    : 22px 24px;
  font-size  : 0.93rem;
  line-height: 1.6;
  text-align : left;
}

/* ── Success ── */
.sv-result.sv-success {
  background: #f0f5ff;
  border    : 1.5px solid #a8bfee;
  color     : var(--sv-primary);
}

.sv-result.sv-success .sv-check-icon {
  display    : block;
  text-align : center;
  font-size  : 2rem;
  margin-bottom: 10px;
}

.sv-result.sv-success .sv-staff-name {
  display    : block;
  font-size  : 1.25rem;
  font-weight: 800;
  text-align : center;
  color      : var(--sv-primary);
  margin-bottom: 4px;
}

.sv-result.sv-success .sv-staff-role {
  display    : block;
  font-size  : 0.88rem;
  text-align : center;
  color      : #5a6376;
  margin-bottom: 14px;
}

.sv-result.sv-success .sv-badge {
  display        : flex;
  align-items    : center;
  justify-content: center;
  gap            : 6px;
  background     : var(--sv-primary);
  color          : #fff;
  font-size      : 0.75rem;
  font-weight    : 700;
  letter-spacing : 0.09em;
  text-transform : uppercase;
  padding        : 7px 16px;
  border-radius  : 50px;
  width          : fit-content;
  margin         : 0 auto;
}

.sv-badge-dot {
  width : 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--sv-gold);
  display: inline-block;
  animation: sv-pulse 1.6s ease-in-out infinite;
}

@keyframes sv-pulse {
  0%,100% { opacity:1; transform:scale(1); }
  50%      { opacity:0.5; transform:scale(0.75); }
}

/* ── Not Found ── */
.sv-result.sv-not-found {
  background: #fffbf0;
  border    : 1.5px solid #e8cc7a;
  color     : #7a5c00;
  text-align: center;
}

.sv-result.sv-not-found .sv-warn-icon {
  font-size    : 2rem;
  display      : block;
  margin-bottom: 8px;
}

.sv-result.sv-not-found .sv-warn-title {
  font-weight  : 700;
  font-size    : 1rem;
  color        : var(--sv-gold);
  display      : block;
  margin-bottom: 8px;
}

.sv-result.sv-not-found p {
  margin   : 0;
  font-size: 0.88rem;
  color    : #7a5c00;
}

.sv-result.sv-not-found a {
  color      : var(--sv-primary);
  font-weight: 700;
}

/* ── Error ── */
.sv-result.sv-error {
  background: #fff2f2;
  border    : 1.5px solid #f5a5a5;
  color     : #8b1a1a;
  text-align: center;
}

/* ── Divider ── */
.sv-divider {
  height    : 1px;
  background: linear-gradient(90deg, transparent, #d8dde8, transparent);
  margin    : 28px 32px 0;
}

/* ── Responsive ── */
@media (max-width: 480px) {
  .sv-card      { padding-bottom: 28px; }
  .sv-heading   { font-size: 1.4rem; margin: 0 20px 10px; }
  .sv-desc      { margin: 0 20px 22px; }
  .sv-form-row  { margin: 0 20px 14px; }
  .sv-btn       { width: calc(100% - 40px); margin: 0 20px; }
  .sv-result    { margin: 16px 20px 0; }
  .sv-divider   { margin: 20px 20px 0; }
  .sv-prefix    { padding: 12px 14px; }
  .sv-input     { padding: 12px 14px; }
}