/* Per-walk self check-in permission UI */
.walk-permission-card {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 18px;
  align-items: center;
  padding: 18px;
  margin: 18px 0;
  border: 1px solid rgba(28,124,84,.18);
  border-radius: 24px;
  background:
    radial-gradient(circle at 100% 0%, rgba(28,124,84,.10), transparent 36%),
    linear-gradient(180deg, #fff, #fbfdff);
  box-shadow: 0 14px 38px rgba(16,24,40,.05);
}

.walk-permission-card.compact {
  margin: 12px 0 16px;
}

.walk-permission-card h3 {
  margin: 2px 0 5px;
  color: #0f172a;
  font-size: 1.06rem;
}

.pro-switch {
  display: inline-grid;
  grid-template-columns: 54px minmax(170px, auto);
  gap: 10px;
  align-items: center;
  cursor: pointer;
  user-select: none;
}

.pro-switch input {
  display: none;
}

.pro-switch span {
  width: 54px;
  height: 32px;
  display: block;
  padding: 4px;
  border-radius: 999px;
  background: #cbd5e1;
  box-shadow: inset 0 0 0 1px rgba(15,23,42,.08);
  transition: background .16s ease;
}

.pro-switch span b {
  width: 24px;
  height: 24px;
  display: block;
  border-radius: 50%;
  background: #fff;
  box-shadow: 0 4px 12px rgba(15,23,42,.20);
  transition: transform .16s ease;
}

.pro-switch input:checked + span {
  background: #1c7c54;
}

.pro-switch input:checked + span b {
  transform: translateX(22px);
}

.pro-switch strong {
  color: #0f172a;
  font-size: .92rem;
}

.pill-green {
  background: #dcfae6;
  color: #0f7f55;
}

#selfCheckinBtn:disabled {
  cursor: not-allowed;
  opacity: .65;
  box-shadow: none;
}

@media (max-width: 760px) {
  .walk-permission-card {
    grid-template-columns: 1fr;
  }

  .pro-switch {
    width: 100%;
    grid-template-columns: 54px minmax(0, 1fr);
  }
}
