/* Mr Repair Tracker — Frontend Styles */
:root {
  --mrt-bg:      #0a0a0f;
  --mrt-bg2:     #111118;
  --mrt-surface: #16161f;
  --mrt-border:  rgba(255,255,255,0.07);
  --mrt-accent:  #f97316;
  --mrt-text:    #e8e8f0;
  --mrt-muted:   #7a7a94;
  --mrt-green:   #22c55e;
  --mrt-r:       10px;
}

.mrt-wrap { padding: 2rem 0; font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif; }

.mrt-card {
  background: var(--mrt-surface);
  border: 1px solid var(--mrt-border);
  border-radius: var(--mrt-r);
  overflow: hidden;
  max-width: 700px;
  margin: 0 auto;
}

.mrt-card-header { padding: 1.5rem 1.75rem; border-bottom: 1px solid var(--mrt-border); background: var(--mrt-bg2); }
.mrt-card-title  { font-size: 1.1rem; font-weight: 700; color: var(--mrt-text); }
.mrt-card-sub    { font-size: 0.875rem; color: var(--mrt-muted); margin: 0.35rem 0 0; }

/* Fields */
.mrt-field { display: flex; flex-direction: column; gap: 0.4rem; margin-bottom: 1rem; }
.mrt-field label { font-size: 0.75rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.07em; color: var(--mrt-muted); }

.mrt-field input,
.mrt-field select,
.mrt-field textarea {
  background: var(--mrt-bg);
  border: 1px solid var(--mrt-border);
  border-radius: 6px;
  color: var(--mrt-text);
  font-family: inherit;
  font-size: 0.95rem;
  padding: 0.75rem 1rem;
  width: 100%;
  outline: none;
  transition: border-color 0.2s;
  appearance: none;
}
.mrt-field input:focus,
.mrt-field select:focus,
.mrt-field textarea:focus { border-color: var(--mrt-accent); }
.mrt-field input::placeholder,
.mrt-field textarea::placeholder { color: #2a2a3a; }
.mrt-field textarea { resize: vertical; }

/* Form body padding */
#mrt-enquiry-form, #mrt-approve-content, #mrt-rate-content { padding: 1.5rem 1.75rem; }

.mrt-grid-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 0 1rem; }
.mrt-full   { grid-column: 1 / -1; }

