/* Student ID Card Manager — Public Styles */
:root {
  --sicm-primary: #1a56db;
  --sicm-primary-light: #eff6ff;
  --sicm-success: #059669;
  --sicm-success-light: #ecfdf5;
  --sicm-danger: #dc2626;
  --sicm-danger-light: #fef2f2;
  --sicm-warning: #d97706;
  --sicm-warning-light: #fffbeb;
  --sicm-gray-100: #f3f4f6;
  --sicm-gray-200: #e5e7eb;
  --sicm-gray-500: #6b7280;
  --sicm-gray-700: #374151;
  --sicm-gray-900: #111827;
  --sicm-radius: 10px;
  --sicm-shadow: 0 4px 16px rgba(0,0,0,.08);
}

.sicm-public-wrap { max-width: 780px; margin: 0 auto; padding: 0 16px 40px; font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif; }

/* Step Indicator */
.sicm-steps {
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 32px;
  padding: 24px 0 0;
}
.sicm-step {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
}
.sicm-step-num {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: var(--sicm-gray-200);
  color: var(--sicm-gray-500);
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 700;
  font-size: 14px;
  transition: all .2s;
}
.sicm-step.active .sicm-step-num {
  background: var(--sicm-primary);
  color: #fff;
}
.sicm-step.done .sicm-step-num {
  background: var(--sicm-success);
  color: #fff;
}
.sicm-step-label { font-size: 12px; color: var(--sicm-gray-500); }
.sicm-step.active .sicm-step-label { color: var(--sicm-primary); font-weight: 600; }
.sicm-step-divider { flex: 1; height: 2px; background: var(--sicm-gray-200); margin: 0 8px; max-width: 80px; margin-bottom: 22px; }

