/*
 * calculator.css — Kinderalimentatie calculator
 * Simmelink Advocatenkantoor
 *
 * Gebruik CSS-variabelen uit style.css (:root)
 * Enqueue via functions.php: wp_enqueue_style('simmelink-calculator', ...)
 */


/* ============================================================
   1. FORMULIER WRAPPER
   Bouwt voort op .cf7-form uit style.css
   ============================================================ */

.calculator-form {
  width: 100%;
}

/* Rijen binnen het formulier */
/* Rijen binnen het formulier */
.calculator-form .form-row {
  margin-bottom: var(--space-m);
  text-align: left;
}

/* Label-rij: label en ⓘ naast elkaar */
.calculator-form .form-row > p:first-child {
  display: flex;
  align-items: center;
  gap: 0.35rem;
  margin-bottom: 0.3rem;
}

/* Labels */
.calculator-form label {
  display: inline;
  font-size: 1.05rem;
  font-weight: 600;
  color: var(--contrast-500);
}

/* ⓘ icoon trigger */
.tooltip-trigger {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  position: relative;
  font-size: 1.1rem;
  line-height: 1;
  color: var(--brand-2);
  cursor: help;
  user-select: none;
  flex-shrink: 0;
  transition: color 0.2s ease;
}

.tooltip-trigger:hover {
  color: var(--brand-1);
}

/* CF7 verwijdert de <br> tussen label en veld niet altijd */
.calculator-form label + br {
  display: none;
}

/* Alle invoervelden */
.calculator-form input[type="number"],
.calculator-form input[type="date"],
.calculator-form input[type="text"],
.calculator-form select {
  width: 100%;
  padding: 0.85rem 1rem;
  background: var(--base-100);
  border: 1px solid var(--base-400);
  border-radius: var(--radius-default);
  color: var(--contrast-500);
  font-size: 1.05rem;
  font-family: var(--ff-body);
  transition: border-color 0.2s ease, box-shadow 0.2s ease, background 0.2s ease;
  appearance: none;
  -webkit-appearance: none;
}

/* Hover */
.calculator-form input:hover,
.calculator-form select:hover {
  background: var(--base-200);
}

/* Focus */
.calculator-form input:focus-visible,
.calculator-form select:focus-visible {
  border-color: var(--brand-2);
  background: var(--base-100);
  box-shadow: 0 0 0 4px rgba(0, 94, 140, 0.15);
  outline: none;
}

/* CF7 validatiefout */
.calculator-form .wpcf7-not-valid {
  border-color: var(--error);
  background: #fff5f5;
}

.calculator-form .wpcf7-not-valid-tip {
  color: var(--error);
  font-size: 0.875rem;
  margin-top: 0.25rem;
  display: block;
}

/* Select: pijltje rechts */
.calculator-form select {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' stroke='%23404040' stroke-width='1.5' fill='none' stroke-linecap='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 1rem center;
  padding-right: 2.5rem;
  cursor: pointer;
}

/* Submit knop — volgt huisstijl primary button */
.calculator-form input[type="submit"],
.calculator-form .wpcf7-submit {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: var(--btn-pad-y) var(--btn-pad-x);
  background: linear-gradient(to bottom, var(--btn-grad-1), var(--btn-grad-2));
  color: var(--btn-fg);
  border: none;
  border-radius: var(--btn-radius);
  font-size: var(--btn-font-size);
  font-weight: 600;
  font-family: var(--ff-body);
  min-height: var(--btn-min-height);
  cursor: pointer;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.08);
  transition: background 0.3s ease, box-shadow 0.3s ease, transform 0.2s ease;
  margin-top: var(--space-s);
}

.calculator-form input[type="submit"]:hover,
.calculator-form .wpcf7-submit:hover {
  background: linear-gradient(to bottom, var(--btn-grad-1-hover), var(--btn-grad-2-hover));
  box-shadow: 0 12px 24px -12px rgba(0, 0, 0, 0.22);
  transform: translateY(-2px);
}

.calculator-form input[type="submit"]:active,
.calculator-form .wpcf7-submit:active {
  transform: translateY(0);
}

/* CF7 spinner tijdens verzenden */
.calculator-form .wpcf7-spinner {
  margin-left: 0.5rem;
  vertical-align: middle;
}

