/* diplux booking widget styles — companion to booking.js.
   Self-contained (no dependency on style.css's own rules beyond inheriting
   the page's font-family/line-height), so a concept-project landing on its
   own separate domain can link this file directly and get the widget looking
   right without recreating ~400 lines of CSS per landing. The widget renders
   in diplux.com's own typewriter aesthetic regardless of the host page's
   brand — it's the same booking product wherever it's embedded. */

.booking p {
  margin-bottom: 0.75rem;
}

.booking-event {
  text-transform: uppercase;
  letter-spacing: 0.05em;
  font-size: 0.95rem;
}

.booking-event .tier-meta {
  text-transform: none;
  letter-spacing: 0;
}

.booking-app {
  margin-top: 1.5rem;
}

.booking-status {
  color: #555;
  font-size: 0.75rem;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  min-height: 1.2em;
  margin-bottom: 0.5rem;
}

.booking-loading,
.booking-fineprint {
  color: #555;
  font-size: 0.85rem;
}

/* time zone bar */
.tz-bar {
  border-top: 1px solid #999;
  border-bottom: 1px solid #999;
  padding: 0.6rem 0;
  margin-bottom: 1.25rem;
}

.tz-line {
  font-size: 0.75rem;
  letter-spacing: 0.05em;
  color: #555;
  margin: 0;
}

.tz-current {
  color: #111;
  letter-spacing: 0;
}

.tz-toggle {
  font-family: inherit;
  font-size: 0.75rem;
  letter-spacing: 0.05em;
  color: #555;
  background: none;
  border: 0;
  padding: 0;
  cursor: pointer;
  text-decoration: underline;
  position: relative;
}

/* The word sits inside a sentence, so it has to stay typographically small —
   but it is also the only way to change the zone, and its struck line is barely
   15px tall, which no thumb can reliably hit. Grow the TAP AREA rather than the
   box: an absolutely positioned overlay gives a finger a 44px target while the
   line it sits in keeps its height and the sentence keeps its rhythm. */
.tz-toggle::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  top: 50%;
  height: 46px;
  min-width: 44px;
  transform: translateY(-50%);
}

.tz-toggle:hover {
  color: #111;
}

.tz-picker {
  margin-top: 0.6rem;
}

.tz-select-label {
  display: block;
  color: #555;
  font-size: 0.75rem;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  margin-bottom: 0.2rem;
}

.tz-select {
  font-family: inherit;
  font-size: 0.85rem;
  color: #111;
  background: #fff;
  border: 1px solid #111;
  border-radius: 0;
  padding: 0.5rem;
  min-height: 44px;
  width: 100%;
  max-width: 24rem;
}

/* day groups + slots */
.booking-day {
  margin-bottom: 1.5rem;
}

.booking-day-head {
  margin: 0 0 0.5rem;
  color: #333;
  font-size: 0.75rem;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  border-bottom: 1px solid #999;
  padding-bottom: 0.2rem;
}

/* Time slots are drawn the way a typewriter would have to draw them: a machine
   with no line-drawing capability strikes + at the corners, - along the top and
   bottom, and | down the sides. The side rules are literal characters in the
   button's text (with aria-label carrying the bare time, so the box is never
   read aloud); the top and bottom rules are pseudo-elements.

   The width is fixed at 9ch because the label is always exactly "| HH:MM |" —
   nine monospace characters — so the drawn rules line up with the sides exactly,
   with no sub-pixel drift at any zoom level. */
.slot {
  font-family: inherit;
  font-size: 0.9rem;
  line-height: 1.15;
  color: #111;
  background: none;
  border: 0;
  border-radius: 0;
  padding: 0;
  width: 9ch;
  margin: 0 2.25ch 0.75rem 0;
  cursor: pointer;
  white-space: pre;
  text-align: left;
  /* Three struck lines already clear the 44px target; this guarantees it when
     the visitor's font stack renders smaller than ours. */
  min-height: 44px;
}

.slot::before,
.slot::after {
  content: "+-------+";
  display: block;
  color: inherit;
}

/* Hover lifts the typed box off the page.

   The shadow is cast by `filter: drop-shadow`, NOT `box-shadow`. box-shadow
   shadows the element's bounding RECTANGLE, which would put a hard grey slab
   behind a box whose frame is made of characters — the interior is empty, so
   the shadow has nothing to belong to. drop-shadow follows the alpha of what is
   actually painted, so the shade falls off the struck +, - and | glyphs and off
   the digits themselves, and the middle of the box stays paper.

   That is also why the background must stay transparent: an opaque fill would
   hand drop-shadow a solid rectangle to trace and undo the whole effect. */
.slot {
  background: none;
  transition: transform 90ms ease-out, filter 90ms ease-out;
}

