/* HostModal Component Styles */
.jam-modal-main {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}

.jam-modal-qr-img {
  width: 130px;
  height: 130px;
}

.jam-modal-qr-caption {
  font-size: 11px;
  color: #666;
  margin-top: 4px;
}

.jam-modal-qr-fallback {
  font-size: 48px;
  color: #ddd;
}

/* QR Code section */
.jam-modal-qr {
  width: 160px;
  height: 160px;
  background-color: #fff;
  border-radius: 8px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  padding: 8px;
  text-align: center;
  margin-bottom: 12px;
}

/* Button Styles */
.cancel-button {
  background-image: linear-gradient(45deg, #4a5568 0%, #6b7280 100%) !important;
  color: #e2e8f0 !important;
  box-shadow: 0 6px 20px rgba(0, 0, 0, 0.4), 0 0 15px rgba(74, 85, 104, 0.3) inset !important;
}

.cancel-button:hover {
  box-shadow: 0 12px 30px rgba(0, 0, 0, 0.7), 0 0 25px rgba(107, 114, 128, 0.6) inset !important;
  filter: brightness(1.15);
  color: #e2e8f0 !important;
}