/*
 * dojo/enrollment-form. CUBE order: block root, compositions (steps, actions),
 * blocks (field, choice, select, bank, suggest, alert, done), exceptions (data-view,
 * data-step, data-ready, aria-invalid).
 * Tokens: assets/css/tokens.css. Shared helpers (.dojo-sr, .dojo-button, .dojo-cluster): landing.css.
 * No !important, no @layer.
 */

.dojo-enrollment {
  color: var(--dojo-text);
  font-family: var(--dojo-font-text);
  font-size: var(--dojo-step-0);
  line-height: 1.6;
}

.dojo-enrollment *,
.dojo-enrollment *::before,
.dojo-enrollment *::after {
  box-sizing: border-box;
}

.dojo-enrollment :is(p, fieldset, legend, dl, dd, h3) {
  margin: 0;
  padding: 0;
}

.dojo-enrollment > * + * {
  margin-block-start: var(--dojo-space-l);
}

.dojo-enrollment h3 {
  color: var(--dojo-ink);
  font-family: var(--dojo-font-display);
  font-size: var(--dojo-step-3);
  font-weight: 800;
  line-height: 1.1;
}

/* Composition: a step is a stack of fields */
.dojo-enrollment .dojo-form {
  display: grid;
  gap: var(--dojo-space-m);
  margin-block-start: var(--dojo-space-xl);
  padding-block-start: var(--dojo-space-l);
  border-block-start: var(--dojo-hairline) solid var(--dojo-rule);
}

.dojo-enrollment .dojo-step {
  display: grid;
  gap: var(--dojo-space-l);
  align-content: start;
}

/* The personal fields of step 2 sit together at a steady rhythm, with no caption repeating what each label says. */
.dojo-enrollment .dojo-fields {
  display: grid;
  gap: var(--dojo-space-s);
}

/* Groups inside a step: a quiet caption, then its fields at a steady rhythm. */
.dojo-enrollment .dojo-group {
  display: grid;
  gap: var(--dojo-space-s);
  min-inline-size: 0;
  margin: 0;
  padding: 0;
  border: 0;
}

.dojo-enrollment .dojo-group legend {
  float: left;
  inline-size: 100%;
  margin-block-end: var(--dojo-space-2xs);
}

.dojo-enrollment .dojo-group legend + * {
  clear: both;
}

.dojo-enrollment .dojo-actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--dojo-space-xs);
  margin-block-start: var(--dojo-space-xs);
}

.dojo-enrollment .dojo-cluster {
  display: flex;
  flex-wrap: wrap;
  gap: var(--dojo-space-xs);
}

/* Exceptions: with the module ready the steps add up (each one appears under the last); without it, the form is one page. */
.dojo-enrollment:not([data-ready]) :is([data-action="next"], [data-action="copy"]) {
  display: none;
}

.dojo-enrollment[data-ready] .dojo-form[data-form="enroll"] [data-step-panel] {
  display: none;
}

.dojo-enrollment[data-ready] .dojo-form[data-step="1"] [data-step-panel="1"],
.dojo-enrollment[data-ready] .dojo-form[data-step="2"] :is([data-step-panel="1"], [data-step-panel="2"]),
.dojo-enrollment[data-ready] .dojo-form[data-step="3"] [data-step-panel] {
  display: grid;
}

/* A step already done keeps its fields (still editable) but not its "Continuar". */
.dojo-enrollment[data-ready] .dojo-form[data-step="2"] [data-step-panel="1"] .dojo-actions,
.dojo-enrollment[data-ready] .dojo-form[data-step="3"] :is([data-step-panel="1"], [data-step-panel="2"]) .dojo-actions {
  display: none;
}

/* Each new step opens under a hairline, so the form reads as one page that grows. */
.dojo-enrollment .dojo-form[data-form="enroll"] [data-step-panel] + [data-step-panel] {
  margin-block-start: var(--dojo-space-l);
  padding-block-start: var(--dojo-space-l);
  border-block-start: var(--dojo-hairline) solid var(--dojo-rule);
}

