/* Verification, and the booking summary panel it shares with payment,
   confirmation and manage booking.

   Written against tokens only. The 118px tile height and 32px panel inset are
   authored values from the source. */

.kssk-verify { display: flex; flex-direction: column; gap: var(--space-24); }

/* UploadTile. The dashed border is one of the few borders in the system, and
   it is doing a job: saying this is a drop zone rather than a filled surface. */

.kssk-upload {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: var(--space-8);
  width: 100%;
  min-height: 118px;
  padding: var(--space-24);
  box-sizing: border-box;
  text-align: center;
  border: var(--dash-upload);
  border-radius: var(--radius-sm);
  background: var(--surface-subtle);
  cursor: pointer;
  transition: background-color var(--duration-fast) var(--ease-standard);
}

.kssk-upload:hover { background: var(--neutral-200); }

/* The input is the control; the label is its face. Keeping it focusable and
   merely invisible, rather than display:none, means keyboard and screen-reader
   users get the same tile. */
.kssk-upload__input {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

.kssk-upload:focus-within {
  outline: none;
  box-shadow: var(--focus-ring);
}

.kssk-upload__label {
  font-family: var(--font-body);
  font-weight: var(--weight-bold);
  font-size: var(--text-sm);
  line-height: var(--leading-22);
  color: var(--text-primary);
}

.kssk-upload__hint {
  font-family: var(--font-body);
  font-size: var(--text-xs);
  line-height: var(--leading-18);
  color: var(--text-secondary);
  /* A long filename must not stretch the tile and break the 2x2 grid. */
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.kssk-upload__formats {
  font-family: var(--font-body);
  font-style: italic;
  font-size: var(--text-note);
  line-height: var(--leading-18);
  color: var(--text-muted);
}

.kssk-upload.is-filled { background: var(--status-success-surface); border-style: solid; border-color: var(--status-success); }
.kssk-upload.is-filled .kssk-upload__glyph { color: var(--status-success); }

.kssk-upload.is-rejected { background: var(--status-danger-surface); border-color: var(--status-danger); }
.kssk-upload.is-rejected .kssk-upload__hint { color: var(--status-danger); font-weight: var(--weight-bold); }

/* A gated submit is dimmed but never disabled: the browser's own required
   check gives a better message than a dead button, and the server validates
   regardless. */
[data-kssk-verify-submit][aria-disabled="true"] { opacity: 0.45; }

/* BookingSummaryCard */

.kssk-summary {
  display: flex;
  flex-direction: column;
  gap: var(--space-24);
  padding: var(--space-32);
  box-sizing: border-box;
  background: var(--surface-subtle);
  align-self: start;
}

.kssk-summary__name {
  margin: 0;
  font-family: var(--font-body);
  font-weight: var(--weight-bold);
  font-size: var(--text-xl);
  line-height: var(--leading-30);
  color: var(--text-primary);
}

.kssk-summary__class {
  margin: 2px 0 0;
  font-family: var(--font-body);
  font-style: italic;
  font-size: var(--text-sm);
  line-height: var(--leading-22);
  color: var(--text-muted);
}

.kssk-summary__chips { display: flex; flex-wrap: wrap; gap: var(--space-8); }

.kssk-summary__when { display: flex; flex-wrap: wrap; gap: var(--space-32); }
.kssk-summary__cell { display: flex; flex-direction: column; gap: 2px; }

/* Uppercase means this is a data label, never that it is important. */
.kssk-summary__cell-label {
  font-family: var(--font-body);
  font-weight: var(--weight-bold);
  font-size: var(--text-xs);
  line-height: var(--leading-18);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--text-muted);
}

.kssk-summary__cell-date {
  font-family: var(--font-body);
  font-weight: var(--weight-bold);
  font-size: var(--text-xl);
  line-height: var(--leading-30);
  color: var(--text-primary);
}

.kssk-summary__cell-time {
  font-family: var(--font-body);
  font-size: var(--text-base);
  line-height: var(--leading-24);
  color: var(--text-secondary);
}

.kssk-summary__rows { display: flex; flex-direction: column; gap: var(--space-12); }

/* Badge */

.kssk-badge {
  align-self: flex-start;
  padding: var(--space-4) var(--space-12);
  border-radius: var(--radius-sm);
  font-family: var(--font-body);
  font-weight: var(--weight-bold);
  font-size: var(--text-sm);
  line-height: var(--leading-22);
}

/* Status is the ONLY thing in the system that uses colour semantically. */
.kssk-badge--pending { background: var(--status-pending-surface); color: var(--kssk-orange); }
.kssk-badge--success { background: var(--status-success-surface); color: var(--green-700); }
.kssk-badge--danger { background: var(--status-danger-surface); color: var(--red-700); }

/* PriceRow */

.kssk-price-row {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--space-24);
}

