/* custom-whats-included.css
   Bring the "What's Included" panel into harmony with the right-hand info
   cards: white surface, coral accent heading, soft coral chips.
   Uses the shared --ft-* tokens (with literal fallbacks). */

#playdate-info {
  background: var(--ft-surface, #ffffff) !important;
  border: 1px solid var(--ft-border, rgba(15, 23, 42, 0.08));
  border-radius: var(--ft-radius, 16px);
  box-shadow: var(--ft-shadow, 0 1px 2px rgba(15, 23, 42, 0.05));
  padding: 22px 24px;
  color: var(--ft-ink, #1f2937) !important;
  transition: box-shadow 0.2s ease;
}
#playdate-info:hover {
  background: var(--ft-surface, #ffffff) !important;   /* kill the old blue hover */
  box-shadow: var(--ft-shadow-lg, 0 12px 32px rgba(15, 23, 42, 0.10));
}

/* Heading — coral accent bar, left aligned, matching the right-hand cards */
#playdate-info h3 {
  position: relative;
  background: transparent !important;
  color: var(--ft-ink, #1f2937) !important;
  font-family: 'Quicksand', 'Nunito Sans', sans-serif;
  font-size: 1.15rem;
  font-weight: 700;
  text-align: left !important;
  padding: 0 0 0 12px !important;
  margin: 0 0 16px !important;
  border-radius: 0 !important;
  cursor: pointer;
}
#playdate-info h3::before {
  content: "";
  position: absolute;
  left: 0; top: 2px; bottom: 2px;
  width: 4px;
  border-radius: 9999px;
  background: var(--ft-coral, #ff5a5f);
}

/* Rows — tidy, with a hairline divider between categories */
#playdate-info ul { list-style: none; margin: 0; padding: 0; }
#playdate-info > ul > li {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  padding: 11px 0;
  border-bottom: 1px solid var(--ft-border, rgba(15, 23, 42, 0.08));
}
#playdate-info > ul > li:last-child { border-bottom: 0; }
#playdate-info > ul > li > strong {
  flex: 0 0 96px;
  color: var(--ft-muted, #6b7280);
  font-weight: 700;
  font-size: 0.9rem;
}

/* Chip containers — wrap neatly beside the label */
#playdate-info .theoretical-block-label-container,
#playdate-info .resources-block-label-container,
#playdate-info .supervision-block-label-container,
#playdate-info .cert-block-label-container,
#playdate-info .bring-block-label-container {
  display: inline-flex;
  flex-wrap: wrap;
  gap: 6px;
  margin: 0;
  vertical-align: middle;
}

/* Chips — soft coral tags replacing the hard blue pills */
#playdate-info .theoretical-block-label,
#playdate-info .resources-block-label,
#playdate-info .supervision-block-label,
#playdate-info .cert-block-label,
#playdate-info .bring-block-label {
  display: inline-block;
  background-color: var(--ft-coral-soft, #fff1f1) !important;
  color: var(--ft-coral-dark, #e14e50) !important;
  border: 1px solid rgba(255, 90, 95, 0.22) !important;
  font-weight: 600 !important;
  font-size: 0.88rem !important;
  line-height: 1.3 !important;
  padding: 5px 12px !important;
  border-radius: 9999px !important;
  margin: 0 !important;
  box-shadow: none !important;
  cursor: pointer;
}

/* Preserve the edit-mode (red) affordance for the owner */
#playdate-info .theoretical-block-label.edit-mode,
#playdate-info .resources-block-label.edit-mode,
#playdate-info .supervision-block-label.edit-mode,
#playdate-info .cert-block-label.edit-mode,
#playdate-info .bring-block-label.edit-mode {
  background-color: #ef4444 !important;
  color: #ffffff !important;
  border-color: #ef4444 !important;
}

/* "edit" / overflow icons — keep them quiet.
   `display` is not optional here. menu-icon.css hides each pill by ID
   (`#menu-icon-certificates { display: none }`), and panel-refresh.css only
   un-hides the ones inside #product-profile. This panel is in the calendar
   column, so its pills stayed hidden even for the owner — and because
   check_user_in_selection.js's showNode() clears the *inline* display and
   lets the stylesheet decide, there was nothing left to un-hide them.
   This selector (id + class) outranks the ID-only rule in menu-icon.css.
   Guests are still covered: hideNode() sets [hidden] / .hidden, which that
   script backs with a `display: none !important` rule. */
