/* --- Lottery Plugin Q&A Override Styles --- */
.skill-challenge-wrapper {
  .lty-lottery-question-answer-container {
    @apply m-0;

    h3 { @apply hidden; }
  }

  .lty-lottery-question {
    @apply text-[15px] text-text-primary mb-4 font-medium;
  }

  .lty-lottery-answers {
    @apply list-none p-0 m-0 flex flex-col gap-2;

    li {
      @apply flex items-center px-4 py-3 border border-gray-200 rounded-md cursor-pointer transition-all duration-200 text-[15px];

      &:hover { @apply border-primary; }

      &.lty-selected { @apply border-primary bg-primary/5; }

      /* Radio-style indicator — content: '' requires raw CSS */
      &::before {
        @apply content-[''] w-[18px] h-[18px] border-2 border-gray-300 rounded-full mr-3 shrink-0 transition-all duration-200;
      }

      &.lty-selected::before {
        @apply border-primary bg-primary shadow-[inset_0_0_0_3px_white];
      }
    }
  }

  /* Dropdown style Q&A */
  .lty-lottery-options-field-wrapper {
    @apply m-0;

    select {
      @apply w-full px-4 py-3 border border-gray-200 rounded-md text-[15px] bg-surface cursor-pointer;

      &:focus { @apply outline-none border-primary ring-2 ring-primary/10; }
    }
  }
}

/* --- Answer Card Selection States (lottery Q&A override) --- */
.answer-input:checked + .answer-card {
  @apply border-primary bg-primary/5;
}

.answer-input:checked + .answer-card .answer-letter {
  @apply bg-primary text-white;
}

.answer-input:checked + .answer-card .answer-check {
  @apply block;
}

.answer-input:focus + .answer-card {
  @apply outline-none ring-2 ring-primary/20;
}

.answer-option:hover .answer-card {
  @apply -translate-y-0.5 shadow-md;
}

.answer-card {
  @apply transition-all duration-200;
}

/* ==========================================================================
   Nera Ticket Picker — Dialog variant
   Explicit CSS (not @apply-only) ensures grid layout works regardless of build.
   ========================================================================== */

/* ── Shared: count badge ────────────────────────────────────────── */
.nera-ticket-picker__count-badge {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-size: 0.7rem;
  font-weight: 700;
  color: var(--color-primary);
  background: color-mix(in srgb, var(--color-primary) 10%, transparent);
  padding: 3px 10px 3px 7px;
  border-radius: 999px;
  transition: background 0.2s, color 0.2s;
  white-space: nowrap;
}

.nera-ticket-picker__count-badge[data-has-selection="true"] {
  background: var(--color-primary);
  color: #fff;
}

/* ── Trigger button ─────────────────────────────────────────────── */
.nera-ticket-trigger {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  padding: 12px 14px;
  border-radius: 12px;
  border: 2px dashed color-mix(in srgb, var(--color-primary) 35%, transparent);
  background: color-mix(in srgb, var(--color-primary) 3%, white);
  cursor: pointer;
  transition: border-color 0.18s, background 0.18s, transform 0.12s;
  text-align: left;
}

.nera-ticket-trigger:hover {
  border-color: var(--color-primary);
  background: color-mix(in srgb, var(--color-primary) 6%, white);
  transform: translateY(-1px);
}

.nera-ticket-trigger:active {
  transform: translateY(0);
}

.nera-ticket-trigger__icon {
  color: var(--color-primary);
  font-size: 20px !important;
}

.nera-ticket-trigger__arrow {
  color: var(--color-primary);
  font-size: 18px !important;
  transition: transform 0.15s;
}

.nera-ticket-trigger:hover .nera-ticket-trigger__arrow {
  transform: translateX(3px);
}

/* ── Body scroll lock when dialog is open ───────────────────────── */
body.nera-ticket-dialog-open {
  overflow: hidden;
}

/* ── Dialog shell ───────────────────────────────────────────────── */
.nera-ticket-dialog {
  background: #fff;
  border-radius: 24px 24px 0 0;
  box-shadow: 0 -4px 60px rgba(0, 0, 0, 0.18);
  display: flex;
  flex-direction: column;
  overflow: hidden;
  max-height: 90svh;
}

@media (min-width: 640px) {
  .nera-ticket-dialog {
    border-radius: 20px;
    box-shadow: 0 20px 80px rgba(0, 0, 0, 0.2);
    max-height: 85svh;
  }
}

/* Drag handle on mobile */
.nera-ticket-dialog::before {
  content: '';
  display: block;
  width: 40px;
  height: 4px;
  background: #e2e8f0;
  border-radius: 2px;
  margin: 10px auto 0;
  flex-shrink: 0;
}

@media (min-width: 640px) {
  .nera-ticket-dialog::before {
    display: none;
  }
}

/* ── Dialog header ──────────────────────────────────────────────── */
.nera-ticket-dialog__header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 14px 18px 14px;
  border-bottom: 1px solid #f1f5f9;
  flex-shrink: 0;
}

.nera-ticket-dialog__header-icon {
  width: 36px;
  height: 36px;
  border-radius: 10px;
  background: color-mix(in srgb, var(--color-primary) 10%, transparent);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.nera-ticket-dialog__header-icon .material-symbols-outlined {
  color: var(--color-primary);
  font-size: 18px !important;
}

.nera-ticket-dialog__close {
  width: 32px;
  height: 32px;
  border-radius: 8px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: transparent;
  border: none;
  color: var(--color-text-secondary);
  cursor: pointer;
  transition: background 0.15s, color 0.15s;
  flex-shrink: 0;
}

.nera-ticket-dialog__close:hover {
  background: #f1f5f9;
  color: var(--color-text-primary);
}

.nera-ticket-dialog__close .material-symbols-outlined {
  font-size: 20px !important;
}

/* ── Dialog body ────────────────────────────────────────────────── */
.nera-ticket-dialog__body {
  flex: 1;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  gap: 12px;
  padding: 16px 18px 12px;
  min-height: 0;
}

.nera-ticket-dialog__inner {
  display: flex;
  flex-direction: column;
  gap: 10px;
  flex: 1;
  min-height: 0;
}

/* ── Range select dropdown navigator ───────────────────────────── */
.nera-range-select-wrap {
  position: relative;
  display: flex;
  align-items: center;
  flex-shrink: 0;
  background: #f8fafc;
  border: 1.5px solid #e2e8f0;
  border-radius: 12px;
  padding: 0 12px 0 10px;
  gap: 8px;
  transition: border-color 0.14s, box-shadow 0.14s;
}

.nera-range-select-wrap:focus-within {
  border-color: var(--color-primary);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--color-primary) 12%, transparent);
}