.slot:hover,
.slot:focus-visible {
  transform: translate(-1px, -2px);
  filter: drop-shadow(2px 3px 1px rgba(17, 17, 17, 0.5));
}

.slot:active {
  /* Pressed back down onto the page — the key striking home. */
  transform: translate(0, 0);
  filter: drop-shadow(1px 1px 0 rgba(17, 17, 17, 0.45));
}

/* Keyboard focus needs a marker that does not depend on depth cues: a lift is
   easy to miss, and invisible to anyone with reduced transparency or contrast
   settings. */
.slot:focus-visible {
  outline: 2px solid #111;
  outline-offset: 2px;
}

@media (prefers-reduced-motion: reduce) {
  .slot {
    transition: none;
  }

  .slot:hover,
  .slot:focus-visible,
  .slot:active {
    transform: none; /* the shadow alone still signals the hover */
  }
}

/* The 409 alternatives carry a full date, so they cannot use a fixed-width
   character box. They stay in the same family with a struck-hyphen frame. */
.slot-alt {
  width: auto;
  min-width: 0;
  font-size: 0.85rem;
  white-space: normal;
  padding: 0.5rem 0.75rem;
  border: 1px dashed #111;
}

.slot-alt::before,
.slot-alt::after {
  content: none;
}

.slot-alt:hover,
.slot-alt:focus-visible {
  transform: translate(-1px, -2px);
  filter: drop-shadow(2px 3px 1px rgba(17, 17, 17, 0.5));
}

/* selected time + form */
.booking-chosen {
  border: 1px solid #111;
  padding: 1rem 1.25rem;
  margin-bottom: 1.25rem;
}

.chosen-label,
.confirmed-label {
  color: #555;
  font-size: 0.75rem;
  letter-spacing: 0.05em;
  margin-bottom: 0.2rem;
}

.chosen-time,
.confirmed-time {
  font-size: 0.95rem;
  margin-bottom: 0.75rem;
}

.booking-form {
  margin-top: 1.25rem;
}

.field {
  margin-bottom: 1rem;
}

.field label {
  display: block;
  color: #555;
  font-size: 0.75rem;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  margin-bottom: 0.2rem;
}

.field input,
.field textarea {
  font-family: inherit;
  font-size: 0.95rem;
  line-height: 1.5;
  color: #111;
  background: #fff;
  border: 1px solid #111;
  border-radius: 0;
  padding: 0.5rem;
  min-height: 44px;
  width: 100%;
}

.field-hint {
  color: #777;
  font-size: 0.75rem;
  margin: 0.2rem 0 0;
}

.booking-actions {
  margin: 1.25rem 0 0.75rem;
}

.btn-primary,
.btn-secondary {
  font-family: inherit;
  font-size: 0.85rem;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  border: 1px solid #111;
  border-radius: 0;
  min-height: 44px;
  padding: 0.6rem 1.25rem;
  cursor: pointer;
}

.btn-primary {
  background: #111;
  color: #fff;
}

.btn-primary:hover {
  background: #333;
  border-color: #333;
}

.btn-primary[disabled] {
  background: #fff;
  color: #777;
  border-color: #999;
  cursor: default;
}

.btn-secondary {
  background: #fff;
  color: #111;
}

.btn-secondary:hover {
  background: #111;
  color: #fff;
}

/* notices, errors, confirmation */
.booking-error,
.booking-notice,
.booking-confirmed {
  padding: 1rem 1.25rem;
  margin-bottom: 1.25rem;
}

.booking-error,
.booking-confirmed {
  border: 1px solid #111;
}

.booking-notice {
  border: 1px solid #999;
  color: #333;
}

.confirmed-meta {
  color: #555;
  font-size: 0.85rem;
}

.confirmed-links {
  list-style: none;
  padding: 0;
  margin: 0 0 1rem;
}

.confirmed-links li {
  font-size: 0.9rem;
  margin-bottom: 0.3rem;
}

.next-available {
  display: block;
  color: #555;
  font-size: 0.75rem;
  letter-spacing: 0.05em;
  margin-top: 0.5rem;
}

.next-available:empty {
  display: none;
}

/* honeypot: off-screen, never focusable */
.hp {
  position: absolute;
  left: -9999px;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

/* focus rings — the :focus rule stands alone so older engines keep it */
.booking :focus {
  outline: 2px solid #111;
  outline-offset: 2px;
}

.booking :focus:not(:focus-visible) {
  outline: none;
}

.booking :focus-visible {
  outline: 2px solid #111;
  outline-offset: 2px;
}

@media (max-width: 520px) {
  .slot,
  .btn-primary,
  .btn-secondary {
    display: block;
    width: 100%;
    margin-right: 0;
  }

  .booking-chosen .btn-secondary {
    margin-top: 0.5rem;
  }
}