/* =====================================================================
   panel-refresh.css
   UX/UI refresh for the Field Trip detail panel (#product-profile).
   Pure presentation layer — no DOM, IDs, or class names were changed,
   so all existing JS (edit pills, location search, durations, ratings)
   keeps working. Loaded LAST so it wins the cascade.
   ===================================================================== */

#product-profile {
  /* Design tokens (scoped to the panel) */
  --ft-coral:        #ff5a5f;
  --ft-coral-dark:   #e14e50;
  --ft-coral-soft:   #fff1f1;
  --ft-ink:          #1f2937;
  --ft-muted:        #6b7280;
  --ft-faint:        #9ca3af;
  --ft-surface:      #ffffff;
  --ft-soft:         #f7f9fc;
  --ft-border:       rgba(15, 23, 42, 0.08);
  --ft-border-2:     rgba(15, 23, 42, 0.12);
  --ft-radius:       16px;
  --ft-radius-sm:    10px;
  --ft-shadow:       0 1px 2px rgba(15, 23, 42, 0.05);
  --ft-shadow-lg:    0 12px 32px rgba(15, 23, 42, 0.10);
  --ft-ease:         cubic-bezier(.22, 1, .36, 1);

  /* Open up the panel a touch and steady the type */
  font-family: 'Nunito Sans', system-ui, -apple-system, Segoe UI, sans-serif;
  color: var(--ft-ink);
  background: rgba(255, 255, 255, 0.82);
  border-radius: 24px;
  padding: 36px;
  line-height: 1.55;
}

/* ----------------------------------------------------------------------
   1. Title block — eyebrow (category) + headline
---------------------------------------------------------------------- */
#product-profile #fieldtrip-container {
  margin-bottom: 2px;
}

#product-profile #field-trip-title {
  font-family: 'Nunito Sans', system-ui, sans-serif;
  font-size: 0.72rem;
  font-weight: 800;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ft-coral);
  margin: 0;
}

#product-profile #editable-title-container {
  margin-top: 6px !important;
  gap: 10px;
}

#product-profile #editable-title {
  font-family: 'Quicksand', 'Nunito Sans', sans-serif;
  font-style: normal;          /* drop the un-loaded italic/bubblegum look */
  font-weight: 700;
  font-size: clamp(1.6rem, 1.3rem + 1.4vw, 2.1rem);
  line-height: 1.15;
  color: var(--ft-ink);
  margin: 0;
}

/* Friendly placeholder when the trip is still unnamed */
#product-profile #editable-title:empty::before {
  content: "Name your field trip";
  color: var(--ft-faint);
  font-weight: 600;
}

/* ----------------------------------------------------------------------
   2. Description box — calm surface, real placeholder when empty
---------------------------------------------------------------------- */
#product-profile #description-container {
  display: flex;
  width: 100%;
  max-width: none;
  box-sizing: border-box;
  margin: 18px 0 22px;
  padding: 16px 18px;
  background: var(--ft-soft);
  border: 1px solid var(--ft-border);
  border-radius: var(--ft-radius);
  box-shadow: var(--ft-shadow);
}

#product-profile #playdate-description {
  flex: 1 1 auto;
  color: var(--ft-muted);
  font-size: 1rem;
}

#product-profile #playdate-description:empty::before {
  content: "Add a short description so families know what to expect…";
  color: var(--ft-faint);
  font-style: italic;
}

/* ----------------------------------------------------------------------
   3. Location + Duration "facts" block (#utility)
      Clean key/value rows instead of a cramped single line.
---------------------------------------------------------------------- */
#product-profile #utility {
  background: var(--ft-surface);
  border: 1px solid var(--ft-border);
  border-radius: var(--ft-radius);
  box-shadow: var(--ft-shadow);
  padding: 18px 20px;
  margin-bottom: 24px;
}

#product-profile .location-container {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px;
  padding-bottom: 14px;
  margin-bottom: 14px;
  border-bottom: 1px solid var(--ft-border);
}

#product-profile .location-container > strong,
#product-profile .duration-container strong {
  color: var(--ft-faint);
  font-weight: 700;
  font-size: 0.72rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

#product-profile .location-text {
  font-weight: 600;
  color: var(--ft-ink);
  font-size: 1rem;
}