.nera-range-select__icon {
  font-size: 17px !important;
  color: var(--color-primary);
  flex-shrink: 0;
  pointer-events: none;
}

.nera-range-select {
  appearance: none;
  -webkit-appearance: none;
  background: transparent;
  border: none;
  outline: none;
  font-size: 0.8rem;
  font-weight: 700;
  color: var(--color-text-primary);
  cursor: pointer;
  flex: 1;
  padding: 10px 0;
  min-width: 0;
}

.nera-range-select__chevron {
  font-size: 18px !important;
  color: var(--color-text-secondary);
  flex-shrink: 0;
  pointer-events: none;
  transition: color 0.14s;
}

.nera-range-select-wrap:focus-within .nera-range-select__chevron {
  color: var(--color-primary);
}

/* ── Tab pill (hidden from view, kept for plugin DOM needs) ─────── */
.lty-lottery-ticket-tab {
  display: none !important;
}

/* ── Ticket grid scroll area (dialog) ───────────────────────────── */
.nera-ticket-picker__dialog-grid {
  flex: 1;
  overflow-y: auto;
  overflow-x: hidden;
  min-height: 0;
  border: 1.5px solid #f1f5f9;
  border-radius: 12px;
  padding: 10px;
  background: #fafafa;
  scrollbar-width: thin;
  scrollbar-color: color-mix(in srgb, var(--color-primary) 40%, transparent) transparent;
}

.nera-ticket-picker__dialog-grid::-webkit-scrollbar {
  width: 4px;
  height: 0;
}

.nera-ticket-picker__dialog-grid::-webkit-scrollbar-thumb {
  background: color-mix(in srgb, var(--color-primary) 40%, transparent);
  border-radius: 2px;
}

.nera-ticket-dialog .lty-lottery-ticket-container,
.nera-ticket-dialog .lty-lottery-ticket-panel {
  display: flex !important;
  flex-direction: column;
  flex: 1 1 auto;
  min-height: 0;
  overflow: hidden;
  float: none !important;
  width: 100%;
}

.nera-ticket-dialog .nera-ticket-picker__dialog-grid {
  overscroll-behavior: contain;
  -webkit-overflow-scrolling: touch;
}

/* ── Ticket number grid ─────────────────────────────────────────── */
.nera-ticket-grid__list {
  display: grid !important;
  grid-template-columns: repeat(auto-fill, minmax(80px, 1fr)) !important;
  gap: 7px !important;
  list-style: none !important;
  margin: 0 !important;
  padding: 0 !important;
}

/* ── Ticket cell base ───────────────────────────────────────────── */
.lty-ticket,
.nera-ticket-grid__cell {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  height: 38px !important;
  font-size: 0.68rem;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
  border-radius: 8px;
  border: 1.5px solid #e2e8f0 !important;
  background: #fff;
  color: var(--color-text-primary);
  cursor: pointer;
  user-select: none;
  margin: 0 !important;
  transition: border-color 0.12s, background 0.12s, color 0.12s, box-shadow 0.12s;
}

.lty-ticket:hover:not(.lty-booked-ticket):not(.lty-processing-ticket):not(.lty-reserved-ticket) {
  border-color: var(--color-primary);
  color: var(--color-primary);
  background: color-mix(in srgb, var(--color-primary) 6%, white);
  box-shadow: 0 2px 8px color-mix(in srgb, var(--color-primary) 18%, transparent);
}

/* ── Ticket state variants ──────────────────────────────────────── */

.lty-selected-ticket {
  border-color: var(--color-primary) !important;
  background: var(--color-primary) !important;
  color: #fff !important;
  box-shadow: 0 3px 10px color-mix(in srgb, var(--color-primary) 40%, transparent) !important;
}

.lty-booked-ticket {
  background: #f8fafc !important;
  border-color: #e2e8f0 !important;
  color: #cbd5e1 !important;
  cursor: not-allowed !important;
  pointer-events: none;
  text-decoration: line-through;
}

.lty-processing-ticket {
  background: #eff6ff !important;
  border-color: #bfdbfe !important;
  color: #93c5fd !important;
  cursor: not-allowed !important;
  pointer-events: none;
}

.lty-reserved-ticket {
  background: #fffbeb !important;
  border-color: #fde68a !important;
  color: #f59e0b !important;
  cursor: not-allowed !important;
  pointer-events: none;
}

.lty-hidden-ticket {
  display: none !important;
}

/* ── View more button ───────────────────────────────────────────── */
.lty-toggle-view-button {
  @apply mt-3;
}

.lty-toggle-lottery-tickets {
  @apply block w-full py-2 text-center text-xs font-semibold text-primary
         border border-primary/20 rounded-lg bg-surface
         hover:bg-primary/5 transition-colors no-underline;
}

/* ── Legend ─────────────────────────────────────────────────────── */
.nera-ticket-picker__legend {
  display: flex;
  align-items: center;
  gap: 14px;
  flex-wrap: wrap;
  flex-shrink: 0;
  padding-top: 2px;
}

.nera-ticket-picker__legend-item {
  display: flex;
  align-items: center;
  gap: 5px;
  font-size: 0.7rem;
  color: var(--color-text-secondary);
}