/* Card */
.sicm-card {
  background: #fff;
  border-radius: var(--sicm-radius);
  box-shadow: var(--sicm-shadow);
  overflow: hidden;
}
.sicm-card-header {
  background: linear-gradient(135deg, var(--sicm-primary), #3b82f6);
  padding: 24px 28px;
  color: #fff;
}
.sicm-card-header h2 { margin: 0 0 4px; font-size: 20px; }
.sicm-card-header p  { margin: 0; opacity: .85; font-size: 14px; }

/* Form */
.sicm-form-section { padding: 24px 28px 0; }
.sicm-form-section h3 { font-size: 14px; font-weight: 700; color: var(--sicm-gray-500); text-transform: uppercase; letter-spacing: .5px; margin: 0 0 16px; padding-bottom: 8px; border-bottom: 1px solid var(--sicm-gray-200); }
.sicm-form-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.sicm-form-group { display: flex; flex-direction: column; gap: 6px; }
.sicm-full-width { grid-column: 1 / -1; }
.sicm-form-group label { font-size: 13px; font-weight: 600; color: var(--sicm-gray-700); }
.sicm-form-group input,
.sicm-form-group select,
.sicm-form-group textarea {
  padding: 10px 12px;
  border: 1.5px solid var(--sicm-gray-200);
  border-radius: 6px;
  font-size: 14px;
  color: var(--sicm-gray-900);
  transition: border-color .15s, box-shadow .15s;
  background: #fff;
  width: 100%;
  box-sizing: border-box;
}
.sicm-form-group input:focus,
.sicm-form-group select:focus,
.sicm-form-group textarea:focus {
  outline: none;
  border-color: var(--sicm-primary);
  box-shadow: 0 0 0 3px rgba(26,86,219,.15);
}
.sicm-form-group input.sicm-error { border-color: var(--sicm-danger); }
.required { color: var(--sicm-danger); }
.sicm-hint { font-size: 11px; color: var(--sicm-gray-500); margin: 0; }

/* Photo Upload */
.sicm-photo-upload-wrap { display: flex; flex-direction: column; align-items: flex-start; gap: 10px; }
.sicm-photo-preview {
  width: 110px;
  height: 130px;
  background: var(--sicm-gray-100);
  border: 2px dashed var(--sicm-gray-200);
  border-radius: 8px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  color: var(--sicm-gray-500);
  overflow: hidden;
}
.sicm-photo-preview .dashicons { font-size: 32px; }
.sicm-photo-preview p { font-size: 11px; margin: 4px 0 0; }
.sicm-photo-preview img { width: 100%; height: 100%; object-fit: cover; }

/* Buttons */
.sicm-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 11px 24px;
  border-radius: 7px;
  border: 2px solid transparent;
  font-size: 15px;
  font-weight: 600;
  cursor: pointer;
  text-decoration: none;
  transition: all .15s;
}
.sicm-btn-primary { background: var(--sicm-primary); color: #fff; }
.sicm-btn-primary:hover { background: var(--sicm-primary); filter: brightness(1.1); color: #fff; }
.sicm-btn-secondary { background: var(--sicm-gray-700); color: #fff; }
.sicm-btn-secondary:hover { filter: brightness(1.2); color: #fff; }
.sicm-btn-outline { background: transparent; border-color: var(--sicm-primary); color: var(--sicm-primary); }
.sicm-btn-outline:hover { background: var(--sicm-primary-light); }

/* Alerts */
.sicm-alert {
  padding: 12px 16px;
  border-radius: 6px;
  font-size: 14px;
  margin: 16px 28px;
}
.sicm-alert-error   { background: var(--sicm-danger-light); color: var(--sicm-danger); border: 1px solid #fecaca; }
.sicm-alert-success { background: var(--sicm-success-light); color: var(--sicm-success); border: 1px solid #a7f3d0; }
.sicm-alert-info    { background: var(--sicm-primary-light); color: var(--sicm-primary); border: 1px solid #bfdbfe; padding: 16px 20px; margin: 24px 28px; }

/* Form Submit */
.sicm-form-submit { padding: 20px 28px 28px; border-top: 1px solid var(--sicm-gray-200); margin-top: 24px; }

/* Payment Page */
.sicm-payment-info { display: flex; gap: 16px; padding: 24px 28px 0; }
.sicm-app-id-box, .sicm-amount-box {
  flex: 1;
  background: var(--sicm-gray-100);
  border-radius: 8px;
  padding: 16px;
  text-align: center;
}
.sicm-app-id-box p, .sicm-amount-box p { font-size: 12px; color: var(--sicm-gray-500); margin: 0 0 6px; }
.sicm-app-id-box strong { font-size: 20px; color: var(--sicm-primary); }
.sicm-amount-box strong { font-size: 28px; color: var(--sicm-success); }

.sicm-qr-section { padding: 20px 28px; text-align: center; }
.sicm-qr-image { max-width: 180px; height: auto; border: 2px solid var(--sicm-gray-200); border-radius: 8px; }
.sicm-upi-id { display: flex; align-items: center; justify-content: center; gap: 8px; font-size: 15px; margin-top: 12px; }
.sicm-copy-btn { background: var(--sicm-gray-100); border: 1px solid var(--sicm-gray-200); border-radius: 4px; padding: 3px 10px; cursor: pointer; font-size: 12px; }
.sicm-copy-btn:hover { background: var(--sicm-gray-200); }

.sicm-instructions { margin: 0 28px 20px; background: var(--sicm-warning-light); border: 1px solid #fde68a; border-radius: 8px; padding: 16px; }
.sicm-instructions h4 { margin: 0 0 8px; font-size: 14px; color: var(--sicm-warning); }
.sicm-instructions p { font-size: 13px; margin: 0; color: var(--sicm-gray-700); }

/* File Upload */
.sicm-form-group { padding: 0; }
.sicm-payment-form { padding: 0 28px 28px; }
#sicm-payment-form { padding: 0 28px 28px; }
#sicm-payment-form .sicm-form-group { padding: 16px 0 0; }
.sicm-file-upload {
  border: 2px dashed var(--sicm-gray-200);
  border-radius: 8px;
  padding: 24px;
  text-align: center;
  cursor: pointer;
  transition: border-color .15s;
  position: relative;
}
.sicm-file-upload:hover { border-color: var(--sicm-primary); }
.sicm-file-upload input[type="file"] { position: absolute; inset: 0; opacity: 0; cursor: pointer; width: 100%; height: 100%; }
.sicm-file-label .dashicons { font-size: 32px; color: var(--sicm-gray-500); }
.sicm-file-label p { margin: 4px 0 0; font-size: 14px; color: var(--sicm-gray-500); }

/* Success Card */
.sicm-success-card { text-align: center; padding: 40px 28px; }
.sicm-success-icon { width: 64px; height: 64px; background: var(--sicm-success); color: #fff; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 28px; margin: 0 auto 20px; }
.sicm-success-card h2 { color: var(--sicm-success); margin-bottom: 12px; }
.sicm-success-card p { color: var(--sicm-gray-500); font-size: 14px; }

/* Verify Card */
.sicm-verify-card { border-radius: var(--sicm-radius); overflow: hidden; border: 2px solid var(--sicm-gray-200); }
.sicm-verified   { border-color: var(--sicm-success); }
.sicm-unverified { border-color: var(--sicm-danger); }
.sicm-verify-badge { padding: 10px 20px; font-weight: 700; font-size: 16px; text-align: center; }
.sicm-verified .sicm-verify-badge   { background: var(--sicm-success-light); color: var(--sicm-success); }
.sicm-unverified .sicm-verify-badge { background: var(--sicm-danger-light); color: var(--sicm-danger); }
.sicm-verify-photo { text-align: center; padding: 16px; }
.sicm-verify-photo img { width: 100px; height: 120px; object-fit: cover; border-radius: 6px; border: 2px solid var(--sicm-gray-200); }
.sicm-verify-table { width: 100%; border-collapse: collapse; font-size: 14px; }
.sicm-verify-table th { padding: 10px 16px; background: var(--sicm-gray-100); font-weight: 600; color: var(--sicm-gray-700); text-align: left; width: 40%; border-bottom: 1px solid var(--sicm-gray-200); }
.sicm-verify-table td { padding: 10px 16px; border-bottom: 1px solid var(--sicm-gray-200); color: var(--sicm-gray-900); }

/* Download */
.sicm-download-info { padding: 24px 28px; }
.sicm-download-btns { display: flex; gap: 10px; flex-wrap: wrap; margin-top: 20px; }

/* Responsive */
@media (max-width: 600px) {
  .sicm-form-grid { grid-template-columns: 1fr; }
  .sicm-card-header { padding: 18px 20px; }
  .sicm-form-section { padding: 16px 20px 0; }
  .sicm-form-submit { padding: 16px 20px 20px; }
  .sicm-payment-info { flex-direction: column; }
}