/* =============================================================
   ITR Computation PDF Generator – Frontend Styles
   ============================================================= */

/* ── Wrap ─────────────────────────────────────────────────── */
.itr-pdf-wrap {
  max-width: 900px;
  margin: 0 auto;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Arial, sans-serif;
  font-size: 14px;
  color: #1a1a2e;
}

/* ── Card ─────────────────────────────────────────────────── */
.itr-card {
  background: #fff;
  border: 1px solid #dde3ee;
  border-radius: 12px;
  box-shadow: 0 4px 24px rgba(26, 60, 94, 0.08);
  overflow: hidden;
  margin-bottom: 24px;
}

.itr-card-header {
  padding: 28px 32px 20px;
  border-bottom: 1px solid #eef1f8;
  background: linear-gradient(135deg, #f0f4ff 0%, #e8f0fb 100%);
}

.itr-result-header {
  background: linear-gradient(135deg, #f0fff4 0%, #e6f9ee 100%);
  border-color: #c3e6cb;
}

.itr-icon {
  font-size: 32px;
  display: block;
  margin-bottom: 8px;
}

.itr-card-header h2 {
  margin: 0 0 6px;
  font-size: 20px;
  font-weight: 700;
  color: #1a3c5e;
}

.itr-subtitle {
  margin: 0;
  color: #5a6a7e;
  font-size: 13px;
  line-height: 1.5;
}

/* ── Dropzone ─────────────────────────────────────────────── */
.itr-dropzone {
  margin: 24px 32px;
  border: 2px dashed #a0b4d0;
  border-radius: 10px;
  padding: 36px 24px;
  text-align: center;
  background: #f8faff;
  transition: border-color 0.2s, background 0.2s;
  cursor: pointer;
  outline: none;
}

.itr-dropzone:hover,
.itr-dropzone:focus,
.itr-dropzone.dragover {
  border-color: #1a6ccd;
  background: #edf4ff;
}

.itr-dropzone-icon {
  font-size: 42px;
  margin-bottom: 10px;
}

.itr-dropzone-main {
  font-size: 15px;
  font-weight: 600;
  color: #1a3c5e;
  margin: 0 0 4px;
}

.itr-dropzone-sub {
  color: #8a9bb0;
  margin: 4px 0;
  font-size: 13px;
}

.itr-dropzone-hint {
  margin: 12px 0 0;
  font-size: 11.5px;
  color: #8a9bb0;
}

/* ── File info bar ────────────────────────────────────────── */
.itr-file-info {
  display: flex;
  align-items: center;
  gap: 12px;
  margin: 0 32px 16px;
  padding: 12px 16px;
  background: #edf4ff;
  border: 1px solid #c2d9f8;
  border-radius: 8px;
}

.itr-file-icon { font-size: 22px; }

.itr-file-details {
  flex: 1;
  display: flex;
  flex-direction: column;
}

.itr-file-name {
  font-weight: 600;
  color: #1a3c5e;
  font-size: 13px;
  word-break: break-all;
}

.itr-file-size {
  font-size: 11.5px;
  color: #5a6a7e;
  margin-top: 2px;
}

.itr-btn-icon {
  background: none;
  border: none;
  cursor: pointer;
  font-size: 16px;
  color: #8a9bb0;
  padding: 4px 6px;
  border-radius: 4px;
  transition: color 0.15s, background 0.15s;
}
.itr-btn-icon:hover { color: #c0392b; background: #fdecea; }

/* ── Alert ────────────────────────────────────────────────── */
.itr-alert {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  margin: 0 32px 16px;
  padding: 10px 14px;
  border-radius: 8px;
  font-size: 13px;
  line-height: 1.6;
}

.itr-alert-error {
  background: #fdecea;
  border: 1px solid #f5c6cb;
  color: #721c24;
}

.itr-alert-warning {
  background: #fff8e1;
  border: 1px solid #ffe0a3;
  color: #6b4f00;
}

.itr-alert-info {
  background: #e7f3ff;
  border: 1px solid #b6dcff;
  color: #1a3c5e;
}

.itr-alert-icon { font-size: 16px; flex-shrink: 0; }

/* Alerts placed after the summary grid (parse warnings, restore banner)
   sit in a full-width context with no card padding — give them their own
   horizontal margin instead of inheriting the upload-card's 32px. */
#itr-parse-warnings,
#itr-restore-banner {
  margin: 16px 24px;
}

/* ── Disabled state for unlock-dependent buttons ─────────────── */
.itr-btn:disabled,
.itr-btn[disabled] {
  opacity: 0.55;
  cursor: not-allowed;
  pointer-events: none;
}

/* ── Buttons ──────────────────────────────────────────────── */
.itr-actions {
  padding: 0 32px 28px;
  display: flex;
  justify-content: flex-end;
}

.itr-btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 10px 22px;
  border-radius: 7px;
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
  border: 2px solid transparent;
  transition: all 0.18s;
  text-decoration: none;
  line-height: 1.4;
}

.itr-btn-primary {
  background: #1a6ccd;
  color: #fff;
  border-color: #1a6ccd;
}
.itr-btn-primary:hover:not(:disabled) {
  background: #155ca8;
  border-color: #155ca8;
  color: #fff;
}
.itr-btn-primary:disabled {
  background: #a0b4d0;
  border-color: #a0b4d0;
  cursor: not-allowed;
  opacity: 0.7;
}

.itr-btn-secondary {
  background: #28a745;
  color: #fff;
  border-color: #28a745;
}
.itr-btn-secondary:hover {
  background: #218838;
  border-color: #218838;
  color: #fff;
}

.itr-btn-outline {
  background: #fff;
  color: #1a6ccd;
  border-color: #1a6ccd;
}
.itr-btn-outline:hover {
  background: #edf4ff;
  color: #155ca8;
}

.itr-btn-sm {
  padding: 5px 12px;
  font-size: 12px;
}

/* ── Spinner ──────────────────────────────────────────────── */
.itr-spinner {
  width: 16px;
  height: 16px;
  border: 2px solid rgba(255,255,255,0.4);
  border-top-color: #fff;
  border-radius: 50%;
  animation: itr-spin 0.7s linear infinite;
  display: inline-block;
}

@keyframes itr-spin {
  to { transform: rotate(360deg); }
}

/* ── Summary grid ─────────────────────────────────────────── */
.itr-summary-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 0;
  margin: 0;
  border-bottom: 1px solid #eef1f8;
}