.nera-ticket-picker__legend-dot {
  width: 12px;
  height: 12px;
  border-radius: 3px;
  border: 1.5px solid #e2e8f0;
  display: inline-block;
  flex-shrink: 0;
}

.nera-ticket-picker__legend-item--available .nera-ticket-picker__legend-dot {
  background: #fff;
  border-color: #cbd5e1;
}

.nera-ticket-picker__legend-item--selected .nera-ticket-picker__legend-dot {
  background: var(--color-primary);
  border-color: var(--color-primary);
}

.nera-ticket-picker__legend-item--sold .nera-ticket-picker__legend-dot {
  background: #f8fafc;
  border-color: #e2e8f0;
}

.nera-ticket-picker__legend-item--cart .nera-ticket-picker__legend-dot {
  background: #eff6ff;
  border-color: #bfdbfe;
}

/* ── Dialog footer ──────────────────────────────────────────────── */
.nera-ticket-dialog__footer {
  padding: 12px 18px 18px;
  border-top: 1px solid #f1f5f9;
  flex-shrink: 0;
  background: #fff;
}

.nera-ticket-dialog__confirm-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  width: 100%;
  padding: 14px 20px;
  background: var(--color-primary);
  color: #fff;
  font-weight: 700;
  font-size: 0.95rem;
  border-radius: 12px;
  border: none;
  cursor: pointer;
  transition: background 0.15s, transform 0.12s, box-shadow 0.15s;
  box-shadow: 0 4px 16px color-mix(in srgb, var(--color-primary) 30%, transparent);
}

.nera-ticket-dialog__confirm-btn:hover {
  background: color-mix(in srgb, var(--color-primary) 85%, black);
  transform: translateY(-1px);
  box-shadow: 0 6px 20px color-mix(in srgb, var(--color-primary) 40%, transparent);
}

.nera-ticket-dialog__confirm-count {
  background: rgba(255, 255, 255, 0.2);
  border-radius: 999px;
  padding: 2px 10px;
  font-size: 0.75rem;
  font-weight: 700;
}

/* ── Strip plugin-injected margins ─────────────────────────────── */
.lty-lottery-ticket-container {
  margin: 0 !important;
}

.lty-lottery-ticket-panel,
.lty-lottery-ticket-wrapper {
  @apply m-0;
}

/* ── Lucky-dip / search wrappers ────────────────────────────────── */
.lty-lucky-dip-wrapper,
.lty-manual-ticket-search-wrapper {
  @apply mb-2 flex-shrink-0;
}

/* ==========================================================================
   Lucky Dip UI — inline controls, jquery-modal popups, z-index fix
   ========================================================================== */

/* Toasts must clear the whole modal stack below, or a message raised from
   inside a Lucky Dip popup renders behind its own overlay. Hook class added in
   footer.php; !important because the blocker rules below use it too. */
.nera-toast-layer {
  z-index: 1000010 !important;
}

/* Above ticket dialog (z-index: 999990) */
.jquery-modal,
.jquery-modal.blocker {
  z-index: 1000000 !important;
}

/* ── jquery-modal shell (success + regenerate) ───────────────────── */
.jquery-modal .modal.nera-lucky-dip-popup,
.jquery-modal .modal.nera-lucky-dip-regenerate,
.jquery-modal .lty-ticket-lucky-dip-popup-wrapper.modal,
.jquery-modal .lty-regenerate-ticket-lucky-dip-popup-wrapper.modal {
  padding: 0;
  border-radius: 20px;
  /* Clip to the radius. The primary button carries a coloured glow, and with
     the footer sitting flush against the bottom edge that glow escaped the
     rounded corner and painted a blue band across the page below the popup. */
  overflow: hidden;
  max-width: 420px;
  width: calc(100% - 32px);
  box-shadow: 0 20px 80px rgba(0, 0, 0, 0.22);
  border: 1px solid #f1f5f9;
}

.jquery-modal .modal a.close-modal {
  top: 14px;
  right: 14px;
  width: 32px;
  height: 32px;
  text-indent: 0;
  background-image: none;
  background: #f8fafc;
  border-radius: 999px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #64748b;
  font-size: 0;
  transition: background 0.15s, color 0.15s;
}

.jquery-modal .modal a.close-modal::before {
  content: 'close';
  font-family: 'Material Symbols Outlined';
  font-size: 20px;
  line-height: 1;
}