/* Block: select. The native arrow is replaced by a chevron drawn in the text colour, so it follows every theme. */
.dojo-enrollment .dojo-select-wrap {
  position: relative;
  display: block;
}

.dojo-enrollment .dojo-select-wrap::after {
  content: "";
  position: absolute;
  inset-block-start: 50%;
  inset-inline-end: var(--dojo-space-s);
  inline-size: 0.5rem;
  block-size: 0.5rem;
  border-inline-end: 0.125rem solid var(--dojo-ink);
  border-block-end: 0.125rem solid var(--dojo-ink);
  pointer-events: none;
  transform: translateY(-70%) rotate(45deg);
}

.dojo-enrollment .dojo-select {
  appearance: none;
  padding-inline-end: calc(var(--dojo-space-s) * 2 + 0.5rem);
}

.dojo-enrollment[data-view="waitlist"] .dojo-form[data-form="enroll"],
.dojo-enrollment[data-view="enroll"] .dojo-form[data-form="waitlist"] {
  display: none;
}

.dojo-enrollment .dojo-enrollment__picker[aria-invalid="true"] .dojo-choice {
  border-color: var(--dojo-error);
}

/* Block: field */
.dojo-enrollment .dojo-field {
  display: grid;
  gap: var(--dojo-space-2xs);
}

/* Every field title looks alike: the label of a field and the legend of a group (the date, the payment). */
.dojo-enrollment .dojo-field > label,
.dojo-enrollment .dojo-group legend,
.dojo-enrollment .dojo-enrollment__picker legend {
  color: var(--dojo-ink);
  font-size: inherit;
  font-weight: 700;
  letter-spacing: normal;
  text-transform: none;
}

.dojo-enrollment .dojo-opt {
  color: var(--dojo-muted);
  font-weight: 400;
}

.dojo-enrollment .dojo-hint {
  color: var(--dojo-muted);
  font-size: var(--dojo-step--1);
}

.dojo-enrollment .dojo-input:not([type="checkbox"]) {
  inline-size: 100%;
  min-block-size: var(--dojo-target);
  padding: var(--dojo-space-2xs) var(--dojo-space-xs);
  border: var(--dojo-border) solid var(--dojo-field-edge);
  border-radius: var(--dojo-radius);
  background: var(--dojo-paper);
  color: var(--dojo-ink);
  font-family: inherit;
  font-size: var(--dojo-step-0);
  line-height: 1.4;
}

.dojo-enrollment .dojo-input[type="file"] {
  padding: var(--dojo-space-2xs);
  font-size: var(--dojo-step--1);
}

.dojo-enrollment .dojo-input[aria-invalid="true"]:not([type="checkbox"]) {
  border-color: var(--dojo-error);
}

.dojo-enrollment .dojo-error {
  color: var(--dojo-error);
  font-size: var(--dojo-step--1);
  font-weight: 700;
}

.dojo-enrollment .dojo-error[hidden],
.dojo-enrollment .dojo-alert[hidden],
.dojo-enrollment .dojo-done[hidden],
.dojo-enrollment .dojo-suggest[hidden],
.dojo-enrollment .dojo-form[hidden] {
  display: none;
}

.dojo-enrollment .dojo-check {
  display: flex;
  gap: var(--dojo-space-xs);
  align-items: flex-start;
}

.dojo-enrollment .dojo-check input {
  flex: none;
  inline-size: 1.5rem;
  block-size: 1.5rem;
  margin: var(--dojo-space-3xs) 0 0;
  accent-color: var(--dojo-seal-deep);
}

.dojo-enrollment .dojo-check label {
  padding-block: var(--dojo-space-3xs);
  font-weight: 400;
}

/* The honeypot is out of sight and out of the tab order. */
.dojo-enrollment .dojo-hp {
  position: absolute;
  inline-size: 1px;
  block-size: 1px;
  overflow: hidden;
  clip-path: inset(50%);
}