/* Duration panel — strip the nested box-in-a-box look */
#product-profile .duration-panel {
  background: transparent;
  border: 0;
  box-shadow: none;
  padding: 0;
  margin: 0;
}

#product-profile .duration-container {
  background: transparent;
  border: 0;
  border-radius: 0;
  padding: 0;
  margin: 0;
}

#product-profile .duration-container:hover {
  background: transparent;
}

#product-profile .duration-container > p {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px;
  margin: 0;
  font-size: 1rem;
  font-weight: 600;
  color: var(--ft-ink);
}

/* Tag chips: language / price / spots — one consistent system */
#product-profile .duration-language-card,
#product-profile .duration-price-card,
#product-profile .duration-spots-card {
  display: inline-flex;
  align-items: center;
  margin: 0;
  padding: 4px 10px;
  font-size: 0.8rem;
  font-weight: 700;
  line-height: 1;
  border-radius: 9999px;
  background: var(--ft-soft);
  color: var(--ft-muted);
  border: 1px solid var(--ft-border);
}

/* Price gets the brand accent so it reads as the key number */
#product-profile .duration-price-card {
  background: var(--ft-coral-soft);
  color: var(--ft-coral-dark);
  border-color: rgba(255, 90, 95, 0.25);
}

/* "+" add-duration becomes a real round button */
#product-profile .add-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 30px;
  height: 30px;
  margin-left: 6px;
  font-size: 18px;
  font-weight: 700;
  line-height: 1;
  color: var(--ft-coral);
  background: var(--ft-coral-soft);
  border: 1px solid rgba(255, 90, 95, 0.25);
  border-radius: 9999px;
  cursor: pointer;
  transition: background .18s var(--ft-ease), transform .12s var(--ft-ease);
}
#product-profile .add-icon:hover {
  background: var(--ft-coral);
  color: #fff;
}
#product-profile .add-icon:active { transform: scale(0.94); }

/* Location search field, when revealed */
#product-profile .search-bar {
  border: 1px solid var(--ft-border-2);
  border-radius: var(--ft-radius-sm);
  padding: 8px 12px;
}
#product-profile .search-bar:focus {
  outline: none;
  border-color: var(--ft-coral);
  box-shadow: 0 0 0 3px rgba(255, 90, 95, 0.18);
}

/* ----------------------------------------------------------------------
   4. Info cards (meeting point / ratings / reviews) — one shared style
---------------------------------------------------------------------- */
#product-profile .info-card {
  background: var(--ft-surface);
  border: 1px solid var(--ft-border);
  border-radius: var(--ft-radius);
  box-shadow: var(--ft-shadow);
  padding: 22px 24px;
  margin-bottom: 20px;
}

#product-profile .info-card:hover {
  transform: none;                       /* calmer than the old lift */
  box-shadow: var(--ft-shadow-lg);
}

#product-profile .info-card h3 {
  position: relative;
  font-family: 'Quicksand', 'Nunito Sans', sans-serif;
  font-size: 1.15rem;
  font-weight: 700;
  color: var(--ft-ink);
  margin: 0 0 14px;
  padding-left: 12px;
}
/* Brand accent bar replaces the random blue headings */
#product-profile .info-card h3::before {
  content: "";
  position: absolute;
  left: 0;
  top: 2px;
  bottom: 2px;
  width: 4px;
  border-radius: 9999px;
  background: var(--ft-coral);
}

#product-profile .info-card p {
  color: var(--ft-muted);
  font-size: 0.98rem;
  margin: 0 0 8px;
}
#product-profile .info-card p strong {
  color: var(--ft-ink);
  font-weight: 700;
}

/* Map — round the corners and clip the iframe so no hard edges show */
#product-profile #map {
  margin-top: 14px;
  border-radius: var(--ft-radius-sm);
  overflow: hidden;
  border: 1px solid var(--ft-border);
  box-shadow: var(--ft-shadow);
}
#product-profile #map iframe {
  display: block;
}

/* Ratings — soft pill instead of the harsh solid-green block */
#product-profile #ratings .green-label {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 5px 12px;
  background: #ecfdf5;
  color: #047857;
  border: 1px solid rgba(4, 120, 87, 0.18);
  border-radius: 9999px;
  font-weight: 700;
}
#product-profile #event-stars { color: #f59e0b; letter-spacing: 1px; }