#playdate-info .menu-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: 24px;
  padding: 0 10px;
  border: 1px solid var(--ft-border-2, rgba(15, 23, 42, 0.12));
  border-radius: 9999px;
  color: var(--ft-faint, #9ca3af);
  font-size: 0.72rem;
  font-weight: 700;
  line-height: 1;
  margin-left: auto;
  cursor: pointer;
  opacity: 0.7;
  transition: color 0.18s ease, background 0.18s ease, border-color 0.18s ease, opacity 0.18s ease;
}
#playdate-info .menu-icon:hover,
#playdate-info .menu-icon:focus-visible {
  opacity: 1;
  color: var(--ft-coral, #ff5a5f);
  border-color: var(--ft-coral, #ff5a5f);
  background: var(--ft-coral-soft, #fff1f1);
}

/* ============================================================
   Guide badge card — restyled to match the site's white cards
   (white surface, soft border, coral accent ring, Quicksand)
   ============================================================ */

/* When a pill hosts the guide card, drop the chip look entirely —
   the role now lives on the card itself, so hide the caption text */
#playdate-info .supervision-block-label.has-badge {
  display: inline-flex !important;
  flex-direction: column;
  align-items: flex-start;
  gap: 0;
  background: transparent !important;
  border: 0 !important;
  padding: 0 !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  font-size: 0 !important;   /* hides the label's raw text node */
  line-height: 0 !important;
}

/* The card itself */
#playdate-info .supervision-badge {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
  width: 200px;
  padding: 18px 16px 34px;
  background: var(--ft-surface, #ffffff);
  border: 1px solid var(--ft-border, rgba(15, 23, 42, 0.08));
  border-radius: var(--ft-radius, 16px);
  box-shadow: var(--ft-shadow, 0 1px 2px rgba(15, 23, 42, 0.05));
  font-family: 'Quicksand', 'Nunito Sans', sans-serif;
  font-size: 0.9rem;          /* restore text sizing inside the card */
  line-height: 1.4;
  text-transform: none;
  letter-spacing: normal;
  cursor: default;
  transition: box-shadow 0.2s ease;
}
#playdate-info .supervision-badge:hover {
  box-shadow: var(--ft-shadow-lg, 0 12px 32px rgba(15, 23, 42, 0.10));
}

/* Role on the card — small coral uppercase label under the avatar */
#playdate-info .supervision-role {
  color: var(--ft-coral, #ff5a5f);
  font-size: 0.72rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  margin: 0 0 2px;
}

/* Avatar — circular with a soft coral ring */
#playdate-info .supervision-picture {
  width: 64px;
  height: 64px;
  border-radius: 50%;
  object-fit: cover;
  border: 3px solid var(--ft-coral-soft, #fff1f1);
  box-shadow: 0 0 0 2px var(--ft-coral, #ff5a5f);
  margin-bottom: 8px;
  background: var(--ft-coral-soft, #fff1f1);
}

/* Name & age */
#playdate-info .supervision-name {
  color: var(--ft-ink, #1f2937);
  font-weight: 700;
  font-size: 0.95rem;
  margin: 0;
}
#playdate-info .supervision-age {
  color: var(--ft-muted, #6b7280);
  font-weight: 600;
  font-size: 0.85rem;
  margin: 0;
}

/* "..." menu icon on the card — quiet gray like the other menu icons */
#playdate-info .supervision-badge-menu-icon {
  color: var(--ft-faint, #9ca3af) !important;
  font-size: 0.85rem !important;
  font-weight: 700 !important;
  bottom: 8px !important;
  right: 12px !important;
}

/* ============================================================
   Guided by — add-card + delete × UX
   The old "..." row toggle is replaced by a dashed "+ New Guide"
   card at the end of the row; each guide card gets a small "×"
   in its top-right corner (owner-only, shown via JS).
   ============================================================ */

/* Cards of mixed height should top-align, with breathing room */
#playdate-info .supervision-block-label-container {
  align-items: flex-start;
  gap: 12px;
}

/* "+ New Guide" — dashed empty card matching the guide-card footprint */
#playdate-info .guide-add-card {
  display: none;                 /* JS shows it (inline-flex) for the owner */
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 10px;
  width: 200px;
  min-height: 176px;
  padding: 18px 16px;
  background: transparent;
  border: 2px dashed rgba(15, 23, 42, 0.16);
  border-radius: var(--ft-radius, 16px);
  box-shadow: none;
  color: var(--ft-muted, #6b7280);
  font-family: 'Quicksand', 'Nunito Sans', sans-serif;
  font-size: 0.9rem;
  font-weight: 700;
  line-height: 1.3;
  cursor: pointer;
  transition: border-color 0.2s ease, color 0.2s ease, background 0.2s ease;
}
#playdate-info .guide-add-card:hover,
#playdate-info .guide-add-card:focus-visible {
  border-color: var(--ft-coral, #ff5a5f);
  color: var(--ft-coral-dark, #e14e50);
  background: var(--ft-coral-soft, #fff1f1);
  outline: none;
}
#playdate-info .guide-add-card .guide-add-plus {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  border: 2px solid currentColor;
  border-radius: 50%;
  font-size: 1.4rem;
  font-weight: 700;
  line-height: 1;
}
#playdate-info .guide-add-card.is-busy {
  opacity: 0.55;
  pointer-events: none;
}

/* Small delete "×" — top-right corner of each guide card */
#playdate-info .guide-delete-x {
  position: absolute;
  top: 6px;
  right: 6px;
  z-index: 2;
  display: none;                 /* JS shows it (inline-flex) for the owner */
  align-items: center;
  justify-content: center;
  width: 22px;
  height: 22px;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: transparent;
  color: var(--ft-faint, #9ca3af);
  font-size: 1rem;
  font-weight: 700;
  line-height: 1;
  cursor: pointer;
  transition: background 0.15s ease, color 0.15s ease;
}
#playdate-info .guide-delete-x:hover,
#playdate-info .guide-delete-x:focus-visible {
  background: #fee2e2;
  color: #dc2626;
  outline: none;
}

