/* PhoeniX demo planner — alle selectors staan onder .pxd zodat het thema van
   de site er niet in lekt en deze stijlen niets buiten het blok raken. */

.pxd {
  /* Huisstijl. Overschrijf deze in Elementor onder Geavanceerd > Aangepaste CSS,
     of pas ze hier aan. Verder hoeft er aan deze stylesheet niets te gebeuren. */
  --pxd-merk:      #0E9F6E;
  --pxd-merk-diep: #0B7D57;
  --pxd-inkt:      #10231F;
  --pxd-zacht:     #5B6F6A;
  --pxd-papier:    #FFFFFF;
  --pxd-paneel:    #F1F5F3;
  --pxd-lijn:      #DCE5E1;
  --pxd-fout:      #A3341F;
  --pxd-radius:    10px;

  font-family: inherit;     /* neemt het lettertype van de site over */
  color: var(--pxd-inkt);
  line-height: 1.55;
  text-align: left;
  box-sizing: border-box;
}
.pxd *, .pxd *::before, .pxd *::after { box-sizing: inherit; }
.pxd p { margin: 0; }
.pxd h2, .pxd h3, .pxd h4 { margin: 0; font-weight: 700; letter-spacing: -.02em; line-height: 1.2; }
.pxd :focus-visible { outline: 2px solid var(--pxd-merk); outline-offset: 2px; border-radius: 3px; }

/* ---------- knop die de planner opent ---------- */
.pxd-start { text-align: center; padding: 8px 0; }
.pxd-start h2 { font-size: clamp(1.4rem, 1.1rem + 1vw, 1.9rem); max-width: 20ch; margin-inline: auto; }
.pxd-start .pxd-onder { margin-top: 12px; color: var(--pxd-zacht); }
.pxd-start .pxd-fijn { margin-top: 14px; font-size: .85rem; color: var(--pxd-zacht); }

.pxd-knop {
  font: inherit; font-size: .95rem; font-weight: 600; padding: 12px 24px;
  background: var(--pxd-merk); color: #fff; border: 1px solid var(--pxd-merk);
  border-radius: 8px; cursor: pointer; transition: background-color .12s ease;
}
.pxd-knop:hover:not(:disabled) { background: var(--pxd-merk-diep); border-color: var(--pxd-merk-diep); }
.pxd-knop:disabled { opacity: .55; cursor: default; }
.pxd-knop.pxd-stil { background: transparent; color: var(--pxd-zacht); border-color: var(--pxd-lijn); }
.pxd-knop.pxd-stil:hover:not(:disabled) { background: var(--pxd-paneel); color: var(--pxd-inkt); border-color: var(--pxd-lijn); }
.pxd-knop.pxd-groot { margin-top: 26px; font-size: 1.1rem; padding: 20px 44px; border-radius: 12px; width: min(420px, 100%); }

/* ---------- kaart ---------- */
.pxd-kop { font-size: clamp(1.4rem, 1.1rem + 1vw, 1.9rem); }
.pxd-lead { margin-top: 12px; color: var(--pxd-zacht); max-width: 62ch; }
.pxd-kaart { background: var(--pxd-papier); border: 1px solid var(--pxd-lijn); border-radius: var(--pxd-radius); margin-top: 24px; }
.pxd-binnen { padding: 24px; }

.pxd-grid { display: grid; grid-template-columns: 320px 1fr; }
.pxd-kalender { padding: 24px; border-right: 1px solid var(--pxd-lijn); }
.pxd-tijdvak { padding: 24px; min-width: 0; }

/* ---------- kalender ---------- */
.pxd-maandbalk { display: flex; align-items: center; justify-content: space-between; margin-bottom: 14px; }
.pxd-maandnaam { font-weight: 600; font-size: 1rem; }
.pxd-pijl {
  font: inherit; line-height: 1; background: var(--pxd-papier); color: var(--pxd-inkt);
  border: 1px solid var(--pxd-lijn); border-radius: 8px; width: 32px; height: 32px; cursor: pointer;
}
.pxd-pijl:hover:not(:disabled) { border-color: var(--pxd-merk); color: var(--pxd-merk); }
.pxd-pijl:disabled { opacity: .35; cursor: default; }