.jquery-modal .modal a.close-modal:hover {
  background: #f1f5f9;
  color: var(--color-text-primary, #0f172a);
}

/* ── Success popup ───────────────────────────────────────────────── */
.nera-lucky-dip-popup {
  text-align: center;
}

.nera-lucky-dip-popup__header {
  padding: 28px 24px 16px;
  border-bottom: 1px solid #f1f5f9;
}

.nera-lucky-dip-popup__icon-wrap {
  width: 56px;
  height: 56px;
  margin: 0 auto 12px;
  border-radius: 999px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: color-mix(in srgb, var(--color-primary) 12%, white);
  color: var(--color-primary);
}

.nera-lucky-dip-popup__icon-wrap .material-symbols-outlined {
  font-size: 30px !important;
}

.nera-lucky-dip-popup__title {
  margin: 0 0 4px;
  font-size: 1.125rem;
  font-weight: 700;
  color: var(--color-text-primary, #0f172a);
}

.nera-lucky-dip-popup__subtitle {
  margin: 0;
  font-size: 0.875rem;
  color: var(--color-text-secondary, #64748b);
}

.nera-lucky-dip-popup__body {
  padding: 20px 24px;
}

.nera-lucky-dip-popup__tickets {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  justify-content: center;
  max-height: 160px;
  overflow-y: auto;
  padding: 4px;
}

/* Override plugin fixed 150px box on .lty-lucky-dip-tickets */
.nera-lucky-dip-popup .lty-lucky-dip-tickets.nera-lucky-dip-popup__tickets {
  height: auto;
  max-height: 160px;
  align-items: center;
  align-content: flex-start;
  border: none;
  margin: 0;
  padding: 4px;
}

.nera-lucky-dip-popup__ticket-chip {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  align-self: center;
  flex: 0 0 auto;
  white-space: nowrap;
  min-width: 52px;
  padding: 8px 12px;
  border-radius: 10px;
  font-size: 0.875rem;
  font-weight: 700;
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
  color: var(--color-primary);
  background: color-mix(in srgb, var(--color-primary) 8%, white);
  border: 1px solid color-mix(in srgb, var(--color-primary) 25%, transparent);
}

/* Hero layout when Lucky Dip returns exactly one ticket */
.nera-lucky-dip-popup__tickets--single {
  max-height: none;
  overflow: visible;
  justify-content: center;
  padding: 8px 4px 12px;
}

.nera-lucky-dip-popup__tickets--single .nera-lucky-dip-popup__ticket-chip {
  min-width: 0;
  padding: 14px 32px;
  font-size: 1.25rem;
  border-radius: 14px;
  letter-spacing: 0.02em;
}

.nera-lucky-dip-popup__actions {
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: 0 24px 24px;
}

.nera-lucky-dip-popup__btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  width: 100%;
  padding: 12px 16px;
  border-radius: 12px;
  font-size: 0.9375rem;
  font-weight: 600;
  text-decoration: none !important;
  border: none;
  cursor: pointer;
  transition: background 0.15s, transform 0.12s, box-shadow 0.15s;
}

.nera-lucky-dip-popup__btn .material-symbols-outlined {
  font-size: 18px !important;
}

.nera-lucky-dip-popup__btn--primary {
  background: var(--color-primary);
  color: #fff !important;
  box-shadow: 0 4px 14px color-mix(in srgb, var(--color-primary) 35%, transparent);
}

.nera-lucky-dip-popup__btn--primary:hover {
  background: color-mix(in srgb, var(--color-primary) 88%, black);
  transform: translateY(-1px);
}

.nera-lucky-dip-popup__btn--secondary {
  background: #f8fafc;
  color: var(--color-text-primary, #0f172a) !important;
  border: 1px solid #e2e8f0;
}

.nera-lucky-dip-popup__btn--secondary:hover {
  background: #f1f5f9;
  border-color: #cbd5e1;
}

/* ── Inline Lucky Dip (inside ticket dialog) ─────────────────────── */
.nera-lucky-dip-inline {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 12px 14px;
  margin-bottom: 12px;
  border-radius: 14px;
  border: 1px solid color-mix(in srgb, var(--color-primary) 20%, #e2e8f0);
  background: color-mix(in srgb, var(--color-primary) 4%, white);
  flex-shrink: 0;
}

.nera-lucky-dip-inline__header {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-shrink: 0;
}

.nera-lucky-dip-inline__icon {
  color: var(--color-primary);
  font-size: 20px !important;
}

.nera-lucky-dip-inline__label {
  font-size: 0.875rem;
  font-weight: 700;
  color: var(--color-text-primary, #0f172a);
}

.nera-lucky-dip-inline__controls {
  display: flex;
  align-items: center;
  gap: 10px;
  flex: 1;
  justify-content: flex-end;
  min-width: 0;
}

.nera-lucky-dip-inline__qty .quantity {
  display: flex;
  align-items: center;
  margin: 0 !important;
}

.nera-lucky-dip-inline__qty .qty {
  width: 44px !important;
  height: 40px;
  padding: 0 !important;
  text-align: center;
  font-size: 0.9375rem;
  font-weight: 600;
  border: 1px solid #e2e8f0 !important;
  border-radius: 10px !important;
  background: #fff !important;
  box-shadow: none !important;
}

.nera-lucky-dip-inline__btn {
  display: inline-flex !important;
  align-items: center;
  justify-content: center;
  gap: 6px;
  height: 40px !important;
  padding: 0 14px !important;
  margin: 0 !important;
  border-radius: 10px !important;
  border: none !important;
  background: var(--color-primary) !important;
  color: #fff !important;
  font-size: 0.8125rem !important;
  font-weight: 600 !important;
  line-height: 1 !important;
  white-space: nowrap;
  cursor: pointer;
  transition: background 0.15s, transform 0.12s;
}

.nera-lucky-dip-inline__btn .material-symbols-outlined {
  font-size: 16px !important;
}

.nera-lucky-dip-inline__btn:hover {
  background: color-mix(in srgb, var(--color-primary) 88%, black) !important;
  transform: translateY(-1px);
}

.nera-lucky-dip-inline__error {
  flex-basis: 100%;
  width: 100%;
  margin: 0;
  padding: 0 2px;
  font-size: 0.8125rem;
  font-weight: 600;
  line-height: 1.4;
  color: #dc2626;
  text-align: left;
}

.nera-lucky-dip-inline__error[hidden] {
  display: none !important;
}

/* ── Regenerate popup ────────────────────────────────────────────── */
.nera-lucky-dip-regenerate {
  text-align: left;
}

.nera-lucky-dip-regenerate__header {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 20px 24px 16px;
  border-bottom: 1px solid #f1f5f9;
}

.nera-lucky-dip-regenerate__icon-wrap {
  width: 40px;
  height: 40px;
  border-radius: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: color-mix(in srgb, var(--color-primary) 12%, white);
  color: var(--color-primary);
  flex-shrink: 0;
}

.nera-lucky-dip-regenerate__icon-wrap .material-symbols-outlined {
  font-size: 22px !important;
}

.nera-lucky-dip-regenerate__title {
  margin: 0;
  font-size: 1.0625rem;
  font-weight: 700;
  color: var(--color-text-primary, #0f172a);
}

.nera-lucky-dip-regenerate__quantity {
  padding: 16px 24px;
}

.nera-lucky-dip-regenerate__qty-label {
  display: block;
  margin-bottom: 8px;
  font-size: 0.8125rem;
  font-weight: 600;
  color: var(--color-text-secondary, #64748b);
}

.nera-lucky-dip-regenerate__qty-row {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
}

.nera-lucky-dip-regenerate__quantity .nera-lucky-dip-inline__error {
  margin-top: 8px;
}

.nera-lucky-dip-regenerate__generate {
  flex: 1;
  min-width: 140px;
}

.nera-lucky-dip-regenerate__tickets-section {
  padding: 0 24px 12px;
}

.nera-lucky-dip-regenerate__tickets-title {
  margin: 0 0 10px;
  font-size: 0.8125rem;
  font-weight: 600;
  color: var(--color-text-secondary, #64748b);
}

.nera-lucky-dip-regenerate__actions {
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: 0 24px 24px;
}

.nera-lucky-dip-regenerate__actions .nera-lucky-dip-popup__tickets {
  justify-content: flex-start;
  margin-bottom: 4px;
}

@media (max-width: 480px) {
  .nera-lucky-dip-inline {
    flex-direction: column;
    align-items: stretch;
  }

  .nera-lucky-dip-inline__controls {
    justify-content: stretch;
  }

  .nera-lucky-dip-inline__btn {
    flex: 1;
  }
}

/* ============================================
   Entry List — Lottery for WooCommerce
   ============================================ */

.lty-data-table-wrapper,
.lty-ticket-logs-wrapper {
  border: none !important;
  border-radius: 0 !important;
  padding: 0 !important;
  box-shadow: none !important;
}

.lty-ticket-logs-table.shop_table {
  border: none !important;
  border-radius: 0 !important;
  margin: 0 !important;
}

.lty-ticket-logs-table td,
.lty-winner-logs-table td {
  @apply px-4 py-3 text-sm text-text-primary;
}

.lty-ticket-logs-table tr:hover td,
.lty-winner-logs-table tr:hover td {
  @apply bg-secondary;
  transition: background-color 0.15s ease;
}

.lty-ticket-logs-table td[data-title='Ticket Number'],
.lty-winner-logs-table td[data-title='Ticket Number'] {
  @apply font-mono font-bold text-primary;
}

/* Plugin status badge — theme colours */
.lty-entry-list-status .lty-lottery-status,
.lty-status-badge .lty-lottery-status {
  @apply inline-flex items-center rounded-full px-3 py-1 text-xs font-semibold;
  background-color: var(--color-secondary);
  color: var(--color-primary);
  border: 1px solid var(--color-gray-200);
}

/* Pagination inside entry list */
.lty-page-btn {
  @apply inline-flex h-8 w-8 items-center justify-center rounded-lg border border-gray-200 bg-surface text-sm font-medium text-text-primary no-underline transition-colors;
}

.lty-page-btn:hover {
  @apply border-gray-200 bg-secondary text-text-primary;
}

.lty-page-btn--active,
.lty-page-btn.current {
  @apply border-primary bg-primary font-bold text-white;
}

.lty-page-dot {
  @apply inline-flex h-8 w-8 items-center justify-center text-sm text-text-secondary;
}

/* Ticket list expand/collapse */
.ncs-ticket-expand > summary::-webkit-details-marker,
.ncs-ticket-expand > summary::marker { display: none; content: ''; }
.ncs-ticket-expand__chevron { display: inline-block; transition: transform 0.2s ease; }
.ncs-ticket-expand[open] .ncs-ticket-expand__chevron { transform: rotate(180deg); }

/* Dashed separator under PDF row — flex layout, no plugin floats (overrides frontend.css load order) */
.lty-entry-list-summary-content-wrapper .lty-entry-list-header-wrapper {
  float: none !important;
  display: flex !important;
  flex-wrap: wrap;
  align-items: center;
  justify-content: flex-end;
  width: 100%;
  padding-bottom: 0.75rem;
  margin-bottom: 1rem;
  border-bottom: 1px dashed var(--color-gray-300);
}

.lty-entry-list-summary-content-wrapper .lty-lottery-entry-list-pdf-download-button {
  float: none !important;
}

/* ==========================================================================
   Ticket-selection alertable — scoped to nera-lottery-alert class only
   ========================================================================== */

.nera-lottery-alert-overlay {
  z-index: 1000001 !important;
  background: rgba(0, 0, 0, 0.5) !important;
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
}

.alertable.nera-lottery-alert {
  z-index: 1000002 !important;
  top: 50% !important;
  left: 50% !important;
  transform: translate(-50%, -50%);
  width: calc(100% - 32px);
  max-width: 380px;
  margin: 0;
  padding: 0;
  border: 1px solid #f1f5f9;
  border-radius: 20px;
  box-shadow: 0 20px 80px rgba(0, 0, 0, 0.22);
  overflow: hidden;
  text-align: center;
}

.alertable.nera-lottery-alert .alertable-message {
  margin: 0;
  padding: 28px 24px 20px;
  font-size: 0.9375rem;
  font-weight: 600;
  line-height: 1.5;
  color: var(--color-text-primary, #0f172a);
}

.alertable.nera-lottery-alert .alertable-message::before {
  content: 'confirmation_number';
  display: flex;
  align-items: center;
  justify-content: center;
  width: 56px;
  height: 56px;
  margin: 0 auto 12px;
  border-radius: 999px;
  font-family: 'Material Symbols Outlined';
  font-size: 30px;
  font-weight: 400;
  line-height: 1;
  color: var(--color-primary);
  background: color-mix(in srgb, var(--color-primary) 12%, white);
}

.alertable.nera-lottery-alert .alertable-buttons {
  padding: 0 24px 24px;
  text-align: center;
}

.alertable.nera-lottery-alert .alertable-ok {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  margin: 0;
  padding: 12px 16px;
  border: none;
  border-radius: 12px;
  font-size: 0.9375rem;
  font-weight: 600;
  color: #fff;
  background: var(--color-primary);
  box-shadow: 0 4px 14px color-mix(in srgb, var(--color-primary) 35%, transparent);
  cursor: pointer;
  transition: background 0.15s, transform 0.12s, box-shadow 0.15s;
}

.alertable.nera-lottery-alert .alertable-ok:hover,
.alertable.nera-lottery-alert .alertable-ok:focus,
.alertable.nera-lottery-alert .alertable-ok:active {
  background: color-mix(in srgb, var(--color-primary) 88%, black);
  transform: translateY(-1px);
}

@media (max-width: 480px) {
  .alertable.nera-lottery-alert {
    width: calc(100% - 24px);
    max-width: none;
  }

  .alertable.nera-lottery-alert .alertable-message {
    padding: 24px 20px 16px;
    font-size: 0.875rem;
  }

  .alertable.nera-lottery-alert .alertable-buttons {
    padding: 0 20px max(20px, env(safe-area-inset-bottom));
  }
}

/* ════════════════════════════════════════════════════════════════════
   Lucky Dip — two-column skill-question variant

   Applies only to popups that ask a skill question. Products without one
   keep the single-column popup exactly as it was.

   The two columns are a pair, not a stack side by side: they share a top
   edge, share a bottom edge, and their action buttons sit on the same
   line. That only holds if each column is its own flex column with the
   body allowed to absorb the slack — otherwise the shorter side floats
   its buttons halfway up and the divider stops short of the footer.
   ════════════════════════════════════════════════════════════════════ */

.jquery-modal .modal.nera-lucky-dip-regenerate--with-qa,
.jquery-modal .lty-regenerate-ticket-lucky-dip-popup-wrapper.nera-lucky-dip-regenerate--with-qa.modal,
.jquery-modal .modal.nera-lucky-dip-popup--with-qa,
.jquery-modal .lty-ticket-lucky-dip-popup-wrapper.nera-lucky-dip-popup--with-qa.modal {
  max-width: 800px;
}

/* ── Grid ─────────────────────────────────────────────────────────── */

.nera-lucky-dip-regenerate--with-qa .nera-lucky-dip-regenerate__layout,
.nera-lucky-dip-popup--with-qa .nera-lucky-dip-regenerate__layout {
  display: grid;
  grid-template-columns: 1fr;
}

@media (min-width: 768px) {
  .nera-lucky-dip-regenerate--with-qa .nera-lucky-dip-regenerate__layout,
  .nera-lucky-dip-popup--with-qa .nera-lucky-dip-regenerate__layout {
    /* Equal halves. minmax(0,·) stops a long ticket row from widening its
       own column and knocking the divider off centre. */
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  }

  .nera-lucky-dip-regenerate--with-qa .nera-lucky-dip-regenerate__qa,
  .nera-lucky-dip-popup--with-qa .nera-lucky-dip-regenerate__qa {
    border-right: 1px solid #f1f5f9;
    border-bottom: 0;
  }
}

/* ── Columns ──────────────────────────────────────────────────────── */

.nera-lucky-dip-regenerate--with-qa .nera-lucky-dip-regenerate__qa,
.nera-lucky-dip-regenerate--with-qa .nera-lucky-dip-regenerate__main,
.nera-lucky-dip-popup--with-qa .nera-lucky-dip-regenerate__qa,
.nera-lucky-dip-popup--with-qa .nera-lucky-dip-regenerate__main {
  display: flex;
  flex-direction: column;
  min-width: 0;
  /* One padding value for both columns is what puts their first line of
     text on the same baseline. */
  padding: 22px 24px 24px;
  /* The success popup centres its header; the columns below are reading
     content and must not inherit that. */
  text-align: left;
}

.nera-lucky-dip-regenerate--with-qa .nera-lucky-dip-regenerate__qa {
  border-bottom: 1px solid #f1f5f9;
}

/* Inner blocks give up their own gutters — the column owns horizontal
   spacing now, so both sides line up on the same inner edges. */
.nera-lucky-dip-regenerate--with-qa .nera-lucky-dip-regenerate__quantity,
.nera-lucky-dip-regenerate--with-qa .nera-lucky-dip-regenerate__tickets-section,
.nera-lucky-dip-regenerate--with-qa .nera-lucky-dip-regenerate__actions,
.nera-lucky-dip-popup--with-qa .nera-lucky-dip-regenerate__quantity,
.nera-lucky-dip-popup--with-qa .nera-lucky-dip-regenerate__tickets-section,
.nera-lucky-dip-popup--with-qa .nera-lucky-dip-popup__body,
.nera-lucky-dip-popup--with-qa .nera-lucky-dip-popup__actions {
  padding-left: 0;
  padding-right: 0;
}

/* The ticket list opens the column now, so it is the one that must not add
   padding above the column's own. Quantity keeps its 16px top padding as the
   gap between the list and the button it belongs to. */
.nera-lucky-dip-regenerate--with-qa .nera-lucky-dip-regenerate__tickets-section,
.nera-lucky-dip-popup--with-qa .nera-lucky-dip-popup__body {
  padding-top: 0;
}

/* ── Shared bottom edge ───────────────────────────────────────────── */
/* The body of each column takes the leftover height so the buttons land
   on the same line no matter which side has more content. */

.nera-lucky-dip-regenerate--with-qa .nera-lucky-dip-regenerate__qa .skill-challenge-wrapper,
.nera-lucky-dip-popup--with-qa .nera-lucky-dip-regenerate__qa .skill-challenge-wrapper {
  flex: 1 1 auto;
}

.nera-lucky-dip-regenerate--with-qa .nera-lucky-dip-regenerate__tickets-section,
.nera-lucky-dip-popup--with-qa .nera-lucky-dip-popup__body {
  flex: 1 1 auto;
}

.nera-lucky-dip-regenerate--with-qa .nera-lucky-dip-regenerate__actions,
.nera-lucky-dip-popup--with-qa .nera-lucky-dip-popup__actions {
  margin-top: auto;
  padding-bottom: 0;
}

.nera-lucky-dip-regenerate__answer {
  width: 100%;
  margin-top: 14px;
}

/* ── Question column ──────────────────────────────────────────────── */
/* The component ships page-level chrome — its own card, border and
   bottom margin. Inside a popup column that reads as a box within a box,
   so it is flattened back to plain content. */

.nera-lucky-dip-regenerate__qa .skill-challenge-wrapper {
  margin-bottom: 0;
  padding: 0;
  border: 0;
  background: transparent;
}

.nera-lucky-dip-regenerate__qa .nera-contest-qa-container {
  margin-bottom: 0;
}

/* Unanswered state. There is no sentence of validation copy any more: the
   note above the button already asks for an answer, so a third block of text
   after the click added reading without adding information. Colouring the
   options points at what needs attention instead. */
.nera-lucky-dip-regenerate__qa[data-nera-qa-invalid='yes'] [data-nera-qa-option] > div {
  border-color: var(--color-danger, #dc2626);
  background: color-mix(in srgb, var(--color-danger, #dc2626) 4%, white);
}

.nera-lucky-dip-regenerate__qa[data-nera-qa-invalid='yes'] [data-nera-qa-option] > div > div:first-child {
  border-color: var(--color-danger, #dc2626);
}

.nera-lucky-dip-regenerate__qa[data-nera-qa-invalid='yes'] [data-nera-qa-option] span {
  color: var(--color-danger, #dc2626);
}

/* Once an option is picked, its own selected styling wins over the red. */
.nera-lucky-dip-regenerate__qa[data-nera-qa-invalid='yes'] [data-nera-qa-option][data-nera-qa-selected='yes'] > div {
  border-color: var(--color-primary, #1313ec);
  background: var(--color-surface, #fff);
}

/* Selected state, standing in for the Alpine :class bindings the page
   version uses — the popup renders the question Alpine-free. */
.nera-lucky-dip-regenerate__qa [data-nera-qa-option][data-nera-qa-selected='yes'] > div {
  border-color: var(--color-primary, #1313ec);
  box-shadow: 0 0 0 1px color-mix(in srgb, var(--color-primary, #1313ec) 20%, transparent);
}

.nera-lucky-dip-regenerate__qa [data-nera-qa-option][data-nera-qa-selected='yes'] > div > div:first-child {
  border-color: var(--color-primary, #1313ec);
  background: var(--color-primary, #1313ec);
}

.nera-lucky-dip-regenerate__qa [data-nera-qa-option][data-nera-qa-selected='yes'] > div > div:first-child > div {
  opacity: 1;
}

.nera-lucky-dip-regenerate__qa [data-nera-qa-option][data-nera-qa-selected='yes'] span {
  color: var(--color-text-primary, #0f172a);
}

/* ── Ticket list ──────────────────────────────────────────────────── */
/* The plugin pins this to height:150px with overflow-y:scroll, so a
   single ticket sat in a tall grey box with a permanent scrollbar. Size
   it to its contents instead and only scroll once there is enough to
   scroll. */

.nera-lucky-dip-regenerate--with-qa .lty-regenerate-lucky-dip-tickets,
.nera-lucky-dip-popup--with-qa .lty-lucky-dip-tickets {
  height: auto;
  min-height: 0;
  max-height: 168px;
  overflow-y: auto;
  margin: 0;
  padding: 12px;
  border: 1px solid #eef2f7;
  border-radius: 12px;
  background: #fbfcfe;
  justify-content: flex-start;
  align-content: flex-start;
}

/* The single-ticket hero treatment (oversized centred chip) belongs to the
   old one-column success popup. In the two-column shell it made the chip after
   adding look nothing like the same chip before adding, so the two steps read
   as different screens. Chips stay identical across both. */
.nera-lucky-dip-popup--with-qa .lty-lucky-dip-tickets.nera-lucky-dip-popup__tickets--single {
  justify-content: flex-start;
  padding: 12px;
}

.nera-lucky-dip-popup--with-qa .nera-lucky-dip-popup__tickets--single .nera-lucky-dip-popup__ticket-chip {
  min-width: 52px;
  padding: 8px 12px;
  font-size: 0.875rem;
  border-radius: 10px;
  letter-spacing: normal;
}

/* Match the 12px the pre-add popup leaves under its ticket list. */
.nera-lucky-dip-popup--with-qa .nera-lucky-dip-popup__body {
  padding-bottom: 12px;
}

@media (max-width: 767px) {
  .nera-lucky-dip-regenerate--with-qa .nera-lucky-dip-regenerate__qa,
  .nera-lucky-dip-popup--with-qa .nera-lucky-dip-regenerate__qa {
    padding-bottom: 20px;
  }

  .nera-lucky-dip-regenerate--with-qa .nera-lucky-dip-regenerate__main,
  .nera-lucky-dip-popup--with-qa .nera-lucky-dip-regenerate__main {
    padding-top: 20px;
  }
}

/* ── Disabled action buttons ──────────────────────────────────────── */
/*
 * There was no disabled state at all: the secondary variant is already a
 * pale grey card, so a disabled button looked identical to a live one and
 * people kept clicking it. Three signals, not one — colour drops, the
 * border goes dashed to read as "not yet", and the cursor confirms it.
 */

.nera-lucky-dip-popup__btn:disabled,
.nera-lucky-dip-popup__btn[disabled],
.nera-lucky-dip-popup__btn[aria-disabled='true'] {
  background: #f8fafc;
  color: #94a3b8 !important;
  border: 1px dashed #cbd5e1;
  box-shadow: none;
  cursor: not-allowed;
  opacity: 1; /* colour carries the state; opacity alone reads as "loading" */
}

.nera-lucky-dip-popup__btn:disabled .material-symbols-outlined,
.nera-lucky-dip-popup__btn[disabled] .material-symbols-outlined,
.nera-lucky-dip-popup__btn[aria-disabled='true'] .material-symbols-outlined {
  color: #cbd5e1;
}

/* Hover must not animate or lighten a button that cannot be pressed. */
.nera-lucky-dip-popup__btn:disabled:hover,
.nera-lucky-dip-popup__btn[disabled]:hover,
.nera-lucky-dip-popup__btn[aria-disabled='true']:hover {
  background: #f8fafc;
  border-color: #cbd5e1;
  transform: none;
  box-shadow: none;
}

/* ── "Why is this locked?" note ───────────────────────────────────── */

.nera-lucky-dip-regenerate__gate-note {
  display: flex;
  align-items: flex-start;
  gap: 6px;
  margin: 0 0 10px;
  color: var(--color-text-secondary, #64748b);
  font-size: 0.8125rem;
  line-height: 1.45;
}

.nera-lucky-dip-regenerate__gate-note .material-symbols-outlined {
  flex: 0 0 auto;
  font-size: 16px !important;
  line-height: 1.45;
  color: #94a3b8;
}

/* ── Footer buttons: no coloured glow inside a popup ──────────────── */
/*
 * The glow reads well on a page where the button floats over content. Pressed
 * against a popup's bottom edge it just smears the corner, so it comes off
 * here — the button already reads as primary from its fill.
 */
.nera-lucky-dip-popup__actions .nera-lucky-dip-popup__btn--primary,
.nera-lucky-dip-regenerate__actions .nera-lucky-dip-popup__btn--primary,
.nera-lucky-dip-regenerate__qa .nera-lucky-dip-popup__btn--primary {
  box-shadow: none;
}

.nera-lucky-dip-popup__actions .nera-lucky-dip-popup__btn--primary:hover,
.nera-lucky-dip-regenerate__actions .nera-lucky-dip-popup__btn--primary:hover,
.nera-lucky-dip-regenerate__qa .nera-lucky-dip-popup__btn--primary:hover {
  box-shadow: none;
}

/* ── Quantity locked with Add More Lucky Dip ──────────────────────── */
/*
 * Matches the disabled button beneath it: muted colour, dashed border,
 * not-allowed cursor. The fieldset itself is only a disabling device and
 * must contribute no box of its own.
 */

.nera-lucky-dip-regenerate__qty-lock {
  margin: 0;
  padding: 0;
  border: 0;
  min-width: 0;
}

.nera-lucky-dip-regenerate__quantity--locked .nera-lucky-dip-regenerate__qty-label {
  color: #94a3b8;
}

.nera-lucky-dip-regenerate__quantity--locked .nera-lucky-dip-inline__qty input[type='number'],
.nera-lucky-dip-regenerate__quantity--locked .nera-lucky-dip-inline__qty input[type='text'] {
  background: #f8fafc;
  color: #94a3b8;
  border-style: dashed;
  border-color: #cbd5e1;
  cursor: not-allowed;
  box-shadow: none;
}

/* Kill the focus ring the field would otherwise still paint on click. */
.nera-lucky-dip-regenerate__quantity--locked .nera-lucky-dip-inline__qty input:focus {
  outline: none;
  border-color: #cbd5e1;
  box-shadow: none;
}

/* ── Answer verdict message ───────────────────────────────────────── */
/*
 * Carries the plugin's .nera-lucky-dip-inline__error class for the sake of
 * lottery-alertable.js, which clears every element with it — so these rules
 * have to win over that class's own styling.
 */
.nera-lucky-dip-regenerate__qa-message {
  margin: 12px 0 0 !important;
  padding: 10px 12px;
  border-radius: 10px;
  background: color-mix(in srgb, var(--color-danger, #dc2626) 6%, white);
  border: 1px solid color-mix(in srgb, var(--color-danger, #dc2626) 22%, transparent);
  color: var(--color-danger, #dc2626);
  font-size: 0.8125rem;
  font-weight: 600;
  line-height: 1.45;
}

.nera-lucky-dip-regenerate__qa-message[hidden] {
  display: none !important;
}

/* An empty slot must take no space even if something unhides it. */
.nera-lucky-dip-regenerate__qa-message:empty {
  display: none !important;
}

/* ── Quantity row: field plus its own action button ───────────────── */
/*
 * Re-generate and Add More sit beside the quantity field they consume rather
 * than stacked below with the primary action — the shape the Generate button
 * already used. Colours are untouched: these stay secondary, the full-width
 * button below stays primary.
 */
.nera-lucky-dip-regenerate__add-more {
  flex: 1;
  width: auto;
  min-width: 140px;
  margin: 0;
}

/* ── Answer committed: column is read-only ────────────────────────── */
/*
 * After a successful add the answer lives on the cart item. Editing the radios
 * could only desynchronise what is displayed from what was bought, so the
 * column becomes a record rather than an input: no pointer affordance, no
 * hover, and the committed answer stays visibly selected.
 */
.nera-lucky-dip-regenerate__qa[data-nera-qa-frozen='yes'] [data-nera-qa-option] {
  cursor: default;
}

.nera-lucky-dip-regenerate__qa[data-nera-qa-frozen='yes'] [data-nera-qa-option] > div {
  border-color: #e2e8f0;
  background: #f8fafc;
}

.nera-lucky-dip-regenerate__qa[data-nera-qa-frozen='yes'] [data-nera-qa-option] span {
  color: #94a3b8;
}

/* The committed one keeps full contrast so it reads as the answer given. */
.nera-lucky-dip-regenerate__qa[data-nera-qa-frozen='yes'] [data-nera-qa-option][data-nera-qa-selected='yes'] > div {
  border-color: var(--color-primary, #1313ec);
  background: var(--color-surface, #fff);
}

.nera-lucky-dip-regenerate__qa[data-nera-qa-frozen='yes'] [data-nera-qa-option][data-nera-qa-selected='yes'] span {
  color: var(--color-text-primary, #0f172a);
}