/* LSHRM Certificate Verification - Premium UI */

.lshrm-cv-shell{
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 28px 16px;
}

.lshrm-cv-wrap{
  --brand: #0b5cff;
  width: 100%;
  max-width: 920px;
}a

/* Premium background (scoped to plugin area only) */
.lshrm-cv-shell{
  background:
    radial-gradient(1200px 500px at 10% 10%, rgba(11,92,255,.18), transparent 60%),
    radial-gradient(900px 420px at 90% 20%, rgba(180, 60, 255, .14), transparent 55%),
    radial-gradient(900px 420px at 55% 90%, rgba(0, 200, 160, .10), transparent 55%),
    linear-gradient(180deg, rgba(255,255,255,0.96), rgba(248,249,255,0.96));
}

.lshrm-cv-card{
  background: rgba(255,255,255,0.86);
  border: 1px solid rgba(15, 23, 42, 0.08);
  border-radius: 18px;
  overflow: hidden;
  box-shadow:
    0 20px 45px rgba(2, 6, 23, 0.10),
    0 6px 18px rgba(2, 6, 23, 0.06);
  backdrop-filter: blur(10px);
}

/* Gradient Header */
.lshrm-cv-hero{
  position: relative;
  padding: 18px 18px 16px;
  color: #fff;
  background: linear-gradient(120deg, rgba(11,92,255,1), rgba(123,64,255,1), rgba(0,180,160,1));
}

.lshrm-cv-hero-inner{
  display: flex;
  gap: 14px;
  align-items: center;
}