.pxd-weekkop, .pxd-maandgrid { display: grid; grid-template-columns: repeat(7, 1fr); gap: 4px; }
.pxd-weekkop span { text-align: center; font-size: .72rem; color: var(--pxd-zacht); padding-bottom: 6px; }
.pxd-dag {
  font: inherit; font-size: .9rem; font-variant-numeric: tabular-nums;
  aspect-ratio: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 3px;
  background: transparent; color: var(--pxd-inkt); border: 1px solid transparent; border-radius: 8px; cursor: pointer;
}
.pxd-dag.pxd-leeg { visibility: hidden; }
.pxd-dag:disabled { color: #B6C4BF; cursor: default; }
.pxd-dag.pxd-kan { border-color: var(--pxd-lijn); font-weight: 600; }
.pxd-dag.pxd-kan:hover { border-color: var(--pxd-merk); background: #F0FBF6; }
.pxd-dag.pxd-gekozen { background: var(--pxd-merk); border-color: var(--pxd-merk); color: #fff; }
.pxd-stip { width: 4px; height: 4px; border-radius: 50%; background: var(--pxd-merk); }
.pxd-dag.pxd-gekozen .pxd-stip { background: #fff; }
.pxd-dag.pxd-vandaag:not(.pxd-gekozen) { box-shadow: inset 0 0 0 1px var(--pxd-merk); }
.pxd-legenda { margin-top: 14px; font-size: .78rem; color: var(--pxd-zacht); display: flex; align-items: center; gap: 7px; }

/* ---------- tijden ---------- */
.pxd-tijdenkop { font-size: 1.15rem; font-weight: 700; letter-spacing: -.02em; margin-bottom: 4px; }
.pxd-tijdensub { font-size: .84rem; color: var(--pxd-zacht); margin-bottom: 16px; }
.pxd-tijden { display: flex; flex-wrap: wrap; gap: 8px; }
.pxd-tijd {
  font: inherit; font-size: .92rem; font-variant-numeric: tabular-nums;
  padding: 10px 16px; min-width: 92px; text-align: center;
  background: var(--pxd-papier); color: var(--pxd-inkt);
  border: 1px solid var(--pxd-lijn); border-radius: 8px; cursor: pointer;
  transition: border-color .12s ease, background-color .12s ease;
}
.pxd-tijd:hover { border-color: var(--pxd-merk); }
.pxd-tijd[aria-pressed="true"] { background: var(--pxd-merk); border-color: var(--pxd-merk); color: #fff; font-weight: 600; }

/* ---------- formulier ---------- */
.pxd-form { margin-top: 22px; padding-top: 20px; border-top: 1px solid var(--pxd-lijn); }
.pxd-gekozenregel { font-size: .95rem; margin-bottom: 16px; }
.pxd-velden { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.pxd-veld { display: block; font-size: .82rem; color: var(--pxd-zacht); }
.pxd-veld.pxd-breed { grid-column: 1 / -1; }
.pxd-veld em { font-style: normal; }
.pxd-veld input, .pxd-veld textarea, .pxd-veld select {
  display: block; width: 100%; margin-top: 5px; font: inherit; font-size: .93rem;
  color: var(--pxd-inkt); background: var(--pxd-paneel); border: 1px solid transparent;
  border-radius: 8px; padding: 10px 12px; resize: vertical;
}
.pxd-veld select {
  height: 42px; appearance: none; padding-right: 34px;
  background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' fill='none' stroke='%235B6F6A' stroke-width='2'%3E%3Cpath d='M1 1l5 5 5-5'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: right 12px center;
}
.pxd-veld input:focus, .pxd-veld textarea:focus, .pxd-veld select:focus {
  background-color: var(--pxd-papier); border-color: var(--pxd-merk);
}
.pxd-acties { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; margin-top: 20px; }

.pxd-melding { font-size: .9rem; color: var(--pxd-zacht); }
.pxd-melding.pxd-fout { color: var(--pxd-fout); }

/* ---------- toestanden ---------- */
.pxd [hidden] { display: none !important; }
.pxd-kaart .pxd-laden, .pxd-kaart .pxd-fouten, .pxd-kaart .pxd-leegstand,
.pxd-kaart .pxd-kiezen, .pxd-kaart .pxd-klaar { display: none; }
.pxd-kaart[data-state="laden"]  .pxd-laden,
.pxd-kaart[data-state="fout"]   .pxd-fouten,
.pxd-kaart[data-state="leeg"]   .pxd-leegstand,
.pxd-kaart[data-state="kiezen"] .pxd-kiezen,
.pxd-kaart[data-state="klaar"]  .pxd-klaar { display: block; }

/* ---------- bevestiging ---------- */
.pxd-klaarblok { padding: 32px 24px; text-align: center; }
.pxd-vinkje { width: 44px; height: 44px; margin: 0 auto 14px; border-radius: 50%; background: #E4F6EE; display: grid; place-items: center; }
.pxd-klaarblok h3 { font-size: 1.25rem; margin-bottom: 8px; }
.pxd-klaarblok p { color: var(--pxd-zacht); max-width: 48ch; margin-inline: auto; font-size: .92rem; }
.pxd-klaarblok p + p { margin-top: 10px; font-size: .88rem; }

.pxd-quickscan {
  margin: 28px auto 0; max-width: 520px; text-align: left;
  background: var(--pxd-paneel); border-radius: var(--pxd-radius); padding: 20px 22px;
}
.pxd-quickscan h4 { margin: 0 0 8px; font-size: .98rem; }
.pxd-quickscan p { max-width: none; margin: 0; text-align: left; }
.pxd-quickscan .pxd-qs-fijn { margin-top: 12px; font-size: .85rem; }
.pxd-qs-knop { display: inline-block; margin-top: 18px; text-decoration: none; }

/* ---------- smal scherm ---------- */
@media (max-width: 900px) {
  .pxd-grid { grid-template-columns: 1fr; }
  .pxd-kalender { border-right: 0; border-bottom: 1px solid var(--pxd-lijn); }
}
@media (max-width: 560px) {
  .pxd-velden { grid-template-columns: 1fr; }
  .pxd-tijd { flex: 1 1 calc(50% - 4px); min-width: 0; }
  .pxd-kalender, .pxd-tijdvak, .pxd-binnen { padding: 18px; }
}
@media (prefers-reduced-motion: reduce) { .pxd * { transition: none !important; } }

/* Voorkom dat kalenderdagen door themastijlen te breed worden */
.pxd .pxd-maandgrid {
    width: 100%;
    min-width: 0;
    overflow: hidden;
}

.pxd .pxd-maandgrid .pxd-dag {
    width: 100% !important;
    min-width: 0 !important;
    max-width: 100% !important;
    margin: 0 !important;
    padding-left: 0 !important;
    padding-right: 0 !important;
    box-sizing: border-box;
}

.pxd .pxd-kalender,
.pxd .pxd-tijdvak {
    min-width: 0;
}