/* PTP_CLIENT_PASSPORT_PROFILE_V1 */

.ptp-passport-section {
  grid-column: 1 / -1;
  margin-top: 4px;
  border: 1px solid #dce5f2;
  border-radius: 14px;
  background: #f8faff;
  padding: 16px;
}

.ptp-passport-section-head {
  margin-bottom: 14px;
}

.ptp-passport-section-head strong {
  display: block;
  color: #172033;
  font-size: 14px;
}

.ptp-passport-section-head small {
  display: block;
  margin-top: 4px;
  color: #7b8aa2;
  font-size: 10px;
}

.ptp-passport-fields {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 14px;
}

.ptp-passport-field label {
  display: block;
  margin-bottom: 7px;
  color: #24324a;
  font-size: 11px;
  font-weight: 800;
}

.ptp-passport-field input {
  width: 100%;
  box-sizing: border-box;
  border: 1px solid #d8e1ee;
  border-radius: 10px;
  background: #fff;
  padding: 11px 12px;
  color: #172033;
  outline: none;
}

.ptp-passport-field input:focus {
  border-color: #2563eb;
  box-shadow: 0 0 0 3px rgba(37, 99, 235, .09);
}

.ptp-passport-360-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 11px;
}

.ptp-passport-360-item {
  border: 1px solid #e3e9f2;
  border-radius: 11px;
  background: #fbfcff;
  padding: 11px;
}

.ptp-passport-360-item span {
  display: block;
  color: #8190a7;
  font-size: 9px;
  font-weight: 800;
  letter-spacing: .04em;
  text-transform: uppercase;
}

.ptp-passport-360-item strong {
  display: block;
  margin-top: 5px;
  color: #172033;
  font-size: 12px;
  word-break: break-word;
}

.ptp-passport-status {
  display: inline-flex;
  width: max-content;
  margin-top: 8px;
  border-radius: 999px;
  padding: 5px 8px;
  font-size: 9px;
  font-weight: 900;
}

.ptp-passport-status.safe {
  background: #e8faf2;
  color: #047857;
}

.ptp-passport-status.warning {
  background: #fff7e6;
  color: #b45309;
}

.ptp-passport-status.critical {
  background: #fef0f0;
  color: #dc2626;
}

@media (max-width: 720px) {
  .ptp-passport-fields,
  .ptp-passport-360-grid {
    grid-template-columns: 1fr;
  }
}