.lshrm-cv-hero-text{
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.lshrm-cv-title{
  margin: 0;
  font-size: 20px;
  font-weight: 800;
  letter-spacing: -0.02em;
}

.lshrm-cv-sub{
  margin: 0;
  font-size: 13px;
  opacity: .92;
  font-weight: 600;
}

.lshrm-cv-hero-accent{
  position: absolute;
  right: -60px;
  top: -60px;
  width: 160px;
  height: 160px;
  background: radial-gradient(circle, rgba(255,255,255,0.38), transparent 60%);
  transform: rotate(12deg);
}

.lshrm-cv-logo{
  width: 44px;
  height: 44px;
  object-fit: contain;
  background: rgba(255,255,255,0.14);
  border: 1px solid rgba(255,255,255,0.24);
  border-radius: 12px;
  padding: 6px;
}

.lshrm-cv-logo-placeholder{
  width: 44px;
  height: 44px;
  border-radius: 12px;
  background: rgba(255,255,255,0.18);
  border: 1px solid rgba(255,255,255,0.28);
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 900;
  letter-spacing: 0.02em;
  font-size: 12px;
}

.lshrm-cv-body{
  padding: 18px;
}

.lshrm-cv-label{
  display: block;
  font-size: 13px;
  font-weight: 800;
  color: rgba(2,6,23,0.85);
  margin-bottom: 8px;
}

.lshrm-cv-input-row{
  display: flex;
  gap: 10px;
  align-items: stretch;
}

.lshrm-cv-input{
  flex: 1;
  border-radius: 12px;
  border: 1px solid rgba(15,23,42,0.14);
  background: rgba(255,255,255,0.9);
  padding: 12px 12px;
  font-size: 14px;
  font-weight: 700;
  outline: none;
  transition: box-shadow .15s ease, border-color .15s ease, transform .15s ease;
}

.lshrm-cv-input:focus{
  border-color: rgba(11,92,255,0.55);
  box-shadow: 0 0 0 4px rgba(11,92,255,0.12);
}

.lshrm-cv-btn{
  border: 0;
  border-radius: 12px;
  padding: 12px 14px;
  font-weight: 900;
  cursor: pointer;
  color: #fff;
  background: linear-gradient(120deg, var(--brand), rgba(123,64,255,1));
  box-shadow: 0 10px 22px rgba(11,92,255,0.22);
  transition: transform .12s ease, opacity .12s ease;
}

.lshrm-cv-btn:disabled{
  opacity: .72;
  cursor: not-allowed;
}

.lshrm-cv-btn:hover{ transform: translateY(-1px); }

.lshrm-cv-hint{
  margin-top: 8px;
  font-size: 12px;
  color: rgba(2,6,23,0.62);
  font-weight: 650;
}

.lshrm-cv-msg{
  margin-top: 10px;
  font-size: 13px;
  font-weight: 800;
}
.lshrm-cv-msg.is-error{ color: #b91c1c; }
.lshrm-cv-msg.is-success{ color: #065f46; }

/* Result Card */
.lshrm-cv-result{
  margin-top: 16px;
  border-radius: 16px;
  border: 1px solid rgba(15,23,42,0.12);
  background: rgba(255,255,255,0.95);
  overflow: hidden;
}

.lshrm-result-top{
  padding: 14px 14px 12px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  border-bottom: 1px solid rgba(15,23,42,0.08);
  background: linear-gradient(180deg, rgba(248,249,255,1), rgba(255,255,255,1));
}

.lshrm-badge{
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 8px 12px;
  border-radius: 999px;
  font-size: 12px;
  font-weight: 900;
  letter-spacing: 0.02em;
  border: 1px solid rgba(15,23,42,0.10);
}

.lshrm-badge.valid{
  background: rgba(16, 185, 129, 0.12);
  color: rgba(6,95,70,1);
}
.lshrm-badge.expired{
  background: rgba(245, 158, 11, 0.12);
  color: rgba(146,64,14,1);
}
.lshrm-badge.revoked{
  background: rgba(239, 68, 68, 0.12);
  color: rgba(153,27,27,1);
}
.lshrm-badge.not_found{
  background: rgba(100, 116, 139, 0.12);
  color: rgba(30,41,59,1);
}

.lshrm-result-body{
  padding: 14px;
}

.lshrm-grid{
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
}

@media (max-width: 720px){
  .lshrm-grid{ grid-template-columns: 1fr; }
  .lshrm-cv-input-row{ flex-direction: column; }
}

.lshrm-field{
  border: 1px solid rgba(15,23,42,0.10);
  border-radius: 14px;
  padding: 10px 12px;
  background: rgba(248,250,252,0.9);
}

.lshrm-field .k{
  font-size: 11px;
  font-weight: 900;
  color: rgba(2,6,23,0.55);
  letter-spacing: 0.06em;
}

.lshrm-field .v{
  margin-top: 4px;
  font-size: 14px;
  font-weight: 850;
  color: rgba(2,6,23,0.86);
}

.lshrm-actions{
  margin-top: 12px;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px;
}

.lshrm-link{
  font-weight: 900;
  font-size: 13px;
  color: rgba(11,92,255,1);
  text-decoration: none;
}

.lshrm-link:hover{
  text-decoration: underline;
}

.lshrm-print-btn{
  margin-left: auto;
  border: 1px solid rgba(15,23,42,0.12);
  background: linear-gradient(120deg, rgba(2,6,23,0.85), rgba(30,41,59,0.92));
  color: #fff;
  font-weight: 900;
  border-radius: 12px;
  padding: 10px 12px;
  cursor: pointer;
  transition: transform .12s ease, opacity .12s ease;
}
.lshrm-print-btn:hover{ transform: translateY(-1px); }

.lshrm-qr{
  display:flex;
  gap:10px;
  align-items:center;
  padding: 10px 12px;
  border-radius: 14px;
  border: 1px dashed rgba(15,23,42,0.18);
  background: rgba(255,255,255,0.9);
}

/* Footer */
.lshrm-cv-footer{
  margin-top: 14px;
  padding-top: 12px;
  border-top: 1px solid rgba(15,23,42,0.08);
  color: rgba(2,6,23,0.60);
  font-weight: 650;
  font-size: 12px;
}

/* ===========================
   PRINT ONLY RESULT SECTION
   =========================== */

body.lshrm-cv-print-mode *{
  visibility: hidden !important;
}

body.lshrm-cv-print-mode .lshrm-print-area,
body.lshrm-cv-print-mode .lshrm-print-area *{
  visibility: visible !important;
}

body.lshrm-cv-print-mode .lshrm-print-area{
  position: fixed;
  left: 0;
  top: 0;
  width: 100%;
  background: #fff;
  padding: 22px;
}

@media print{
  .lshrm-print-btn{ display:none !important; }
}

/* Hide print-only section on screen */
.lshrm-print-area {
  display: none;
}

/* Show print-only section during print */
body.lshrm-cv-print-mode .lshrm-print-area {
  display: block;
}