/* MÁ PEPS — Verification Plugin Styles v1.3.0 */
/* Conflict-free: scoped to #mapeps-verify-wrap */

@font-face {
  font-family: 'MAPeps';
  src: url('fonts/MaFont-Regular.woff2') format('woff2'),
       url('fonts/MaFont-Regular.woff') format('woff'),
       url('fonts/MaFont-Regular.ttf') format('truetype');
  font-weight: normal;
  font-style: normal;
  font-display: swap;
}

#mapeps-verify-wrap,
#mapeps-verify-wrap *,
#mapeps-verify-wrap *::before,
#mapeps-verify-wrap *::after {
  box-sizing: border-box !important;
  margin: 0;
  padding: 0;
}

#mapeps-verify-wrap {
  font-family: 'MAPeps', sans-serif !important;
  font-weight: 400 !important;
  background: transparent !important;
  max-width: 1300px !important;
  width: 100% !important;
  margin: 0 auto !important;
  padding: 0 !important;
  color: #F5EDE4 !important;
}

/* ── SINGLE COLUMN LAYOUT ───────────────────────────── */
#mapeps-verify-wrap .mp-cards {
  display: block !important;
  width: 100% !important;
}

#mapeps-verify-wrap .mp-card {
  background: transparent !important;
  border-radius: 0 !important;
  padding: 0 !important;
  margin-bottom: 48px !important;
  position: relative !important;
}

/* ── CARD LABEL (MÁ PEPS — Verification) ───────────── */
#mapeps-verify-wrap .mp-card-label {
  display: none !important;
}

/* ── HEADING via theme class ────────────────────────── */
/* sr-breadcrumb-title handled by theme, we just ensure spacing */
#mapeps-verify-wrap h1.sr-breadcrumb-title,
#mapeps-verify-wrap h2.sr-breadcrumb-title {
  margin-bottom: 12px !important;
  padding: 0 !important;
  text-align: center !important;
}

/* ── INTRO TEXT ─────────────────────────────────────── */
#mapeps-verify-wrap .mp-intro {
  margin-bottom: 32px !important;
  text-align: center !important;
}
#mapeps-verify-wrap .mp-intro p {
  font-family: 'MAPeps', sans-serif !important;
  font-size: 14px !important;
  font-weight: 400 !important;
  line-height: 1.75 !important;
  color: rgba(245,237,228,.5) !important;
  margin-bottom: 4px !important;
}

/* ── DIVIDER ────────────────────────────────────────── */
#mapeps-verify-wrap .mp-divider {
  height: 0.5px !important;
  background: rgba(196,149,106,.25) !important;
  border: none !important;
  margin: 28px 0 !important;
  display: block !important;
}

/* ── FIELD LABEL ────────────────────────────────────── */
#mapeps-verify-wrap .mp-field-label {
  font-family: 'MAPeps', sans-serif !important;
  font-size: 10px !important;
  font-weight: 400 !important;
  letter-spacing: .22em !important;
  text-transform: uppercase !important;
  color: rgba(245,237,228,.35) !important;
  margin-bottom: 10px !important;
  display: block !important;
}

/* ── INPUT ──────────────────────────────────────────── */
#mapeps-verify-wrap .mp-input {
  width: 100% !important;
  height: 52px !important;
  background: rgba(24,4,21,.7) !important;
  border: 0.5px solid rgba(245,237,228,.18) !important;
  border-radius: 4px !important;
  color: #F5EDE4 !important;
  font-family: 'MAPeps', sans-serif !important;
  font-size: 15px !important;
  font-weight: 400 !important;
  letter-spacing: .06em !important;
  padding: 0 18px !important;
  outline: none !important;
  box-shadow: none !important;
  transition: border-color .2s !important;
  margin-bottom: 12px !important;
  display: block !important;
  -webkit-appearance: none !important;
  appearance: none !important;
}
#mapeps-verify-wrap .mp-input::placeholder {
  color: rgba(245,237,228,.22) !important;
  font-style: italic !important;
}
#mapeps-verify-wrap .mp-input:focus {
  border-color: #C4956A !important;
  box-shadow: none !important;
  outline: none !important;
}

/* ── BUTTON ─────────────────────────────────────────── */
#mapeps-verify-wrap .mp-btn {
  width: 100% !important;
  height: 52px !important;
  background: #C4956A !important;
  color: #180415 !important;
  font-family: 'MAPeps', sans-serif !important;
  font-size: 13px !important;
  font-weight: 600 !important;
  letter-spacing: .18em !important;
  text-transform: uppercase !important;
  border: none !important;
  border-radius: 6px !important;
  cursor: pointer !important;
  transition: background .2s, transform .1s !important;
  box-shadow: none !important;
  display: block !important;
  -webkit-appearance: none !important;
  appearance: none !important;
  line-height: 52px !important;
  text-align: center !important;
}
#mapeps-verify-wrap .mp-btn:hover    { background: #D4A87C !important; }
#mapeps-verify-wrap .mp-btn:active   { opacity: .9 !important; }
#mapeps-verify-wrap .mp-btn:disabled { background: rgba(196,149,106,.35) !important; cursor: default !important; }

/* ── LOADING ────────────────────────────────────────── */
#mapeps-verify-wrap .mp-loading {
  display: none !important;
  margin-top: 14px !important;
  text-align: center !important;
  font-size: 11px !important;
  letter-spacing: .2em !important;
  text-transform: uppercase !important;
  color: rgba(245,237,228,.3) !important;
}
#mapeps-verify-wrap .mp-loading.show { display: block !important; }