.kssk-price-row__label {
  font-family: var(--font-body);
  font-size: var(--text-base);
  line-height: var(--leading-24);
  color: var(--text-body);
}

.kssk-price-row__note { font-style: italic; font-weight: var(--weight-regular); }

.kssk-price-row__amount {
  flex-shrink: 0;
  font-family: var(--font-body);
  font-weight: var(--weight-bold);
  font-size: var(--text-base);
  line-height: var(--leading-24);
  color: var(--text-body);
}

.kssk-price-row--promo .kssk-price-row__label,
.kssk-price-row--promo .kssk-price-row__amount { color: var(--status-success); font-weight: var(--weight-bold); }

.kssk-price-row--total {
  padding-top: var(--space-16);
  margin-top: var(--space-8);
  border-top: var(--divider);
}

.kssk-price-row--total .kssk-price-row__label {
  font-weight: var(--weight-bold);
  font-size: var(--text-lg);
  color: var(--text-primary);
}

.kssk-price-row--total .kssk-price-row__amount {
  font-size: var(--text-3xl);
  line-height: var(--leading-33);
  color: var(--text-primary);
}

/* Manage booking */

.kssk-manage__created { margin-bottom: var(--space-32); }

.kssk-lookup {
  background: var(--surface-panel);
  border-radius: var(--radius-sm);
  padding: var(--space-32);
  margin-bottom: var(--space-40);
  box-sizing: border-box;
}

.kssk-lookup__title {
  margin: 0 0 var(--space-24);
  font-family: var(--font-display);
  font-weight: 400;
  font-size: var(--text-4xl);
  line-height: var(--leading-37);
  color: var(--text-primary);
}

/* The shared row carries a top margin for the hero panel, where a note sits
   above it. Here the title already supplies that gap. */
.kssk-lookup .kssk-searchpanel__row { margin-top: 0; }

.kssk-lookup__cta { height: 49px; min-width: 220px; }

.kssk-lookup__error { margin-top: var(--space-16); }

.kssk-summary__reference {
  display: flex;
  align-items: center;
  gap: 10px;
  margin: 0;
  font-family: var(--font-body);
  font-size: var(--text-sm);
  line-height: var(--leading-22);
  color: var(--text-secondary);
}

.kssk-summary__reference b { color: var(--text-primary); }

.kssk-summary__footer { display: flex; justify-content: flex-end; }

.kssk-manage__actions { display: flex; flex-wrap: wrap; gap: var(--space-12); }

/* Under 768 the two actions stack and each takes the full width, so neither
   ends up a thumb-width target at the bottom of a long page. */
@media (max-width: 767px) {
  .kssk-lookup .kssk-searchpanel__row { flex-direction: column; }
  .kssk-lookup__cta { width: 100%; min-width: 0; }
  .kssk-summary__footer { justify-content: stretch; }
  .kssk-manage__actions { width: 100%; flex-direction: column-reverse; }
  .kssk-manage__actions .kssk-button { width: 100%; }
}