/* --- Role picker state of the "+ New Guide" card --- */
#playdate-info .guide-add-card.is-picking {
  gap: 10px;
  padding: 14px 12px;
  cursor: default;
  border-style: dashed;
  background: var(--ft-surface, #ffffff);
}
#playdate-info .guide-add-card .guide-add-title {
  color: var(--ft-ink, #1f2937);
  font-size: 0.82rem;
  font-weight: 700;
}
#playdate-info .guide-add-card .guide-role-options {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 6px;
}
#playdate-info .guide-add-card .guide-role-option {
  padding: 5px 12px;
  background: var(--ft-coral-soft, #fff1f1);
  color: var(--ft-coral-dark, #e14e50);
  border: 1px solid rgba(255, 90, 95, 0.22);
  border-radius: 9999px;
  font-family: 'Quicksand', 'Nunito Sans', sans-serif;
  font-size: 0.82rem;
  font-weight: 600;
  line-height: 1.3;
  cursor: pointer;
  transition: background 0.15s ease, color 0.15s ease, border-color 0.15s ease;
}
#playdate-info .guide-add-card .guide-role-option:hover,
#playdate-info .guide-add-card .guide-role-option:focus-visible {
  background: var(--ft-coral, #ff5a5f);
  border-color: var(--ft-coral, #ff5a5f);
  color: #ffffff;
  outline: none;
}
#playdate-info .guide-add-card .guide-add-cancel {
  padding: 2px 10px;
  background: transparent;
  border: 0;
  color: var(--ft-faint, #9ca3af);
  font-family: 'Quicksand', 'Nunito Sans', sans-serif;
  font-size: 0.78rem;
  font-weight: 700;
  cursor: pointer;
  transition: color 0.15s ease;
}
#playdate-info .guide-add-card .guide-add-cancel:hover,
#playdate-info .guide-add-card .guide-add-cancel:focus-visible {
  color: var(--ft-ink, #1f2937);
  outline: none;
}

/* ============================================================
   Chip rows (Activities / We provide) — "+ New" pill & delete ×
   ============================================================ */

/* "+ New" — dashed pill matching the chip footprint */
#playdate-info .chip-add {
  display: none;                 /* JS shows it (inline-flex) for the owner */
  align-items: center;
  gap: 6px;
  padding: 5px 12px;
  background: transparent;
  border: 1.5px dashed rgba(15, 23, 42, 0.22);
  border-radius: 9999px;
  color: var(--ft-muted, #6b7280);
  font-family: 'Quicksand', 'Nunito Sans', sans-serif;
  font-size: 0.88rem;
  font-weight: 600;
  line-height: 1.3;
  cursor: pointer;
  transition: border-color 0.15s ease, color 0.15s ease, background 0.15s ease;
}
#playdate-info .chip-add:hover,
#playdate-info .chip-add:focus-visible {
  border-color: var(--ft-coral, #ff5a5f);
  color: var(--ft-coral-dark, #e14e50);
  background: var(--ft-coral-soft, #fff1f1);
  outline: none;
}
#playdate-info .chip-add .chip-add-plus {
  font-weight: 700;
  font-size: 1rem;
  line-height: 1;
}

/* Input state — the pill becomes a tiny text field */
#playdate-info .chip-add.is-picking {
  border-style: solid;
  border-color: var(--ft-coral, #ff5a5f);
  background: var(--ft-surface, #ffffff);
  cursor: text;
}
#playdate-info .chip-add .chip-add-input {
  width: 130px;
  padding: 0;
  border: 0;
  outline: none;
  background: transparent;
  color: var(--ft-ink, #1f2937);
  font-family: 'Quicksand', 'Nunito Sans', sans-serif;
  font-size: 0.88rem;
  font-weight: 600;
  line-height: 1.3;
}
#playdate-info .chip-add .chip-add-input::placeholder {
  color: var(--ft-faint, #9ca3af);
  font-weight: 500;
}

/* Small delete "×" inside each pill */
#playdate-info .chip-delete-x {
  display: none;                 /* JS shows it (inline-flex) for the owner */
  align-items: center;
  justify-content: center;
  width: 16px;
  height: 16px;
  margin-left: 6px;
  margin-right: -4px;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: rgba(255, 90, 95, 0.14);
  color: var(--ft-coral-dark, #e14e50);
  font-size: 0.72rem;
  font-weight: 700;
  line-height: 1;
  vertical-align: middle;
  cursor: pointer;
  transition: background 0.15s ease, color 0.15s ease;
}
#playdate-info .chip-delete-x:hover,
#playdate-info .chip-delete-x:focus-visible {
  background: var(--ft-coral, #ff5a5f);
  color: #ffffff;
  outline: none;
}

/* ============================================================
   Must Bring — icon palette
   Owners see every item: chosen = highlighted coral, the rest
   lowlighted (grayscale + dimmed). Visitors only see chosen ones.
   ============================================================ */

#playdate-info .bring-chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 5px 12px;
  background: var(--ft-surface, #ffffff);
  border: 1px solid var(--ft-border, rgba(15, 23, 42, 0.10));
  border-radius: 9999px;
  color: var(--ft-muted, #6b7280);
  font-family: 'Quicksand', 'Nunito Sans', sans-serif;
  font-size: 0.88rem;
  font-weight: 600;
  line-height: 1.3;
  filter: grayscale(1);
  opacity: 0.5;
  user-select: none;
  transition: filter 0.15s ease, opacity 0.15s ease, background 0.15s ease,
              color 0.15s ease, border-color 0.15s ease;
}
#playdate-info .bring-chip .bring-chip-icon {
  font-size: 1rem;
  line-height: 1;
}

/* Owner hover on a lowlighted chip — hint that it's tappable */
#playdate-info .bring-chip[role="button"] {
  cursor: pointer;
}
#playdate-info .bring-chip[role="button"]:not(.is-on):hover,
#playdate-info .bring-chip[role="button"]:not(.is-on):focus-visible {
  filter: grayscale(0.3);
  opacity: 0.85;
  outline: none;
}

/* Highlighted (selected) */
#playdate-info .bring-chip.is-on {
  filter: none;
  opacity: 1;
  background: var(--ft-coral-soft, #fff1f1);
  color: var(--ft-coral-dark, #e14e50);
  border-color: rgba(255, 90, 95, 0.22);
}
#playdate-info .bring-chip.is-on[role="button"]:hover,
#playdate-info .bring-chip.is-on[role="button"]:focus-visible {
  background: #ffe3e4;
  outline: none;
}

/* ============================================================
   Itinerary — in-schedule editing (✎ edit / × clear per slot)
   Buttons are owner-only (shown via JS) and live inside each
   schedule <li>, right-aligned after the slot text.
   ============================================================ */

.schedule-card li .itin-actions,
.day-schedule-card li .itin-actions {
  display: none;                 /* JS shows it (inline-flex) for the owner */
  align-items: center;
  gap: 4px;
  margin-left: 8px;
  float: right;
  vertical-align: middle;
}

.schedule-card li .itin-edit,
.schedule-card li .itin-x,
.day-schedule-card li .itin-edit,
.day-schedule-card li .itin-x {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 20px;
  height: 20px;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: transparent;
  font-size: 0.78rem;
  font-weight: 700;
  line-height: 1;
  cursor: pointer;
  transition: background 0.15s ease, color 0.15s ease;
}

.schedule-card li .itin-edit,
.day-schedule-card li .itin-edit {
  color: #9ca3af;
}
.schedule-card li .itin-edit:hover,
.day-schedule-card li .itin-edit:hover {
  background: rgba(15, 23, 42, 0.08);
  color: #1f2937;
}

.schedule-card li .itin-x,
.day-schedule-card li .itin-x {
  color: #9ca3af;
  font-size: 0.95rem;
}
.schedule-card li .itin-x:hover,
.day-schedule-card li .itin-x:hover {
  background: #fee2e2;
  color: #dc2626;
}

/* Inline edit input inside a slot */
.schedule-card li .itin-edit-input,
.day-schedule-card li .itin-edit-input {
  width: min(60%, 260px);
  padding: 1px 6px;
  border: 1px solid #ff5a5f;
  border-radius: 6px;
  outline: none;
  background: #ffffff;
  color: #1f2937;
  font: inherit;
}

/* --- Inline itinerary editor: ✓ save and ✕ cancel --- */
.schedule-card li .itin-edit-wrap,
.day-schedule-card li .itin-edit-wrap {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  vertical-align: middle;
}
.schedule-card li .itin-save,
.schedule-card li .itin-cancel,
.day-schedule-card li .itin-save,
.day-schedule-card li .itin-cancel {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 22px;
  height: 22px;
  padding: 0;
  border: 0;
  border-radius: 50%;
  font-size: 0.85rem;
  font-weight: 700;
  line-height: 1;
  cursor: pointer;
  transition: background 0.15s ease, color 0.15s ease;
}
.schedule-card li .itin-save,
.day-schedule-card li .itin-save {
  background: #ff5a5f;
  color: #ffffff;
}
.schedule-card li .itin-save:hover,
.day-schedule-card li .itin-save:hover {
  background: #e14e50;
}
.schedule-card li .itin-cancel,
.day-schedule-card li .itin-cancel {
  background: transparent;
  color: #9ca3af;
  font-size: 1rem;
}
.schedule-card li .itin-cancel:hover,
.day-schedule-card li .itin-cancel:hover {
  background: rgba(15, 23, 42, 0.08);
  color: #1f2937;
}

/* ============================================================
   Schedule card — big "bubble clock" times
   The trip-name <h3> stays in the DOM (booking.js reads it for
   the booking payload) but is visually hidden.
   ============================================================ */

.schedule-card .schedule-card-title {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}

.schedule-card .schedule-time-bubble {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  gap: 12px;
  margin: 6px 0 12px;
}

.schedule-card .time-chip {
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
  flex: 1 1 0;
  min-width: 0;
  max-width: 150px;
  padding: 10px 16px;
  background: #ffffff;
  border-radius: 9999px;
  box-shadow: 0 2px 8px rgba(15, 23, 42, 0.10);
}

.schedule-card .time-chip small {
  font-family: 'Quicksand', 'Nunito Sans', sans-serif;
  font-size: 0.62rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: #6b7280;
  line-height: 1;
}

.schedule-card .time-chip .time-value {
  font-family: 'Quicksand', 'Nunito Sans', sans-serif;
  font-size: 1.45rem;
  font-weight: 700;
  line-height: 1.15;
  color: #1f2937;
  white-space: nowrap;
}

.schedule-card .time-arrow {
  font-size: 1.25rem;
  font-weight: 700;
  color: #9ca3af;
}

/* Narrow screens: shrink the bubbles instead of stacking them,
   so Start and End always sit next to each other */
@media (max-width: 480px) {
  .schedule-card .schedule-time-bubble {
    flex-wrap: nowrap;
    gap: 6px;
  }
  .schedule-card .time-chip {
    padding: 8px 10px;
  }
  .schedule-card .time-chip .time-value {
    font-size: 1.1rem;
  }
  .schedule-card .time-chip small {
    font-size: 0.56rem;
  }
  .schedule-card .time-arrow {
    font-size: 1rem;
    flex-shrink: 0;
  }
}