/* Buttons */
.mrt-btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 0.4rem;
  padding: 0.75rem 1.5rem; border-radius: 6px; font-size: 0.9rem; font-weight: 700;
  cursor: pointer; border: none; transition: all 0.2s; text-decoration: none;
}
.mrt-btn-primary  { background: var(--mrt-accent); color: #fff; }
.mrt-btn-primary:hover { background: #fb923c; transform: translateY(-1px); }
.mrt-btn-outline  { background: transparent; color: var(--mrt-text); border: 1px solid var(--mrt-border); }
.mrt-btn-outline:hover { border-color: var(--mrt-accent); color: var(--mrt-accent); }
.mrt-btn-full     { width: 100%; }
.mrt-btn:disabled { opacity: 0.5; cursor: not-allowed; transform: none; }

/* Track input row */
.mrt-track-input-row { display: flex; gap: 0.75rem; padding: 1.5rem 1.75rem; border-bottom: 1px solid var(--mrt-border); }
.mrt-track-input-row input {
  flex: 1; background: var(--mrt-bg); border: 1px solid var(--mrt-border); border-radius: 6px;
  color: var(--mrt-text); font-family: inherit; font-size: 0.95rem; padding: 0.7rem 1rem; outline: none;
}
.mrt-track-input-row input:focus { border-color: var(--mrt-accent); }

/* Track result */
#mrt-track-result { padding: 1.5rem 1.75rem; }

.mrt-job-status {
  display: flex; align-items: center; gap: 1rem; margin-bottom: 1.5rem;
  padding: 1rem 1.25rem; background: var(--mrt-bg2); border-radius: 8px;
  border: 1px solid var(--mrt-border);
}
.mrt-status-icon  { font-size: 2rem; }
.mrt-status-label { font-size: 1.2rem; font-weight: 800; }
.mrt-status-sub   { font-size: 0.8rem; color: var(--mrt-muted); }

/* Info table */
.mrt-info-table { width: 100%; border-collapse: collapse; margin-bottom: 1.5rem; }
.mrt-info-table td { padding: 0.6rem 0; border-bottom: 1px solid var(--mrt-border); font-size: 0.875rem; }
.mrt-info-table td:first-child { color: var(--mrt-muted); width: 140px; font-size: 0.75rem; text-transform: uppercase; letter-spacing: 0.06em; font-weight: 600; }
.mrt-info-table td:last-child  { color: var(--mrt-text); }

/* Timeline */
.mrt-timeline { position: relative; padding-left: 1.5rem; margin-bottom: 1.5rem; }
.mrt-timeline::before { content:''; position:absolute; left: 6px; top: 0; bottom: 0; width: 1px; background: var(--mrt-border); }
.mrt-tl-item { position: relative; margin-bottom: 1rem; }
.mrt-tl-dot  { position: absolute; left: -1.5rem; top: 4px; width: 12px; height: 12px; border-radius: 50%; border: 2px solid var(--mrt-bg); }
.mrt-tl-label { font-size: 0.85rem; font-weight: 700; color: var(--mrt-text); }
.mrt-tl-note  { font-size: 0.8rem; color: var(--mrt-muted); margin-top: 2px; }
.mrt-tl-time  { font-size: 0.72rem; color: #4a4a62; margin-top: 2px; font-family: monospace; }

/* Progress bar */
.mrt-progress { margin-bottom: 1.5rem; }
.mrt-progress-steps { display: flex; justify-content: space-between; margin-bottom: 0.5rem; }
.mrt-progress-step  { font-size: 0.65rem; text-align: center; color: var(--mrt-muted); flex: 1; text-transform: uppercase; letter-spacing: 0.05em; }
.mrt-progress-step.done   { color: var(--mrt-green); }
.mrt-progress-step.active { color: var(--mrt-accent); font-weight: 700; }
.mrt-progress-bar  { height: 4px; background: var(--mrt-border); border-radius: 4px; overflow: hidden; }
.mrt-progress-fill { height: 100%; background: linear-gradient(90deg, var(--mrt-accent), var(--mrt-green)); border-radius: 4px; transition: width 0.5s; }

/* Delivery choice */
.mrt-delivery-choice { display: flex; gap: 0.75rem; margin-bottom: 1rem; }
.mrt-delivery-option {
  flex: 1; padding: 1rem; background: var(--mrt-bg); border: 2px solid var(--mrt-border);
  border-radius: 8px; cursor: pointer; text-align: center; transition: all 0.2s;
}
.mrt-delivery-option:hover { border-color: var(--mrt-accent); }
.mrt-delivery-option.selected { border-color: var(--mrt-accent); background: rgba(249,115,22,0.08); }
.mrt-delivery-option .mrt-do-icon  { font-size: 1.75rem; margin-bottom: 0.4rem; }
.mrt-delivery-option .mrt-do-title { font-weight: 700; font-size: 0.9rem; color: var(--mrt-text); }
.mrt-delivery-option .mrt-do-sub   { font-size: 0.75rem; color: var(--mrt-muted); margin-top: 0.2rem; }

/* Stars */
.mrt-star-picker { display: flex; flex-direction: row-reverse; justify-content: center; gap: 0.25rem; padding: 1.5rem 0 0.5rem; }
.mrt-star-picker input { display: none; }
.mrt-star-picker label { font-size: 2.5rem; color: #2a2a3a; cursor: pointer; transition: color 0.15s; }
.mrt-star-picker input:checked ~ label,
.mrt-star-picker label:hover,
.mrt-star-picker label:hover ~ label { color: #facc15; }

/* Success / error boxes */
.mrt-success-box {
  text-align: center; padding: 2.5rem 1.5rem;
}
.mrt-success-icon { font-size: 3rem; margin-bottom: 0.75rem; }
.mrt-success-box h3 { color: var(--mrt-text); font-size: 1.4rem; margin: 0 0 0.5rem; }
.mrt-success-box p  { color: var(--mrt-muted); font-size: 0.9rem; margin: 0 0 1.5rem; }
.mrt-error-box { padding: 1.5rem; color: #fca5a5; background: rgba(248,113,113,0.1); border: 1px solid rgba(248,113,113,0.3); border-radius: 8px; margin: 1rem 1.75rem; }
.mrt-job-number-display { font-size: 1.75rem; font-weight: 900; color: var(--mrt-accent); letter-spacing: 0.05em; margin: 1rem 0; font-family: monospace; }
.mrt-loading { padding: 2rem; text-align: center; color: var(--mrt-muted); }

/* Cost highlight */
.mrt-cost-box {
  text-align: center; padding: 1.25rem; margin: 1rem 0;
  background: rgba(249,115,22,0.08); border: 1px solid rgba(249,115,22,0.2); border-radius: 8px;
}
.mrt-cost-amount { font-size: 2rem; font-weight: 900; color: var(--mrt-accent); }
.mrt-cost-label  { font-size: 0.75rem; color: var(--mrt-muted); text-transform: uppercase; letter-spacing: 0.08em; }

/* Msg inline */
.mrt-msg { padding: 0.75rem 1rem; border-radius: 6px; font-size: 0.875rem; margin: 0.75rem 1.75rem; }
.mrt-msg.success { background: rgba(34,197,94,0.1); border: 1px solid rgba(34,197,94,0.3); color: #86efac; }
.mrt-msg.error   { background: rgba(248,113,113,0.1); border: 1px solid rgba(248,113,113,0.3); color: #fca5a5; }

@media (max-width: 600px) {
  .mrt-grid-2 { grid-template-columns: 1fr; }
  .mrt-track-input-row { flex-direction: column; }
  .mrt-delivery-choice { flex-direction: column; }
}