/**
 * Express registration — one-click free-event registration.
 *
 * Styles our replacement panel (Register CTA, confirmation, "register another"
 * form) that stands in for Event Tickets' native cart/checkout block on free
 * events. Follows the KidWind brand system (see .claude/skills/kidwind-brand-style
 * and cornerstone-global.css): Montserrat (inherited), dark-purple text, coral
 * primary CTAs, teal/green success, offwhite cards. Variables come from Cornerstone
 * Global CSS; hex fallbacks keep it on-brand if that stylesheet is ever absent.
 */

/* Hide the native Event Tickets block that our panel replaces. */
.nk-express-hide {
  display: none !important;
}

.nk-express {
  margin: 0em 0 1.5rem 0;
  padding: 1.5rem;
  color: var(--darkpurple, #4d40b2);
  background: var(--offwhite, #f9f9f9);
  border: 1.5px solid var(--lightgray, #f0f0f0);
  border-radius: 0.667rem;
  max-width: 32rem;
}

/* ---- Buttons ---------------------------------------------------------- */
.nk-express__btn {
  display: inline-block;
  margin: 0;
  padding: 0.667rem 1.5rem;
  font-size: 1rem;
  font-weight: bold;
  line-height: 1.2;
  text-align: center;
  text-decoration: none;
  border: 0;
  border-radius: 0.24rem;
  cursor: pointer;
  transition: 0.3s ease-out;
}

/* Primary CTA — coral fill, hover to purple (the KidWind marketing-action pattern). */
.nk-express__btn--primary,
.nk-express__btn--login {
  color: var(--white, #fff);
  background-color: var(--coral, #ff5e5e);
}

.nk-express__btn--primary:hover,
.nk-express__btn--login:hover {
  color: var(--white, #fff);
  background-color: var(--darkpurple, #4d40b2);
}

/* Secondary — transparent with a purple outline, hover fills purple. */
.nk-express__btn--secondary {
  color: var(--darkpurple, #4d40b2);
  background-color: transparent;
  border: 1.5px solid var(--darkpurple, #4d40b2);
}

.nk-express__btn--secondary:hover {
  color: var(--white, #fff);
  background-color: var(--darkpurple, #4d40b2);
}

/* Quiet text link (Cancel). */
.nk-express__btn--link {
  color: var(--darkpurple, #4d40b2);
  background: transparent;
  padding: 0.667rem 0.5rem;
  font-weight: 600;
  text-decoration: underline;
}

.nk-express__btn--link:hover {
  color: var(--lightpurple, #6c59ff);
}

.nk-express__btn--disabled,
.nk-express__btn[disabled] {
  opacity: 0.55;
  cursor: not-allowed;
}

/* ---- Status / notes / errors ----------------------------------------- */

/* "Registered ✓" as a tilted teal highlight pill with purple text (the KidWind
   "Free!"/title treatment). */
.nk-express__status {
  display: inline-block;
  margin: 0 0 0.75rem;
  padding: 0.24rem 0.667rem;
  font-size: 1.25rem;
  font-weight: 700;
  color: var(--darkpurple, #4d40b2);
  background: var(--green, #00deab);
  border-radius: 0.24rem;
  transform: rotate(-3deg);
}

.nk-express__note {
  margin: 0 0 1rem;
  font-size: 0.8rem;
  color: var(--darkpurple, #4d40b2);
}

/* Error notice — offwhite with a coral top accent + bold purple text (mirrors
   .woocommerce-error). */
.nk-express__error {
  margin: 0.75rem 0 0;
  padding: 0.667rem 1rem;
  font-size: 0.9rem;
  font-weight: bold;
  color: var(--darkpurple, #4d40b2);
  background: var(--offwhite, #f9f9f9);
  border-top: 3px solid var(--coral, #ff5e5e);
  border-radius: 0 0 0.24rem 0.24rem;
}

/* ---- Added-attendee list --------------------------------------------- */
.nk-express__added {
  list-style: none;
  margin: 0 0 1rem;
  padding: 0;
}

.nk-express__added-item {
  margin: 0.24rem 0;
  font-size: 0.95rem;
  font-weight: 600;
  color: var(--darkpurple, #4d40b2);
}

/* ---- "Register another" form ----------------------------------------- */
.nk-express__another {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  align-items: center;
  margin-top: 0.5rem;
}

.nk-express__input {
  flex: 1 1 180px;
  min-width: 0;
  padding: 0.667rem 0.75rem;
  font-size: 1rem;
  color: var(--darkpurple, #4d40b2);
  background: var(--white, #fff);
  border: 1.5px solid var(--lightgray, #f0f0f0);
  border-radius: 0.24rem;
}

.nk-express__input::placeholder {
  color: var(--lightpurple50, rgba(108, 89, 255, 0.5));
}

.nk-express__input:focus {
  outline: var(--green, #00deab) auto 1px;
  border-color: var(--darkpurple, #4d40b2);
}

.nk-express__another .nk-express__btn {
  flex: 0 0 auto;
}