/* ── ERROR ──────────────────────────────────────────── */
#mapeps-verify-wrap .mp-error {
  display: none !important;
  margin-top: 14px !important;
  padding: 14px 16px !important;
  background: rgba(226,90,90,.08) !important;
  border: 0.5px solid rgba(226,90,90,.3) !important;
  border-radius: 4px !important;
  font-size: 13px !important;
  color: rgba(245,237,228,.6) !important;
  line-height: 1.6 !important;
}
#mapeps-verify-wrap .mp-error.show { display: block !important; }

/* ── OBJECTIVE BOX ──────────────────────────────────── */
#mapeps-verify-wrap .mp-objective {
  background: rgba(196,149,106,.06) !important;
  border: 0.5px solid rgba(196,149,106,.18) !important;
  border-radius: 6px !important;
  padding: 20px 22px !important;
}
#mapeps-verify-wrap .mp-objective-heading {
  font-family: 'MAPeps', sans-serif !important;
  font-size: 15px !important;
  font-weight: 600 !important;
  letter-spacing: .08em !important;
  text-transform: none !important;
  color: #ffffff !important;
  margin-bottom: 12px !important;
  display: block !important;
}
#mapeps-verify-wrap .mp-objective p {
  font-family: 'MAPeps', sans-serif !important;
  font-size: 13px !important;
  font-weight: 400 !important;
  line-height: 1.75 !important;
  color: rgba(245,237,228,.4) !important;
}

/* ── RESULTS ────────────────────────────────────────── */
#mapeps-verify-wrap .mp-results {
  display: none !important;
  background: #110A0F !important;
  border-radius: 8px !important;
  padding: 8px 28px !important;
}
#mapeps-verify-wrap .mp-results.show {
  display: block !important;
}

/* ── RESULT ROWS ────────────────────────────────────── */
#mapeps-verify-wrap .mp-result-row {
  padding: 14px 0 !important;
  border-bottom: 0.5px solid rgba(255,255,255,.1) !important;
  display: flex !important;
  align-items: flex-start !important;
  justify-content: space-between !important;
  gap: 16px !important;
}
#mapeps-verify-wrap .mp-result-row:last-child { border-bottom: none !important; }

#mapeps-verify-wrap .mp-result-key {
  font-family: 'MAPeps', sans-serif !important;
  font-size: 10px !important;
  font-weight: 400 !important;
  letter-spacing: .2em !important;
  text-transform: uppercase !important;
  color: rgba(255,255,255,.45) !important;
  padding-top: 2px !important;
  flex-shrink: 0 !important;
  width: 180px !important;
}

#mapeps-verify-wrap .mp-result-val {
  font-family: 'MAPeps', sans-serif !important;
  font-size: 14px !important;
  font-weight: 400 !important;
  color: #ffffff !important;
  letter-spacing: .02em !important;
  text-align: right !important;
  flex: 1 !important;
}

/* ── STATUS ─────────────────────────────────────────── */
#mapeps-verify-wrap .mp-status-wrap {
  display: flex !important;
  align-items: center !important;
  gap: 8px !important;
  justify-content: flex-end !important;
}
#mapeps-verify-wrap .mp-dot {
  width: 7px !important;
  height: 7px !important;
  border-radius: 50% !important;
  background: rgba(245,237,228,.2) !important;
  flex-shrink: 0 !important;
  display: inline-block !important;
}
#mapeps-verify-wrap .mp-dot.pulse {
  background: #4CAF7D !important;
  animation: mpPulse 2s infinite !important;
}
@keyframes mpPulse { 0%,100%{opacity:1} 50%{opacity:.4} }
#mapeps-verify-wrap .mp-dot.invalid { background: #E25A5A !important; animation: none !important; }

#mapeps-verify-wrap .mp-status-text {
  font-family: 'MAPeps', sans-serif !important;
  font-size: 14px !important;
  font-weight: 400 !important;
  color: rgba(255,255,255,.35) !important;
}
#mapeps-verify-wrap .mp-status-text.verified { color: #4CAF7D !important; }
#mapeps-verify-wrap .mp-status-text.invalid  { color: #E25A5A !important; }

/* ── COA BUTTON ─────────────────────────────────────── */
#mapeps-verify-wrap .mp-coa-btn {
  display: inline-flex !important;
  align-items: center !important;
  gap: 7px !important;
  background: transparent !important;
  border: 0.5px solid #C4956A !important;
  color: #C4956A !important;
  font-family: 'MAPeps', sans-serif !important;
  font-size: 10px !important;
  font-weight: 500 !important;
  letter-spacing: .18em !important;
  text-transform: uppercase !important;
  padding: 8px 18px !important;
  border-radius: 4px !important;
  cursor: pointer !important;
  transition: background .2s, color .2s !important;
  box-shadow: none !important;
  -webkit-appearance: none !important;
  appearance: none !important;
  line-height: normal !important;
  text-decoration: none !important;
}
#mapeps-verify-wrap .mp-coa-btn:hover {
  background: #C4956A !important;
  color: #180415 !important;
}

/* ── RESPONSIVE ─────────────────────────────────────── */
@media (max-width: 600px) {
  #mapeps-verify-wrap .mp-result-key { width: 130px !important; }
  #mapeps-verify-wrap .mp-result-val { font-size: 13px !important; }
}