/* WPQuotePro Acceptance Form Styles */

.wpquotepro-acceptance {
  min-height: 100vh;
  background: linear-gradient(to bottom, #f3f4f6, #ffffff);
  padding: 2rem 1rem;
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen,
    Ubuntu, Cantarell, sans-serif;
}

.wpquotepro-acceptance-inner {
  max-width: 600px;
  margin: 0 auto;
}

.wpquotepro-state {
  animation: fadeIn 0.3s ease-in-out;
}

@keyframes fadeIn {
  from {
    opacity: 0;
    transform: translateY(10px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* Spinner */
.wpquotepro-spinner {
  width: 3rem;
  height: 3rem;
  border: 3px solid #e5e7eb;
  border-top-color: #3b82f6;
  border-radius: 50%;
  animation: spin 1s linear infinite;
  margin: 0 auto 1rem;
}

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

/* Header */
.wpquotepro-header {
  text-align: center;
  margin-bottom: 2rem;
}

.wpquotepro-header h1 {
  font-size: 1.875rem;
  font-weight: bold;
  color: #111827;
  margin: 0 0 0.5rem 0;
}

.wpquotepro-header p {
  font-size: 1.125rem;
  color: #4b5563;
  margin: 0;
}

/* Card */
.wpquotepro-card {
  background: white;
  border-radius: 0.5rem;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
  border: 1px solid #e5e7eb;
  padding: 2rem;
  margin-bottom: 2rem;
}

/* Grid */
.wpquotepro-grid-2 {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1.5rem;
}

@media (max-width: 640px) {
  .wpquotepro-grid-2 {
    grid-template-columns: 1fr;
  }
}

.wpquotepro-right {
  text-align: right;
}

@media (max-width: 640px) {
  .wpquotepro-right {
    text-align: left;
  }
}

/* Labels and Values */
.wpquotepro-label {
  font-size: 0.875rem;
  font-weight: 600;
  color: #6b7280;
  margin: 0 0 0.25rem 0;
}

.wpquotepro-value {
  font-size: 1.5rem;
  font-weight: bold;
  color: #111827;
  margin: 0;
}

.wpquotepro-value-bold {
  font-size: 1rem;
  font-weight: 600;
  color: #111827;
  margin: 0;
}

/* Divider */
.wpquotepro-divider {
  height: 1px;
  background-color: #e5e7eb;
  margin: 1.5rem 0;
}

/* Info Box */
.wpquotepro-info-box {
  background-color: #dbeafe;
  border: 1px solid #93c5fd;
  border-radius: 0.375rem;
  padding: 1rem;
  margin-top: 1.5rem;
}

.wpquotepro-info-box p {
  font-size: 0.875rem;
  color: #1e40af;
  margin: 0;
}

/* Steps */
.wpquotepro-card h2 {
  font-size: 1.25rem;
  font-weight: 600;
  color: #111827;
  margin: 0 0 1rem 0;
}

.wpquotepro-card > p {
  color: #4b5563;
  margin-bottom: 1.5rem;
}

.wpquotepro-steps {
  display: flex;
  flex-direction: column;
  gap: 1rem;
}

.wpquotepro-step {
  display: flex;
  gap: 1rem;
}

.wpquotepro-step-number {
  width: 2rem;
  height: 2rem;
  background-color: #dbeafe;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 600;
  color: #1e40af;
  flex-shrink: 0;
}

.wpquotepro-step-title {
  font-weight: 600;
  color: #111827;
  margin: 0 0 0.25rem 0;
}

.wpquotepro-step-desc {
  font-size: 0.875rem;
  color: #6b7280;
  margin: 0;
}

/* Success Icon */
.wpquotepro-success-icon {
  width: 3rem;
  height: 3rem;
  background-color: #dcfce7;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.5rem;
  color: #16a34a;
  margin: 0 auto 1.5rem;
}

/* Error Icon */
.wpquotepro-error-icon {
  width: 3rem;
  height: 3rem;
  background-color: #fee2e2;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.5rem;
  color: #dc2626;
  margin: 0 auto 1.5rem;
}

/* Actions */
.wpquotepro-actions {
  display: flex;
  gap: 1rem;
  justify-content: center;
  margin-top: 2rem;
}

@media (max-width: 640px) {
  .wpquotepro-actions {
    flex-direction: column;
  }
}

/* Buttons */
.wpquotepro-btn {
  padding: 0.875rem 2rem;
  border-radius: 0.375rem;
  font-weight: 600;
  font-size: 0.875rem;
  border: none;
  cursor: pointer;
  transition: all 0.3s ease;
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
}

.wpquotepro-btn:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

.wpquotepro-btn-primary {
  background-color: #16a34a;
  color: white;
}

.wpquotepro-btn-primary:hover:not(:disabled) {
  background-color: #15803d;
}

.wpquotepro-btn-secondary {
  background-color: #d1d5db;
  color: #111827;
  border: 2px solid #d1d5db;
}

.wpquotepro-btn-secondary:hover:not(:disabled) {
  background-color: #e5e7eb;
  border-color: #e5e7eb;
}

/* ── De offerte op het scherm ─────────────────────────────────────────────
   Zelfde opbouw als de PDF: kop met bedrijf, de regels, de totalen. Wie hier
   ja tegen zegt hoort te kunnen zien waar hij ja tegen zegt, zonder eerst een
   bestand te openen. Op een telefoon wordt de tabel een lijstje, want vier
   kolommen passen daar niet zonder alles onleesbaar te maken. */
.wpquotepro-quote { --wpqp-brand: #1D9E75; }

.wpquotepro-quote-head {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 1.5rem;
  flex-wrap: wrap;
  padding-bottom: 1rem;
  border-bottom: 2px solid var(--wpqp-brand);
}

.wpquotepro-quote-logo { max-height: 56px; max-width: 200px; display: block; margin-bottom: 0.5rem; }
.wpquotepro-quote-company { font-size: 1.05rem; font-weight: 700; margin: 0; color: #1f2937; }
.wpquotepro-quote-meta { text-align: right; }
.wpquotepro-quote-number { font-size: 1.05rem; font-weight: 700; margin: 0.15rem 0 0; color: var(--wpqp-brand); }
.wpquotepro-quote-dates { font-size: 0.8125rem; color: #6b7280; margin: 0.15rem 0 0; }
.wpquotepro-quote-for { padding: 1rem 0; border-bottom: 1px solid #e5e7eb; }

.wpquotepro-quote-table {
  width: 100%;
  border-collapse: collapse;
  margin-top: 1rem;
  font-size: 0.9375rem;
}
.wpquotepro-quote-table th {
  text-align: left;
  font-size: 0.6875rem;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: #6b7280;
  font-weight: 600;
  padding: 0.5rem 0.5rem 0.5rem 0;
  border-bottom: 1px solid #e5e7eb;
}
.wpquotepro-quote-table td {
  padding: 0.625rem 0.5rem 0.625rem 0;
  border-bottom: 1px solid #f3f4f6;
  vertical-align: top;
  color: #1f2937;
}
.wpquotepro-quote-table .wpquotepro-num,
.wpquotepro-quote-totals .wpquotepro-num {
  text-align: right;
  white-space: nowrap;
  font-variant-numeric: tabular-nums;
  padding-right: 0;
}
/* 1.9.4: zonder deze ruimte stonden aantal, prijs en bedrag tegen elkaar
   ("1 € 1.100,00 € 1.100,00"). */
.wpquotepro-quote-table .wpquotepro-num {
  padding-left: 1rem;
}
.wpquotepro-quote-group td {
  font-weight: 600;
  background: #f9fafb;
  padding-left: 0.5rem;
}
.wpquotepro-quote-info td { color: #6b7280; font-style: italic; }
.wpquotepro-quote-code { display: block; font-size: 0.75rem; color: #9ca3af; font-style: normal; }

.wpquotepro-quote-totals {
  width: 100%;
  max-width: 22rem;
  margin: 1rem 0 0 auto;
  border-collapse: collapse;
  font-size: 0.9375rem;
}
.wpquotepro-quote-totals td { padding: 0.375rem 0; color: #4b5563; }
.wpquotepro-quote-total td {
  font-weight: 700;
  font-size: 1.0625rem;
  color: var(--wpqp-brand);
  border-top: 2px solid var(--wpqp-brand);
  padding-top: 0.625rem;
}
.wpquotepro-quote-valid { margin-top: 1.25rem; font-size: 0.9375rem; color: #4b5563; }
.wpquotepro-quote-pdf { margin: 0.25rem 0 1rem; font-size: 0.875rem; }

/* Knoppen: op een telefoon onder elkaar en over de volle breedte, met lucht
   ertussen. Naast elkaar geperst raak je op een klein scherm de verkeerde. */
.wpquotepro-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem;
  justify-content: flex-end;
  align-items: center;
  margin-top: 1.5rem;
}
.wpquotepro-actions .wpquotepro-btn { margin: 0; }

@media (max-width: 640px) {
  .wpquotepro-quote-head { flex-direction: column; }
  .wpquotepro-quote-meta { text-align: left; }

  /* Vier kolommen op een telefoon leest niemand. Elke regel wordt een blokje
     met de omschrijving boven en het bedrag eronder. */
  .wpquotepro-quote-table thead { display: none; }
  .wpquotepro-quote-table,
  .wpquotepro-quote-table tbody,
  .wpquotepro-quote-table tr,
  .wpquotepro-quote-table td { display: block; width: 100%; }
  .wpquotepro-quote-table tr {
    padding: 0.5rem 0;
    border-bottom: 1px solid #f3f4f6;
  }
  .wpquotepro-quote-table td { border: none; padding: 0.125rem 0; }
  .wpquotepro-quote-table .wpquotepro-num { text-align: left; font-size: 0.875rem; color: #4b5563; }
  .wpquotepro-quote-table .wpquotepro-num:empty { display: none; }
  /* Zonder tabelkop weet je niet meer wat 1, € 85,00 en € 85,00 betekenen. */
  .wpquotepro-quote-table td[data-label]::before {
    content: attr(data-label) ': ';
    color: #9ca3af;
  }
  .wpquotepro-quote-table .wpquotepro-bedrag { font-weight: 600; color: #1f2937; }
  .wpquotepro-quote-totals { max-width: none; margin-left: 0; }

  .wpquotepro-actions { flex-direction: column-reverse; align-items: stretch; }
  .wpquotepro-actions .wpquotepro-btn { width: 100%; justify-content: center; }
}

/* Afwijzen. Bewust ingetogen: geen rode alarmknop naast het akkoord, want
   afwijzen is een geldig antwoord en geen fout. Wel duidelijk anders dan de
   accepteerknop, zodat je niet per ongeluk de verkeerde raakt. */
.wpquotepro-btn-reject {
  background-color: transparent;
  color: #7f1d1d;
  border: 2px solid #e7c9c9;
}

.wpquotepro-btn-reject:hover:not(:disabled) {
  background-color: #fdf2f2;
  border-color: #d9a5a5;
}

.wpquotepro-textarea {
  width: 100%;
  margin: 1rem 0;
  padding: 0.75rem;
  border: 1px solid #d1d5db;
  border-radius: 0.375rem;
  font-family: inherit;
  font-size: 0.9375rem;
  line-height: 1.5;
  resize: vertical;
  box-sizing: border-box;
}

.wpquotepro-textarea:focus {
  outline: 2px solid #9ca3af;
  outline-offset: 1px;
  border-color: #9ca3af;
}

/* Responsive */
@media (max-width: 768px) {
  .wpquotepro-card {
    padding: 1.5rem;
  }

  .wpquotepro-header h1 {
    font-size: 1.5rem;
  }

  .wpquotepro-btn {
    width: 100%;
    justify-content: center;
  }
}