/* Block: typo suggestion */
.dojo-enrollment .dojo-suggest {
  display: grid;
  gap: var(--dojo-space-xs);
  padding: var(--dojo-space-s);
  border-inline-start: 0.375rem solid var(--dojo-ink);
  background: var(--dojo-wash);
}

/* Block: the payment box of step 3. The deposit is what to do now, so it is the loudest line. */
.dojo-enrollment .dojo-pay {
  display: grid;
  gap: var(--dojo-space-s);
}

.dojo-enrollment .dojo-pay__amounts {
  display: grid;
  gap: 0;
  border: var(--dojo-border) solid var(--dojo-ink);
  border-radius: var(--dojo-radius);
}

.dojo-enrollment .dojo-pay__row {
  display: flex;
  flex-wrap: wrap;
  gap: var(--dojo-space-3xs) var(--dojo-space-s);
  align-items: baseline;
  justify-content: space-between;
  padding: var(--dojo-space-xs) var(--dojo-space-s);
  color: var(--dojo-muted);
}

.dojo-enrollment .dojo-pay__row + .dojo-pay__row {
  border-block-start: var(--dojo-hairline) solid var(--dojo-rule);
}

.dojo-enrollment .dojo-pay__row dd {
  color: var(--dojo-ink);
  font-weight: 700;
}

.dojo-enrollment .dojo-pay__row--now {
  background: var(--dojo-wash);
  box-shadow: inset 0.375rem 0 0 var(--dojo-seal);
  color: var(--dojo-ink);
}

.dojo-enrollment .dojo-pay__row--now dt {
  font-weight: 700;
}

.dojo-enrollment .dojo-pay__row--now dd {
  font-family: var(--dojo-font-display);
  font-size: var(--dojo-step-3);
  font-weight: 800;
  line-height: 1.1;
}

.dojo-enrollment .dojo-pay__pct {
  font-weight: 400;
}

.dojo-enrollment .dojo-pay__how {
  color: var(--dojo-text);
}

.dojo-enrollment .dojo-bank dd {
  display: flex;
  flex-wrap: wrap;
  gap: var(--dojo-space-2xs) var(--dojo-space-xs);
  align-items: center;
  justify-content: space-between;
}

.dojo-enrollment .dojo-bank__value {
  min-inline-size: 0;
}

/* A quiet "Copiar": text-like at rest, the full 44px target kept for fingers. */
.dojo-enrollment .dojo-copy {
  min-block-size: var(--dojo-target);
  padding: 0 var(--dojo-space-xs);
  border: var(--dojo-hairline) solid var(--dojo-rule);
  border-radius: var(--dojo-radius);
  background: transparent;
  color: var(--dojo-muted);
  font: inherit;
  font-size: var(--dojo-step--1);
  font-weight: 400;
  cursor: pointer;
}

.dojo-enrollment .dojo-copy:hover {
  border-color: var(--dojo-ink);
  color: var(--dojo-ink);
}

.dojo-enrollment .dojo-receipt-note {
  padding: var(--dojo-space-xs) var(--dojo-space-s);
  border-inline-start: 0.375rem solid var(--dojo-ink);
  background: var(--dojo-wash);
  font-weight: 700;
}

/* Block: bank data. A quiet list of rows under a hairline: the label small and muted, the value plain, "Copiar" at the end. */
.dojo-enrollment .dojo-bank {
  display: grid;
  margin: 0;
  padding: 0 var(--dojo-space-s);
  border: var(--dojo-hairline) solid var(--dojo-rule);
  border-radius: var(--dojo-radius);
}

.dojo-enrollment .dojo-bank div {
  display: grid;
  grid-template-columns: minmax(4.5rem, 7rem) minmax(0, 1fr);
  gap: var(--dojo-space-2xs) var(--dojo-space-s);
  align-items: center;
  min-block-size: calc(var(--dojo-target) + var(--dojo-space-2xs));
  padding-block: var(--dojo-space-3xs);
}