/* CF7 response output verbergen (wij tonen resultaten zelf via AJAX) */
.calculator-form .wpcf7-response-output {
  display: none !important;
}


/* ============================================================
   2. TOOLTIPS (.question-mark + .tooltip-trigger)
   ============================================================ */

.question-mark {
  position: relative;
}

.question-mark .wpcf7-form-control-wrap {
  position: relative;
  display: block;
}

/* ⓘ icoon trigger — staat naast het label */
.tooltip-trigger {
  display: inline-flex !important;
  align-items: center;
  justify-content: center;
  position: relative;
  margin-left: 0.4rem;
  font-size: 1rem;
  line-height: 1;
  color: var(--brand-2) !important;
  cursor: help;
  user-select: none;
  vertical-align: middle;
  transition: color 0.2s ease;
  font-weight: normal;
}

.tooltip-trigger:hover {
  color: var(--brand-1) !important;
}

/* Tooltip box */
.tooltiptext {
  display: none;
  position: absolute;
  left: 0;
  top: calc(100% + 6px);
  z-index: 200;
  background: var(--brand-1);
  color: #ffffff;
  padding: 0.75rem 1rem;
  border-radius: var(--radius-default);
  font-size: 0.82rem;
  line-height: 1.5;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.18);
  pointer-events: none;
}

.tooltiptext p,
.tooltiptext li,
.tooltiptext strong {
  color: #ffffff;
  font-size: 0.82rem;
  line-height: 1.5;
  margin-bottom: 0.4rem;
}

.tooltiptext strong {
  font-weight: 700;
}

.tooltiptext ul {
  padding-left: 1rem;
  margin: 0.25rem 0;
}

.tooltiptext.medium { width: 260px; }
.tooltiptext.big    { width: 320px; }

/* Pijltje boven tooltip */
.tooltiptext::before {
  content: "";
  position: absolute;
  top: -6px;
  left: 0.6rem;
  border-left: 6px solid transparent;
  border-right: 6px solid transparent;
  border-bottom: 6px solid var(--brand-1);
}

/* Tooltip op mobiel: volledige breedte */
@media (max-width: 600px) {
  .tooltiptext.medium,
  .tooltiptext.big {
    width: calc(100vw - 3rem);
    left: 0;
  }
}


/* ============================================================
   3. RESULTATEN TABEL (#alimony_results)
   Breidt de bestaande stijl in style.css uit
   ============================================================ */

#alimony_results_wrapper {
  margin-top: var(--space-xl);
}

#alimony_results {
  animation: fadeInUp 0.4s ease both;
}

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

#alimony_results h3 {
  color: var(--brand-1);
  font-family: var(--ff-display);
  margin-top: var(--space-l);
  margin-bottom: var(--space-s);
}

#alimony_results h3:first-child {
  margin-top: 0;
}

/* Tabel — bouwt voort op de bestaande regels in style.css */
#alimony_results table {
  width: 100%;
  border-collapse: collapse;
  margin-bottom: var(--space-l);
  font-size: 1rem;
}

#alimony_results table th,
#alimony_results table td {
  border: 0;
  border-bottom: 1px solid rgba(0, 0, 0, 0.08);
  padding: 0.75rem 0.625rem;
  background: var(--base-100);
  vertical-align: middle;
}

#alimony_results table th {
  text-align: left;
  width: 50%;
  font-weight: 600;
  color: var(--contrast-500);
}

#alimony_results table td {
  text-align: center;
}

#alimony_results table .currency {
  text-align: right;
}

/* Uitgelichte rij (alimentatiebedrag) */
#alimony_results table .highlighted th,
#alimony_results table .highlighted td {
  background: var(--brand-3);  /* lichtblauw #ddebf9 */
  font-size: 1.05rem;
}

/* Zebra-striping voor leesbaarheid */
#alimony_results table tbody tr:nth-child(even) th,
#alimony_results table tbody tr:nth-child(even) td {
  background: var(--base-200);
}

/* Highlighted overschrijft zebra */
#alimony_results table .highlighted th,
#alimony_results table .highlighted td {
  background: var(--brand-3) !important;
}

/* Laadtekst */
#alimony_results_wrapper p em {
  color: var(--contrast-300);
  font-size: 0.95rem;
}