/* ----------------------------------------------------------------------
   5. Edit pills — the biggest noise source. Make them quiet "ghost"
      chips that only gain colour on hover/focus. Covers BOTH the
      "edit" and "..." variants, and the JS-injected .chip__label.
---------------------------------------------------------------------- */
#product-profile .menu-icon,
#product-profile .menu-icon-local {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: 24px;
  min-width: 0;
  padding: 0 10px;
  font-family: 'Nunito Sans', system-ui, sans-serif;
  font-size: 0.72rem;
  font-weight: 700;
  line-height: 1;
  letter-spacing: 0.01em;
  color: var(--ft-faint);
  background: transparent;
  border: 1px solid var(--ft-border-2);
  border-radius: 9999px;
  box-shadow: none;
  cursor: pointer;
  vertical-align: middle;
  opacity: 0.7;
  transition: color .18s var(--ft-ease),
              background .18s var(--ft-ease),
              border-color .18s var(--ft-ease),
              opacity .18s var(--ft-ease),
              transform .12s var(--ft-ease);
}

#product-profile .menu-icon .chip__label,
#product-profile .menu-icon-local .chip__label {
  line-height: 1;
  top: 0;
}

#product-profile .menu-icon:hover,
#product-profile .menu-icon-local:hover,
#product-profile .menu-icon:focus-visible,
#product-profile .menu-icon-local:focus-visible {
  opacity: 1;
  color: var(--ft-coral-dark);
  background: var(--ft-coral-soft);
  border-color: rgba(255, 90, 95, 0.30);
  transform: none;
}
#product-profile .menu-icon:focus-visible,
#product-profile .menu-icon-local:focus-visible {
  outline: none;
  box-shadow: 0 0 0 3px rgba(255, 90, 95, 0.20);
}
#product-profile .menu-icon:active,
#product-profile .menu-icon-local:active { transform: scale(0.95); }

/* Field-trip category options dropdown (injected by togglefieldtrip.js) */
#product-profile #fieldtrip-options {
  background: var(--ft-surface);
  border: 1px solid var(--ft-border);
  border-radius: var(--ft-radius-sm);
  box-shadow: var(--ft-shadow-lg);
  padding: 6px;
  margin-top: 8px;
  max-width: 220px;
}

/* ----------------------------------------------------------------------
   6. Responsive
---------------------------------------------------------------------- */
@media (max-width: 768px) {
  #product-profile { padding: 22px; border-radius: 18px; }
  #product-profile .info-card { padding: 18px; }
  #product-profile #utility { padding: 16px; }
}

@media (prefers-reduced-motion: reduce) {
  #product-profile * { transition: none !important; }
}
/* -----------------------------------------------------------------
   Fourth pill: spoken language — chip styling + a distinct tint
   ----------------------------------------------------------------- */
#product-profile .duration-tourlang-card {
  display: inline-flex;
  align-items: center;
  margin: 0;
  padding: 4px 10px;
  font-size: 0.8rem;
  font-weight: 700;
  line-height: 1;
  border-radius: 9999px;
  background: #eef4ff;            /* soft blue, distinct from the grey age chip */
  color: #2456c8;
  border: 1px solid rgba(36, 86, 200, 0.2);
}

/* -----------------------------------------------------------------
   Edit-mode duration controls → match the pill/chip system
   ----------------------------------------------------------------- */
#product-profile select#languageSelect,
#product-profile select#tourLanguageSelect {
  display: inline-flex;
  align-items: center;
  margin: 0 4px;
  padding: 4px 10px;
  font-size: 0.8rem;
  font-weight: 700;
  line-height: 1;
  border-radius: 9999px;
  background: var(--ft-soft);
  color: var(--ft-muted);
  border: 1px solid var(--ft-border);
  cursor: pointer;
}

/* language dropdown carries the same blue accent as its pill */
#product-profile select#tourLanguageSelect {
  background: #eef4ff;
  color: #2456c8;
  border-color: rgba(36, 86, 200, 0.2);
}

