.sid-sp-qr-page,
.sid-sp-pay-page {
  font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  color: #fff;
}
.sid-sp-qr-page {
  display:flex;
  justify-content:center;
  padding:30px 15px;
  background:#050505;
}
.sid-sp-qr-card {
  width:100%;
  max-width:860px;
  background:#111;
  border-radius:18px;
  box-shadow:0 18px 45px rgba(0,0,0,0.6);
  padding:22px 22px 26px;
  border:1px solid rgba(255,255,255,0.08);
}
.sid-sp-qr-header {
  display:flex;
  gap:18px;
  align-items:center;
  border-bottom:1px solid rgba(255,255,255,0.06);
  padding-bottom:16px;
  margin-bottom:16px;
}
.sid-sp-qr-logo img {
  max-height:52px;
}
.sid-sp-qr-title h2 {
  margin:0 0 4px;
  font-size:22px;
}
.sid-sp-qr-title p {
  margin:0;
  font-size:13px;
  color:#999;
}
.sid-sp-qr-badge {
  display:inline-block;
  padding:3px 10px;
  border-radius:999px;
  font-size:10px;
  letter-spacing:1.4px;
  text-transform:uppercase;
  background:#e10600;
  margin-bottom:6px;
}
.sid-sp-qr-summary {
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:10px;
  margin-bottom:18px;
}
.sid-sp-qr-summary-item {
  background:#151515;
  border-radius:12px;
  padding:10px 12px;
  border:1px solid rgba(255,255,255,0.04);
}
.sid-sp-qr-label {
  display:block;
  font-size:11px;
  text-transform:uppercase;
  letter-spacing:1px;
  color:#888;
  margin-bottom:4px;
}
.sid-sp-qr-value {
  font-size:13px;
}
.sid-sp-qr-subtitle {
  margin:0 0 10px;
  font-size:15px;
}
.sid-sp-qr-visits-table {
  width:100%;
  border-collapse:collapse;
  font-size:12px;
  margin-bottom:14px;
}
.sid-sp-qr-visits-table th,
.sid-sp-qr-visits-table td {
  padding:6px 8px;
  border-bottom:1px solid rgba(255,255,255,0.06);
}
.sid-sp-qr-visits-table th {
  text-align:left;
  font-weight:600;
  color:#bbb;
}
.sid-sp-qr-empty {
  font-size:13px;
  color:#aaa;
}
.sid-sp-qr-message {
  background:#1b3b1e;
  color:#b2f0b6;
  border-radius:10px;
  padding:8px 10px;
  font-size:12px;
  margin-bottom:10px;
}
.sid-sp-qr-admin {
  margin-top:18px;
  border-top:1px solid rgba(255,255,255,0.06);
  padding-top:14px;
}
.sid-sp-qr-admin-login label,
.sid-sp-qr-add-visit label {
  display:block;
  font-size:12px;
  margin-bottom:4px;
}
.sid-sp-qr-admin-login input[type="password"],
.sid-sp-qr-add-visit input[type="date"],
.sid-sp-qr-add-visit input[type="time"],
.sid-sp-qr-add-visit textarea {
  width:100%;
  background:#151515;
  border-radius:10px;
  border:1px solid rgba(255,255,255,0.08);
  padding:6px 8px;
  font-size:13px;
  color:#fff;
}
.sid-sp-qr-add-visit-row {
  display:flex;
  gap:10px;
  margin-bottom:8px;
}
.sid-sp-qr-add-visit-row>div {
  flex:1;
}
.sid-sp-qr-admin-btn {
  margin-top:8px;
  padding:8px 16px;
  border-radius:999px;
  border:none;
  background:#e10600;
  color:#fff;
  font-size:12px;
  letter-spacing:1px;
  text-transform:uppercase;
  cursor:pointer;
  box-shadow:0 8px 18px rgba(225,6,0,0.45);
  transform:translateY(0);
  transition:all .18s ease-out;
}
.sid-sp-qr-admin-btn:hover {
  transform:translateY(-1px);
  box-shadow:0 10px 22px rgba(225,6,0,0.6);
}
.sid-sp-qr-admin-btn-green {
  background:#178f3d;
  box-shadow:0 8px 18px rgba(23,143,61,0.4);
}
.sid-sp-qr-admin-btn-green:hover {
  box-shadow:0 10px 22px rgba(23,143,61,0.55);
}

/* Payment page */
.sid-sp-pay-page {
  display:flex;
  justify-content:center;
  padding:30px 15px;
  background:#050505;
}
.sid-sp-pay-card {
  width:100%;
  max-width:760px;
  background:#111;
  border-radius:18px;
  box-shadow:0 18px 45px rgba(0,0,0,0.6);
  padding:22px 22px 24px;
  border:1px solid rgba(255,255,255,0.08);
}
.sid-sp-pay-header {
  display:flex;
  gap:16px;
  align-items:center;
  border-bottom:1px solid rgba(255,255,255,0.06);
  padding-bottom:14px;
  margin-bottom:16px;
}
.sid-sp-pay-logo img {
  max-height:48px;
}
.sid-sp-pay-title h2 {
  margin:0 0 4px;
  font-size:20px;
}
.sid-sp-pay-title p {
  margin:0;
  font-size:13px;
  color:#999;
}
.sid-sp-pay-badge {
  display:inline-block;
  padding:3px 9px;
  border-radius:999px;
  font-size:10px;
  letter-spacing:1.4px;
  text-transform:uppercase;
  background:#e10600;
  margin-bottom:4px;
}
.sid-sp-pay-summary {
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:10px;
  margin-bottom:18px;
}
.sid-sp-pay-summary-item {
  background:#151515;
  border-radius:12px;
  padding:10px 12px;
  border:1px solid rgba(255,255,255,0.04);
}
.sid-sp-pay-label {
  display:block;
  font-size:11px;
  text-transform:uppercase;
  letter-spacing:1px;
  color:#888;
  margin-bottom:3px;
}
.sid-sp-pay-value {
  font-size:13px;
}
.sid-sp-pay-subtitle {
  margin:0 0 8px;
  font-size:14px;
}
.sid-sp-pay-block {
  background:#151515;
  border-radius:12px;
  padding:10px 12px;
  border:1px solid rgba(255,255,255,0.04);
  margin-bottom:14px;
}
.sid-sp-pay-row {
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:10px;
  padding:5px 0;
  border-bottom:1px solid rgba(255,255,255,0.05);
}
.sid-sp-pay-row:last-child {
  border-bottom:none;
}
.sid-sp-pay-row-main {
  flex:1;
}
.sid-sp-pay-copy {
  border-radius:999px;
  border:1px solid rgba(255,255,255,0.2);
  background:transparent;
  color:#fff;
  font-size:11px;
  padding:5px 10px;
  cursor:pointer;
  text-transform:uppercase;
  letter-spacing:1px;
}
.sid-sp-pay-copy:hover {
  border-color:#e10600;
}
.sid-sp-pay-note {
  font-size:12px;
  color:#aaa;
  margin:4px 0 0;
}

/* Responsive */
@media (max-width: 640px) {
  .sid-sp-qr-card,
  .sid-sp-pay-card {
    padding:18px 14px 20px;
    border-radius:14px;
  }
  .sid-sp-qr-header,
  .sid-sp-pay-header {
    flex-direction:column;
    align-items:flex-start;
  }
  .sid-sp-qr-summary,
  .sid-sp-pay-summary {
    grid-template-columns:1fr;
  }
  .sid-sp-qr-add-visit-row {
    flex-direction:column;
  }
}