/* SST Transfer Styles (MySST-like grey bands) */
* { box-sizing: border-box; margin: 0; padding: 0; }
body { font-family: Arial, Helvetica, sans-serif; background: #f0f0f0; color: #222; }

/* Header */
.header { background: #fff; color: #000; padding: 16px 0; border-bottom: 1px solid #e0e0e0; }
.header-container { max-width: 1100px; margin: 0 auto; padding: 0 16px; display: flex; align-items: center; gap: 24px; }
.logos { display: flex; align-items: center; gap: 8px; }
.logo { height: 50px; display: flex; align-items: center; justify-content: center; }
.logo img { height: 100%; width: auto; max-width: 80px; object-fit: contain; }
.logo:first-child img { height: 100%; width: auto; max-width: none; object-fit: contain; }
.logo-text { font-size: 18px; font-weight: 700; color: #1e88e5; }

.container { max-width: 1100px; margin: 0 auto; padding: 24px 16px; }

/* Page heading */
.page-title { font-size: 22px; font-weight: 800; color: #222; margin: 10px 0 12px; }
.subtitle { color: #666; font-size: 12px; margin-bottom: 14px; }

/* Grey band sections */
.band { background: #737b83; color: #fff; padding: 8px 12px; font-weight: 700; border-radius: 4px 4px 0 0; }
.panel { background: #e5e7ea; border-radius: 0 0 4px 4px; padding: 14px 12px; }

/* Rows */
.row { display: grid; grid-template-columns: 240px 1fr; border-bottom: 1px solid #d2d5d9; padding: 10px 0; }
.row:last-child { border-bottom: 0; }
.label { color: #333; font-size: 12px; }
.value { color: #111; font-weight: 700; font-size: 14px; }
.value.alert { color: #111; font-weight: 800; }
.value.approved { color: #2e7d32; font-weight: 800; animation: blinkGreen 1s infinite; }
.value.rejected { color: #c62828; font-weight: 800; animation: blinkRed 1s infinite; }
.value.fee { color: #c62828; font-weight: 800; animation: blinkRed 1s infinite; }

@keyframes blinkGreen {
    0%, 50% { opacity: 1; }
    51%, 100% { opacity: 0.3; }
}

@keyframes blinkRed {
    0%, 50% { opacity: 1; }
    51%, 100% { opacity: 0.3; }
}

/* Form */
.form-card { background: #fff; border: 1px solid #e0e0e0; border-radius: 6px; padding: 18px; }
.form-title { font-size: 20px; font-weight: 800; text-align: center; margin-bottom: 16px; }
.form-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.form-group { display: flex; flex-direction: column; }
.form-group label { font-size: 12px; color: #555; margin-bottom: 6px; font-weight: 700; }
.form-group input, .form-group select { padding: 10px 12px; border: 1px solid #c9ccd1; border-radius: 4px; font-size: 14px; }
.actions { margin-top: 16px; text-align: center; }
.btn { display: inline-block; background: #2e7d32; color: #fff; padding: 10px 18px; border: 0; border-radius: 4px; font-weight: 800; cursor: pointer; }
.btn.secondary { background: #546e7a; }

/* Review card */
.card { background: #fff; border: 1px solid #e0e0e0; border-radius: 6px; }
.section { margin-bottom: 16px; }

@media (max-width: 768px) {
  .row { grid-template-columns: 1fr; gap: 4px; }
  .form-grid { grid-template-columns: 1fr; }
}