/* keep the remaining inline edit controls tidy beside the pills */
#product-profile #startTime,
#product-profile #endTime,
#product-profile #priceSelect,
#product-profile #spotsSelect {
  padding: 4px 8px;
  font-size: 0.8rem;
  border-radius: 8px;
  border: 1px solid var(--ft-border);
}

#product-profile #saveTime {
  margin-left: 6px;
  padding: 5px 14px;
  font-size: 0.8rem;
  font-weight: 700;
  color: #fff;
  background: var(--ft-coral, #ff5a5f);
  border: 0;
  border-radius: 9999px;
  cursor: pointer;
}
#product-profile #saveTime:hover { background: var(--ft-coral-dark, #e14e50); }
/* =======================================================================
   Duration editor — edit-mode polish
   Scoped to #product-profile so it only affects the right panel.
   ======================================================================= */

/* ── Edit-mode wrapper ── */
#product-profile .duration-container > p:has(#startTime),
#product-profile .duration-container:has(#startTime) {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  padding: 14px 16px;
  background: var(--ft-soft);
  border: 1px solid var(--ft-border-2);
  border-radius: var(--ft-radius-sm);
  margin-bottom: 2px;
}

/* ── Time inputs ── */
#product-profile #startTime,
#product-profile #endTime {
  padding: 5px 10px;
  font-size: 0.82rem;
  font-weight: 600;
  border-radius: 9999px;
  border: 1px solid var(--ft-border-2);
  background: #fff;
  color: var(--ft-ink);
  outline: none;
  cursor: pointer;
  transition: border-color 0.15s;
}
#product-profile #startTime:focus,
#product-profile #endTime:focus {
  border-color: var(--ft-coral);
  box-shadow: 0 0 0 3px rgba(255,90,95,0.12);
}

/* dash between times */
#product-profile #startTime + *:not(#endTime) { display: none; }

/* ── All pill-selects (age group, tour language, difficulty) ── */
#product-profile select#languageSelect,
#product-profile select#tourLanguageSelect,
#product-profile select#difficultySelect {
  display: inline-flex;
  align-items: center;
  padding: 5px 10px;
  font-size: 0.8rem;
  font-weight: 700;
  line-height: 1;
  border-radius: 9999px;
  border: 1px solid var(--ft-border-2);
  background: var(--ft-soft);
  color: var(--ft-muted);
  cursor: pointer;
  outline: none;
  appearance: none;
  -webkit-appearance: none;
  /* chevron via background svg */
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6'%3E%3Cpath d='M0 0l5 6 5-6z' fill='%239ca3af'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 10px center;
  padding-right: 26px;
  transition: border-color 0.15s;
}
#product-profile select#languageSelect:focus,
#product-profile select#tourLanguageSelect:focus,
#product-profile select#difficultySelect:focus {
  border-color: var(--ft-coral);
  box-shadow: 0 0 0 3px rgba(255,90,95,0.12);
}

/* tour language → blue tint */
#product-profile select#tourLanguageSelect {
  background-color: #eef4ff;
  color: #2456c8;
  border-color: rgba(36,86,200,0.22);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6'%3E%3Cpath d='M0 0l5 6 5-6z' fill='%232456c8'/%3E%3C/svg%3E");
}

/* difficulty → green tint (Easy default) */
#product-profile select#difficultySelect {
  background-color: #f0fdf4;
  color: #166534;
  border-color: #bbf7d0;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6'%3E%3Cpath d='M0 0l5 6 5-6z' fill='%23166534'/%3E%3C/svg%3E");
}

/* ── Price + Spots number inputs ── */
#product-profile #priceSelect,
#product-profile #spotsSelect {
  width: 58px;
  padding: 5px 8px;
  font-size: 0.82rem;
  font-weight: 700;
  border-radius: 9999px;
  border: 1px solid var(--ft-border-2);
  background: #fff;
  color: var(--ft-ink);
  text-align: center;
  outline: none;
  transition: border-color 0.15s;
}
#product-profile #priceSelect:focus,
#product-profile #spotsSelect:focus {
  border-color: var(--ft-coral);
  box-shadow: 0 0 0 3px rgba(255,90,95,0.12);
}

/* Price input → coral tint like its chip */
#product-profile #priceSelect {
  background: var(--ft-coral-soft);
  color: var(--ft-coral-dark);
  border-color: rgba(255,90,95,0.25);
}