/* Foutmelding */
#alimony_results_wrapper .error {
  color: var(--error);
  font-weight: 500;
}

/* Mobiel: tabel scrollbaar als het te breed wordt */
@media (max-width: 600px) {
  #alimony_results table {
    display: block;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
  }

  #alimony_results table th {
    width: auto;
    min-width: 140px;
  }
}


/* ============================================================
   4. OPTIONEEL E-MAILBLOK
   ============================================================ */

#alimony_email_section {
  margin-top: var(--space-xl);
  padding: var(--space-l);
  background: var(--surface-accent);   /* brand-3 lichtblauw */
  border: 1px solid var(--brand-3);
  border-radius: var(--radius-default);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.06);
  animation: fadeInUp 0.4s ease both;
}

#alimony_email_section h3 {
  color: var(--brand-1);
  font-family: var(--ff-display);
  margin-top: 0;
  margin-bottom: var(--space-xs);
  font-size: clamp(1.1rem, 2vw, 1.4rem);
}

#alimony_email_section p {
  color: var(--contrast-300);
  font-size: 0.95rem;
  margin-bottom: var(--space-m);
}

/* Inputrijen */
.alimony-email-row {
  display: flex;
  gap: var(--space-s);
  margin-bottom: var(--space-s);
  flex-wrap: wrap;
}

#alimony_email_section input[type="text"],
#alimony_email_section input[type="email"],
#alimony_email_section input[type="tel"] {
  flex: 1 1 200px;
  padding: 0.75rem 1rem;
  background: var(--base-100);
  border: 1px solid var(--base-400);
  border-radius: var(--radius-default);
  color: var(--contrast-500);
  font-size: 1rem;
  font-family: var(--ff-body);
  transition: border-color 0.2s ease, box-shadow 0.2s ease;
}

#alimony_email_section input:focus-visible {
  border-color: var(--brand-2);
  box-shadow: 0 0 0 4px rgba(0, 94, 140, 0.15);
  outline: none;
}

/* Verzendknop */
#alimony_email_submit {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  margin-top: var(--space-s);
  padding: var(--btn-pad-y) var(--btn-pad-x);
  background: var(--brand-1);
  color: var(--contrast-100);
  border: none;
  border-radius: var(--btn-radius);
  font-size: var(--btn-font-size);
  font-weight: 600;
  font-family: var(--ff-body);
  cursor: pointer;
  transition: background 0.2s ease, transform 0.2s ease, box-shadow 0.2s ease;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.1);
}

#alimony_email_submit:hover {
  background: var(--brand-2);
  transform: translateY(-2px);
  box-shadow: 0 8px 16px rgba(0, 0, 0, 0.15);
}

#alimony_email_submit:disabled {
  opacity: 0.6;
  cursor: default;
  transform: none;
}

/* Feedback bericht */
#alimony_email_feedback {
  margin-top: var(--space-s);
  font-size: 0.95rem;
}

#alimony_email_feedback p {
  margin: 0;
  padding: 0.5rem 0.75rem;
  border-radius: var(--radius-default);
}

#alimony_email_feedback p[style*="green"] {
  background: rgba(46, 125, 50, 0.08);
  color: var(--success);
  border: 1px solid rgba(46, 125, 50, 0.2);
}

#alimony_email_feedback p[style*="red"] {
  background: rgba(198, 40, 40, 0.06);
  color: var(--error);
  border: 1px solid rgba(198, 40, 40, 0.2);
}

/* Mobiel */
@media (max-width: 600px) {
  .alimony-email-row {
    flex-direction: column;
  }

  #alimony_email_submit {
    width: 100%;
  }
}


/* ============================================================
   5. LAADINDICATOR
   ============================================================ */

.alimony-loading {
  display: flex;
  align-items: center;
  gap: var(--space-s);
  color: var(--contrast-300);
  font-size: 0.95rem;
  padding: var(--space-m) 0;
}

.alimony-loading::before {
  content: "";
  display: inline-block;
  width: 20px;
  height: 20px;
  border: 2px solid var(--base-400);
  border-top-color: var(--brand-2);
  border-radius: 50%;
  animation: spin 0.7s linear infinite;
  flex-shrink: 0;
}

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