.dojo-enrollment .dojo-bank div + div {
  border-block-start: var(--dojo-hairline) solid var(--dojo-rule);
}

.dojo-enrollment .dojo-bank dt {
  color: var(--dojo-muted);
  font-size: var(--dojo-step--1);
  font-weight: 400;
}

.dojo-enrollment .dojo-bank dd {
  color: var(--dojo-ink);
  font-variant-numeric: tabular-nums;
  font-weight: 400;
  overflow-wrap: anywhere;
}

/* Narrow: the label goes on top, so a CBU keeps its 22 digits on one line. */
.dojo-enrollment .dojo-bank {
  container-type: inline-size;
}

@container (max-width: 26rem) {
  .dojo-enrollment .dojo-bank div {
    grid-template-columns: minmax(0, 1fr);
    gap: 0;
    padding-block: var(--dojo-space-2xs);
  }

}

/* A value to copy is never split (a CBU must read as one number); when it does not fit, "Copiar" goes under it. */
.dojo-enrollment .dojo-bank dd:has(.dojo-copy) .dojo-bank__value {
  white-space: nowrap;
}

.dojo-enrollment .dojo-copy {
  flex: none;
  white-space: nowrap;
}

.dojo-enrollment .dojo-enrollment__price strong {
  color: var(--dojo-ink);
}

/* Block: the edition, as option cards (outside the forms) or as a read-only line when there is only one */
.dojo-enrollment .dojo-enrollment__picker {
  min-inline-size: 0;
  margin: 0;
  padding: 0;
  border: 0;
}

.dojo-enrollment .dojo-enrollment__picker legend {
  margin-block-end: var(--dojo-space-2xs);
}

/* One edition: the card is chosen for you, tinted like a checked option, with a check mark that is only decoration. */
.dojo-enrollment .dojo-enrollment__edition {
  cursor: default;
  border-color: var(--dojo-ink);
  background: var(--dojo-wash);
  box-shadow: inset 0.25rem 0 0 var(--dojo-seal);
}

.dojo-enrollment .dojo-choice__check {
  flex: none;
  inline-size: 1.5rem;
  block-size: 1.5rem;
  margin-block-start: 0.125rem;
  color: var(--dojo-seal-deep);
}

.dojo-enrollment .dojo-choices {
  display: grid;
  gap: var(--dojo-space-xs);
}

.dojo-enrollment .dojo-choice {
  display: flex;
  gap: var(--dojo-space-s);
  align-items: flex-start;
  padding: var(--dojo-space-s);
  border: var(--dojo-hairline) solid var(--dojo-rule);
  border-radius: var(--dojo-radius);
  cursor: pointer;
}

.dojo-enrollment .dojo-choice:hover {
  border-color: var(--dojo-muted);
}

.dojo-enrollment .dojo-choice:has(input:checked) {
  border-color: var(--dojo-ink);
  background: var(--dojo-wash);
  box-shadow: inset 0.25rem 0 0 var(--dojo-seal);
}

.dojo-enrollment .dojo-choice:has(input:disabled) {
  cursor: not-allowed;
  opacity: 0.85;
}

.dojo-enrollment .dojo-choice input {
  flex: none;
  inline-size: 1.25rem;
  block-size: 1.25rem;
  margin: 0.25rem 0 0;
  accent-color: var(--dojo-seal-deep);
}

.dojo-enrollment .dojo-choice__text {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--dojo-space-3xs);
  min-inline-size: 0;
  overflow-wrap: anywhere;
}

/* The last line of a card: the seats indicator, then the enrollment cutoff (wraps when narrow). */
.dojo-enrollment .dojo-choice__foot {
  display: flex;
  flex-wrap: wrap;
  gap: var(--dojo-space-3xs) var(--dojo-space-s);
  align-items: center;
}

.dojo-enrollment .dojo-choice__closes {
  color: var(--dojo-muted);
  font-size: var(--dojo-step--1);
  line-height: 1.3;
}