/* inline labels before price / spots */
#product-profile .duration-container label[for="priceSelect"],
#product-profile .duration-container label[for="spotsSelect"] {
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--ft-faint);
  margin-right: -4px;  /* pull close to input */
}

/* ── Payment dropdown in edit mode ── */
#product-profile .payment-dropdown > summary {
  border-radius: 9999px;
  padding: 5px 12px;
  border-color: var(--ft-border-2);
  font-size: 0.8rem;
  font-weight: 700;
  background: #eef3ff;
  color: #2f4d8a;
}
#product-profile .payment-dropdown[open] > summary {
  border-color: var(--ft-coral);
}
#product-profile .payment-dropdown-menu {
  border-radius: var(--ft-radius-sm);
  box-shadow: var(--ft-shadow-lg);
}

/* ── Save button ── */
#product-profile #saveTime {
  padding: 6px 18px;
  font-size: 0.82rem;
  font-weight: 700;
  color: #fff;
  background: var(--ft-coral);
  border: 0;
  border-radius: 9999px;
  cursor: pointer;
  transition: background 0.18s, transform 0.12s;
  margin-left: 4px;
}
#product-profile #saveTime:hover  { background: var(--ft-coral-dark); }
#product-profile #saveTime:active { transform: scale(0.96); }

/* ── Saved-row chips — difficulty ── */
#product-profile .duration-difficulty-card {
  display: inline-flex;
  align-items: center;
  margin: 0;
  padding: 4px 10px;
  font-size: 0.8rem;
  font-weight: 700;
  line-height: 1;
  border-radius: 9999px;
  background: #f0fdf4;
  color: #166534;
  border: 1px solid #bbf7d0;
}
#product-profile .duration-difficulty-card[data-difficulty="Moderate"]    { background:#fffbeb; color:#92400e; border-color:#fde68a; }
#product-profile .duration-difficulty-card[data-difficulty="Challenging"] { background:#fff7ed; color:#9a3412; border-color:#fed7aa; }
#product-profile .duration-difficulty-card[data-difficulty="Strenuous"]   { background:#fef2f2; color:#991b1b; border-color:#fecaca; }

/* ── duration-header row layout ── */
#product-profile .duration-header {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 10px 0;
  border-bottom: 1px solid var(--ft-border);
}
#product-profile .duration-header:last-child { border-bottom: 0; }

#product-profile .duration-header > p {
  flex: 1;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px;
  margin: 0;
}
/* -----------------------------------------------------------------
   duration-cutoff-card — booking cutoff chip
   Add to: css/panel-refresh.css (or any global stylesheet already
   loaded on profile/index.php — append, don't replace)
   ----------------------------------------------------------------- */

.duration-cutoff-card {
  display: inline-flex;
  align-items: center;
  margin-left: 6px;
  padding: 4px 10px;
  border-radius: 9999px;
  font-size: 0.8rem;
  font-weight: 700;
  line-height: 1;
  white-space: nowrap;
  background: #eef4ff;
  color: #2456c8;
  border: 1px solid rgba(36, 86, 200, 0.22);
}

/* "No cutoff" reads as neutral/grey rather than an active constraint */
.duration-cutoff-card[data-cutoff-hours="0"] {
  background: #f7f9fc;
  color: #9ca3af;
  border-color: rgba(15, 23, 42, 0.08);
}

/* ----------------------------------------------------------------------
   Description: truncate on mobile with a Read more / Show less toggle
---------------------------------------------------------------------- */
#playdate-description.desc-clamped {
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 3;
  line-clamp: 3;
  overflow: hidden;
}

#playdate-description.desc-expanded {
  display: block;
  -webkit-line-clamp: unset;
  overflow: visible;
}

#desc-toggle-btn {
  background: none;
  border: none;
  padding: 0;
  margin-top: 4px;
  font-size: 0.9rem;
  font-weight: 600;
  color: var(--ft-accent, #2456c8);
  cursor: pointer;
  flex-basis: 100%;
}

#desc-toggle-btn:hover {
  text-decoration: underline;
}

@media (min-width: 601px) {
  #desc-toggle-btn {
    display: none !important;
  }
}