/* ===== SkillCertPro / Astra look for UM CPR ===== */
.umcpr-pro,
.umcpr-pro * {
  font-family: 'Mandali', sans-serif;
  box-sizing: border-box;
  color: #4e5768; /* base text */
}

/* Headings */
.umcpr-pro .umcpr-title {
  color: #3a3a3a;
  margin: .25rem 0 .25rem;
  font-weight: 400;
  line-height: 1.25;
}
.umcpr-pro .umcpr-subtitle {
  color: #4e5768;
  margin: 0 0 .75rem;
}

/* Container + panel */
.umcpr-pro .umcpr-panel {
  border: 1px solid #e5e7eb;
  border-radius: 12px;
  padding: 1.25rem;
  background: #ffffff;
}

/* Rows & grid */
.umcpr-pro .umcpr-row { margin: .6rem 0; }
.umcpr-pro .umcpr-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: .9rem;
  margin: .6rem 0;
}
@media (max-width: 640px) {
  .umcpr-pro .umcpr-grid { grid-template-columns: 1fr; }
}

/* Labels & inputs */
.umcpr-pro label {
  display: block;
  font-size: 14px;
  margin: 0 0 .35rem;
  color: #3a3a3a;
}

.umcpr-pro input[type="text"],
.umcpr-pro input[type="password"],
.umcpr-pro select {
  width: 100%;
  border: 1px solid #e7e7e7;
  border-radius: 10px;
  padding: .6rem .8rem;
  background: #fff;
  transition: border-color .15s ease, box-shadow .15s ease, background-color .15s ease;
}

.umcpr-pro input::placeholder,
.umcpr-pro select::placeholder {
  color: #9aa1ab;
}

.umcpr-pro input:focus,
.umcpr-pro select:focus {
  outline: none;
  border-color: #75c32c;               /* Astra green */
  box-shadow: 0 0 0 3px rgba(117,195,44,.2);
}

/* Error + success helpers (optional hooks you can add via JS) */
.umcpr-pro .has-error input,
.umcpr-pro .has-error select {
  border-color: #ef4444 !important;
  box-shadow: 0 0 0 3px rgba(239,68,68,.15) !important;
}
.umcpr-pro .has-success input,
.umcpr-pro .has-success select {
  border-color: #10b981 !important;
  box-shadow: 0 0 0 3px rgba(16,185,129,.15) !important;
}

/* Tabs (match Astra button look for the active one) */
.umcpr-pro .umcpr-tabs{
  display:flex;
  flex-wrap: wrap;
  gap:.5rem;
  margin:.75rem 0;
}

.umcpr-pro .umcpr-tab{
  appearance:none;
  border:1px solid #cbd5e1;
  background:#f8fafc;
  color:#111827;
  padding:.5rem .9rem;
  border-radius: 999px;                 /* pill */
  cursor:pointer;
  font-weight:600;
  line-height: 1.1;
  transition: background-color .15s ease, border-color .15s ease, color .15s ease, box-shadow .15s ease;
}

.umcpr-pro .umcpr-tab:hover{
  background:#eef2f7;
}

.umcpr-pro .umcpr-tab:focus {
  outline: none;
  box-shadow: 0 0 0 3px rgba(117,195,44,.25);
}

.umcpr-pro .umcpr-tab.active{
  background:#75c32c;                   /* Astra green */
  color:#ffffff;
  border-color:#75c32c;
  box-shadow: 0 0 0 3px rgba(117,195,44,.25);
}

/* Buttons = Astra pills */
.umcpr-pro .button,
.umcpr-pro .button-primary,
.umcpr-pro a.button {
  color:#ffffff !important;
  background-color:#75c32c !important;
  border-color:#75c32c !important;
  border-radius:999px !important;
  padding:10px 25px !important;
  line-height: 1.1 !important;
  transition: background-color .15s ease, border-color .15s ease, box-shadow .15s ease;
  text-decoration: none !important;
  display: inline-flex;
  align-items: center;
  gap: .5rem;
}

.umcpr-pro .button:hover,
.umcpr-pro .button-primary:hover,
.umcpr-pro a.button:hover {
  background-color:#4e5768 !important;  /* hover charcoal */
  border-color:#4e5768 !important;
  color:#ffffff !important;
}

.umcpr-pro .button:focus,
.umcpr-pro .button-primary:focus,
.umcpr-pro a.button:focus {
  outline: none;
  box-shadow: 0 0 0 3px rgba(117,195,44,.25);
}

/* Disabled states */
.umcpr-pro .button[disabled],
.umcpr-pro .button-primary[disabled] {
  opacity: .65;
  cursor: not-allowed;
}

/* Status messages */
.umcpr-pro #umcpr-msg { margin-top: .9rem; }

.umcpr-pro .umcpr-ok{
  background:#ecfdf5;
  border:1px solid #a7f3d0;
  color:#065f46;
  padding:.7rem .9rem;
  border-radius:10px;
}

.umcpr-pro .umcpr-err{
  background:#fef2f2;
  border:1px solid #fecaca;
  color:#991b1b;
  padding:.7rem .9rem;
  border-radius:10px;
}

/* Small helper note */
.umcpr-pro .umcpr-note{
  font-size: 13px;
  color:#4b5563;
  margin:.25rem 0 .75rem;
}

/* Make the select look tidy on Safari/Firefox too */
.umcpr-pro select {
  -webkit-appearance: none;
  -moz-appearance: none;
  background-image:
    linear-gradient(45deg, transparent 50%, #4e5768 50%),
    linear-gradient(135deg, #4e5768 50%, transparent 50%),
    linear-gradient(to right, #e7e7e7, #e7e7e7);
  background-position:
    calc(100% - 18px) calc(1em - 2px),
    calc(100% - 12px) calc(1em - 2px),
    calc(100% - 2.2rem) 50%;
  background-size:
    6px 6px,
    6px 6px,
    1px 1.9rem;
  background-repeat: no-repeat;
  padding-right: 2.6rem;
}

/* Ensure white background behind inputs on dark surfaces */
.umcpr-pro input[type="text"],
.umcpr-pro input[type="password"],
.umcpr-pro select {
  background-color: #ffffff;
}

/* Tighten spacing under panels on small screens */
@media (max-width: 480px) {
  .umcpr-pro .umcpr-panel { padding: 1rem; }
  .umcpr-pro .umcpr-title { font-size: 1.35rem; }
}