.dojo-enrollment .dojo-choice__title {
  color: var(--dojo-seal-deep);
  font-size: var(--dojo-step--1);
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}

.dojo-enrollment .dojo-choice__days {
  color: var(--dojo-ink);
  font-family: var(--dojo-font-display);
  font-size: var(--dojo-step-1);
  font-weight: 800;
  line-height: 1.2;
}

.dojo-enrollment .dojo-choice__meta {
  color: var(--dojo-muted);
  font-size: var(--dojo-step--1);
}

/* The price and the reservation advance, so the cards can be compared at a glance. */
.dojo-enrollment .dojo-choice__price {
  color: var(--dojo-text);
  font-size: var(--dojo-step--1);
}

.dojo-enrollment .dojo-choice__price strong {
  color: var(--dojo-ink);
  font-family: var(--dojo-font-display);
  font-size: var(--dojo-step-1);
  font-weight: 800;
}

/* The seats left: a small plain-text indicator, not a control. Calm above five; from five down the brand accent
   (the word "solo" carries the urgency, so colour is never the only signal). */
.dojo-enrollment .dojo-seats {
  display: inline-flex;
  gap: var(--dojo-space-2xs);
  align-items: center;
  justify-self: start;
  padding: 0.125rem var(--dojo-space-xs);
  border: var(--dojo-hairline) solid var(--dojo-rule);
  border-radius: 999px;
  color: var(--dojo-muted);
  font-size: var(--dojo-step--1);
  font-weight: 400;
  line-height: 1.3;
}

.dojo-enrollment .dojo-seats[data-scarce] {
  border-color: var(--dojo-seal-deep);
  color: var(--dojo-seal-deep);
}

/* Blocks: general error, thanks, closed note */
.dojo-enrollment .dojo-alert {
  padding: var(--dojo-space-s);
  border-inline-start: 0.375rem solid var(--dojo-error);
  background: var(--dojo-wash);
  color: var(--dojo-error);
  font-weight: 700;
}

.dojo-enrollment .dojo-done {
  display: grid;
  gap: var(--dojo-space-s);
  align-content: start;
  padding: var(--dojo-space-m);
  border-inline-start: 0.375rem solid var(--dojo-ink);
  background: var(--dojo-wash);
}

.dojo-enrollment .dojo-enrollment__note {
  padding: var(--dojo-space-s) var(--dojo-space-m);
  border-inline-start: 0.375rem solid var(--dojo-seal);
  background: var(--dojo-wash);
}

.dojo-enrollment a {
  color: var(--dojo-ink);
  text-decoration: underline;
  text-underline-offset: 0.2em;
}

.dojo-enrollment a:hover {
  color: var(--dojo-seal-deep);
}

/* Progress: the button is busy while the answer travels */
.dojo-enrollment [data-action][aria-disabled="true"] {
  cursor: progress;
  opacity: 0.7;
}

/* Whatever the module hides with the hidden attribute stays hidden, whatever display the block gave it. */
.dojo-enrollment :is(.dojo-enrollment__picker, .dojo-receipt-note)[hidden] {
  display: none;
}

/* A step takes focus by script (tabindex="-1") so screen readers announce it; it is not a control, so no outline. */
.dojo-enrollment .dojo-step[tabindex="-1"]:focus-visible {
  outline: none;
}

/* Kadence strips the outline from focused fields (a faint shadow is all that is left): keyboard users need it back. */
.dojo-enrollment .dojo-step :is(input, select, textarea):focus-visible {
  outline: 0.125rem solid var(--dojo-c-focus);
  outline-offset: 0.125rem;
}

/* The time at the end of the dates' line: the same line, plain weight, quieter. */
.dojo-enrollment .dojo-choice__hours {
  color: var(--dojo-c-text);
  font-family: var(--dojo-font-text);
  font-size: var(--dojo-step-0);
  font-weight: 400;
}