.itr-summary-item {
  padding: 16px 24px;
  border-right: 1px solid #eef1f8;
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.itr-summary-item:last-child { border-right: none; }

.itr-sum-label {
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  color: #8a9bb0;
  font-weight: 600;
}

.itr-sum-val {
  font-size: 14px;
  font-weight: 700;
  color: #1a3c5e;
  word-break: break-all;
}

/* ── Preview ──────────────────────────────────────────────── */
.itr-preview-wrap {
  border-top: 1px solid #eef1f8;
  border-bottom: 1px solid #eef1f8;
}

.itr-preview-toolbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 10px 20px;
  background: #f8faff;
  border-bottom: 1px solid #eef1f8;
}

.itr-preview-label {
  font-weight: 600;
  font-size: 13px;
  color: #1a3c5e;
}

.itr-preview-frame {
  width: 100%;
  height: 600px;
  border: none;
  display: block;
  background: #fff;
}

/* ── Export bar ───────────────────────────────────────────── */
.itr-export-bar {
  padding: 20px 24px;
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  align-items: center;
  border-bottom: 1px solid #eef1f8;
}

.itr-print-tip {
  padding: 12px 24px 18px;
  font-size: 12px;
  color: #5a6a7e;
  line-height: 1.6;
}

/* ── Responsive ───────────────────────────────────────────── */
@media (max-width: 640px) {
  .itr-card-header,
  .itr-dropzone,
  .itr-file-info,
  .itr-alert,
  .itr-actions {
    padding-left: 16px;
    padding-right: 16px;
    margin-left: 0;
    margin-right: 0;
  }
  .itr-dropzone { margin: 16px; }
  .itr-file-info, .itr-alert { margin: 0 16px 12px; }
  .itr-summary-grid { grid-template-columns: 1fr 1fr; }
  .itr-preview-frame { height: 420px; }
  .itr-export-bar { flex-direction: column; align-items: stretch; }
  .itr-btn { justify-content: center; }
}

@media (max-width: 420px) {
  .itr-summary-grid { grid-template-columns: 1fr; }
}

/* ── Admin page override ──────────────────────────────────── */
.wrap .itr-pdf-wrap { max-width: 100%; }

/* =============================================================
   Payment Gate Styles  (v2 additions)
   ============================================================= */

/* ── Preview blur & gate overlay ─────────────────────────────── */
.itr-preview-wrap { position: relative; }

.itr-preview-blurred {
  filter: blur(6px) brightness(0.92);
  pointer-events: none;
  transition: filter 0.5s ease;
}

.itr-preview-gate {
  position: absolute;
  inset: 0;
  background: rgba(10, 20, 40, 0.55);
  backdrop-filter: blur(2px);
  z-index: 10;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 0 0 4px 4px;
}

.itr-gate-content {
  background: #fff;
  border-radius: 12px;
  padding: 32px 36px;
  text-align: center;
  max-width: 380px;
  box-shadow: 0 8px 40px rgba(0,0,0,0.3);
}

.itr-gate-lock {
  font-size: 40px;
  margin-bottom: 10px;
}

.itr-gate-content h3 {
  font-size: 18px;
  color: #1a3c5e;
  margin: 0 0 8px;
}

.itr-gate-content p {
  color: #5a6a7e;
  font-size: 13px;
  margin: 0 0 18px;
  line-height: 1.5;
}

.itr-gate-security {
  font-size: 11px !important;
  color: #8a9bb0 !important;
  margin-top: 12px !important;
}

/* ── Pay button ───────────────────────────────────────────────── */
.itr-btn-pay {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 12px 28px;
  border-radius: 8px;
  font-size: 15px;
  font-weight: 700;
  cursor: pointer;
  border: none;
  background: linear-gradient(135deg, #f7971e 0%, #ffd200 100%);
  color: #1a2a00;
  box-shadow: 0 4px 16px rgba(247,151,30,0.35);
  transition: all 0.2s;
  letter-spacing: 0.3px;
}
.itr-btn-pay:hover {
  transform: translateY(-1px);
  box-shadow: 0 6px 22px rgba(247,151,30,0.45);
  background: linear-gradient(135deg, #ffc200 0%, #f7971e 100%);
}
.itr-btn-pay:active { transform: translateY(0); }

/* ── Export bar locked state ──────────────────────────────────── */
.itr-export-locked  { width: 100%; }
.itr-export-unlocked { width: 100%; }

.itr-pay-card {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 18px 24px;
  background: linear-gradient(135deg, #fff9ec 0%, #fff3cd 100%);
  border: 1px solid #ffc107;
  border-radius: 10px;
  flex-wrap: wrap;
}

.itr-pay-card-left {
  display: flex;
  align-items: center;
  gap: 14px;
  flex: 1;
  min-width: 200px;
}

.itr-pay-icon { font-size: 28px; }

.itr-pay-card-left strong {
  display: block;
  font-size: 14px;
  color: #1a3c5e;
  margin-bottom: 3px;
}

.itr-pay-desc {
  font-size: 12px;
  color: #5a6a7e;
  margin: 0;
}

.itr-secure-note {
  font-size: 11.5px;
  color: #8a9bb0;
  margin: 10px 24px 0;
  padding-bottom: 4px;
}

/* ── Unlocked export bar ──────────────────────────────────────── */
.itr-unlock-banner {
  padding: 12px 20px;
  background: #d4edda;
  border: 1px solid #c3e6cb;
  border-radius: 8px;
  color: #155724;
  font-weight: 600;
  font-size: 13px;
  margin-bottom: 14px;
}

.itr-export-btns {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}

.itr-export-bar {
  padding: 20px 24px;
  border-bottom: 1px solid #eef1f8;
}

/* ── Restart bar ──────────────────────────────────────────────── */
.itr-restart-bar {
  padding: 12px 24px 18px;
  display: flex;
  justify-content: flex-end;
}

/* ── Payment overlay ──────────────────────────────────────────── */
.itr-pay-overlay {
  position: fixed;
  inset: 0;
  background: rgba(10, 20, 40, 0.65);
  z-index: 99999;
  display: flex;
  align-items: center;
  justify-content: center;
}

.itr-pay-overlay-box {
  background: #fff;
  border-radius: 12px;
  padding: 36px 48px;
  text-align: center;
  box-shadow: 0 12px 60px rgba(0,0,0,0.3);
  min-width: 260px;
}

.itr-pay-spinner {
  width: 44px; height: 44px;
  border: 4px solid #dde3ee;
  border-top-color: #1a6ccd;
  border-radius: 50%;
  animation: itr-spin 0.8s linear infinite;
  margin: 0 auto 16px;
}

.itr-pay-overlay-box p {
  font-size: 14px;
  color: #1a3c5e;
  font-weight: 600;
  margin: 0;
}

/* ── Responsive tweaks ────────────────────────────────────────── */
@media (max-width: 640px) {
  .itr-pay-card  { flex-direction: column; align-items: flex-start; }
  .itr-pay-card  .itr-btn-pay { width: 100%; justify-content: center; }
  .itr-gate-content { padding: 24px 20px; }
  .itr-export-btns  { flex-direction: column; }
  .itr-export-btns .itr-btn { justify-content: center; }
}

/* ── Edit toggle active state ─────────────────────────────────── */
.itr-btn-editing {
  background: #1a6ccd !important;
  color: #fff !important;
  border-color: #1a6ccd !important;
}