/* theme-coast.css — profile page colour scheme ("Coast")
 *
 * Loaded LAST on profile/index.php so it overrides the older stylesheets.
 * To revert the whole scheme, delete the <link> to this file.
 *
 * Roles
 *   Coral   #FF5A5F  brand + booking/money only (Select a date, Book now,
 *                    the day a visitor picked)
 *   Teal    #0F6E78  availability + secondary UI (replaces every blue:
 *                    available days, See Dates, schedule cards, links)
 *   Teal dk #0B4F57  "selected while editing" (replaces black) + text on tints
 *   Sun     #F2B84B  attention: today, "to finish" pill, stars
 *   Sand    #FBF6EE  page background
 *
 * Contrast (WCAG): white on teal 5.96, teal-dark on sea tint 7.98,
 * ink on sun 8.19 — all pass AA for normal text.
 */

:root {
  --coast-coral:      #FF5A5F;
  --coast-coral-dark: #E8484D;
  --coast-teal:       #0F6E78;
  --coast-teal-hover: #0C5D66;
  --coast-teal-dark:  #0B4F57;
  --coast-teal-deep:  #083D43;
  --coast-teal-mid:   #9CC7C9;   /* borders, unavailable outlines */
  --coast-tint:       #E3F1F1;   /* sea tint: panels, weekday labels */
  --coast-tint-2:     #D2E8E9;   /* hover / selected card */
  --coast-sun:        #F2B84B;
  --coast-sun-soft:   #FDF1D8;
  --coast-sand:       #FBF6EE;
  --coast-ink:        #1E2A32;
  --coast-soft:       #F7F4EE;   /* warm soft surface (was cool #f7f9fc) */

  /* Re-point the existing design tokens at the new palette */
  --sc-blue-soft:   var(--coast-tint);
  --sc-blue-select: var(--coast-tint-2);
  --pd-accent:      var(--coast-teal);
}
#product-profile,
#cuisine-menu {
  --ft-accent: var(--coast-teal);
  --ft-soft:   var(--coast-soft);
}
:root { --sc-soft: var(--coast-soft); --pd-surface: var(--coast-soft); }

/* ── Page ─────────────────────────────────────────────────────────────── */
body { background-color: var(--coast-sand); }

/* ── "See Dates" bar ─────────────────────────────────────────────────── */
#calendar-title {
  background: var(--coast-tint) !important;
  border-color: var(--coast-teal) !important;
  color: var(--coast-teal-dark) !important;
}
#calendar-title:hover {
  background-color: var(--coast-tint-2) !important;
  border-color: var(--coast-teal-dark) !important;
}
#prev-month:hover,
#next-month:hover { color: var(--coast-teal) !important; }

/* "edit dates" pill: was white-on-translucent-white for the old blue bar,
   which vanishes on the light sea tint. Solid white pill, teal text. */
#calendar-menu-icon {
  color: var(--coast-teal-dark);
  background: #fff;
  border-color: var(--coast-teal-mid);
}
#calendar-menu-icon:hover {
  color: #fff !important;
  background: var(--coast-teal);
  border-color: var(--coast-teal);
}

/* ── Calendar grid ───────────────────────────────────────────────────── */
/* Weekday labels + leading blank cells */
.date-grid div.weekday-label,
.date-grid div.empty {
  background: var(--coast-tint);
  color: var(--coast-teal-dark);
}
.date-grid div.empty { background: transparent; }
.date-grid div.weekday-label:hover,
.date-grid div.empty:hover { background: var(--coast-tint); }
.date-grid div.weekday-label.weekday-toggle:hover,
.date-grid div.weekday-label.weekday-toggle:focus-visible {
  background: var(--coast-teal) !important;
  color: #fff;
}

/* Available (view) / unselected (edit) */
.blue-days,
.blue-day { background-color: var(--coast-teal) !important; color: #fff; }
.blue-days:hover,
.blue-day:hover { background-color: var(--coast-teal-hover) !important; }
.green-days { background-color: var(--coast-tint-2) !important; color: var(--coast-teal-dark); }
.green-days:hover { background-color: var(--coast-tint) !important; }

/* Edit mode: unselected days read as "off", selected as solid teal-dark */
.date-grid.edit-mode div.unselected-day {
  background-color: #fff !important;
  border: 2px solid var(--coast-teal-mid);
  color: var(--coast-teal-dark);
}
.date-grid.edit-mode div.unselected-day:hover { background-color: var(--coast-tint) !important; }
.date-grid.edit-mode div.unselected-day::after { content: none; }

.black-day { background-color: var(--coast-teal-dark) !important; color: #fff; }
.black-day:hover { background-color: var(--coast-teal-deep) !important; }

/* Generic day hover used to be orange */
.date-grid div:hover { background: var(--coast-teal-hover); }

/* The day a visitor picked → coral (it leads to booking) */
.date-grid div.orange-day { background-color: var(--coast-coral) !important; }
.date-grid div.orange-day:hover { background-color: var(--coast-coral-dark) !important; }

/* Unavailable (view mode): quiet, so the bookable days stand out */
.date-grid div.unselected-day[aria-disabled="true"] {
  background-color: #fff !important;
  border: 2px dashed var(--coast-teal-mid);
  color: #6E9497;
}
.date-grid div.unselected-day[aria-disabled="true"]::after {
  opacity: .9;
  background-image:
    linear-gradient(45deg,
      transparent calc(50% - 1px), var(--coast-teal-mid) calc(50% - 1px),
      var(--coast-teal-mid) calc(50% + 1px), transparent calc(50% + 1px)),
    linear-gradient(-45deg,
      transparent calc(50% - 1px), var(--coast-teal-mid) calc(50% - 1px),
      var(--coast-teal-mid) calc(50% + 1px), transparent calc(50% + 1px));
}

/* Today → sun ring, whatever state the day is in */
.date-grid div.today { box-shadow: inset 0 0 0 3px var(--coast-sun); }

/* Day itinerary list */
#second-itinerary li:hover { background: rgba(15, 110, 120, 0.12); }
#second-itinerary li.selected { background: rgba(15, 110, 120, 0.22); }

/* ── Schedule cards ──────────────────────────────────────────────────── */
.schedule-card.selected-schedule,
.day-schedule-card.selected-schedule,
.selected-schedule {
  background: var(--coast-tint) !important;
  border-color: var(--coast-teal) !important;
}

/* Language / tour-language / cutoff chips (were blue) */
.schedule-tourlang-card,
.schedule-day-tourlang-card,
.schedule-meta .schedule-day-tourlang-card,
.schedule-card.owner-schedule .duration-cutoff-card,
.duration-cutoff-card,
#product-profile .duration-tourlang-card,
#product-profile select#tourLanguageSelect {
  background: var(--coast-tint) !important;
  background-color: var(--coast-tint) !important;
  color: var(--coast-teal-dark) !important;
  border-color: rgba(15, 110, 120, 0.25) !important;
}
.schedule-meta .schedule-language-card,
.schedule-meta .schedule-day-language-card,
.day-schedule-card .schedule-language-card { color: var(--coast-teal-dark); }

/* ── What's Included labels (supervision / theory / resources / bring) ── */
.supervision-block-label,
.theoretical-block-label,
.resources-block-label,
.bring-block-label { background-color: var(--coast-teal) !important; }

/* ── Edit pills ──────────────────────────────────────────────────────── */
.menu-icon:hover,
.menu-icon-local:hover,
#carousel-menu.menu-icon:hover { color: var(--coast-teal-dark); }

/* ── Completeness pill ("1 to finish") ───────────────────────────────── */
body .ft-comp-pill {
  background: var(--coast-sun-soft);
  color: #6B4A06;
  border-color: var(--coast-sun);
}
body .ft-comp-pill:hover { background: #FBE6BA; }
body .ft-comp-pill.pending {
  background: var(--coast-tint);
  color: var(--coast-teal-dark);
  border-color: var(--coast-teal);
}
body .ft-comp-pill.pending:hover { background: var(--coast-tint-2); }

/* ── Ratings ─────────────────────────────────────────────────────────── */
#product-profile #event-stars { color: var(--coast-sun); }

/* ── Bulk date tools (edit mode) ─────────────────────────────────────── */
#bulk-dates-bar { background: var(--coast-tint); border-color: var(--coast-teal-mid); }
.bulk-dates-btn { background: var(--coast-teal); }
.bulk-dates-btn:hover { background: var(--coast-teal-hover); }
.bulk-dates-btn--ghost { background: #fff; color: var(--coast-teal); box-shadow: inset 0 0 0 2px var(--coast-teal); }
.bulk-dates-btn--ghost:hover,
.bulk-dates-btn--ghost[aria-expanded="true"] { background: var(--coast-tint-2); }
.bulk-dates-btn--danger { background: var(--coast-coral); }
.bulk-dates-btn--danger:hover { background: var(--coast-coral-dark); }
.bulk-dates-repeat { border-top-color: var(--coast-teal-mid); }
.bulk-dates-weekday,
.bulk-dates-range input[type="date"] { border-color: var(--coast-teal-mid); }
.bulk-dates-weekday.is-on { background: var(--coast-teal-dark); border-color: var(--coast-teal-dark); }
.bulk-dates-hint { color: #4F6B6E; }
.bulk-dates-status.is-unsaved { color: var(--coast-coral-dark); }

/* ── Leftover blues found by scanning the rendered page ──────────────── */
#playdate-info h3::after { color: var(--coast-teal); }          /* What's Included chevron */

#carousel-menu.menu-icon,
.menu-icon-local { color: var(--coast-teal); }
#carousel-menu.menu-icon:hover,
.menu-icon:hover,
.menu-icon-local:hover { background-color: rgba(15, 110, 120, 0.08); }
.menu-icon:focus-visible,
.menu-icon-local:focus-visible,
#carousel-menu.menu-icon:focus-visible { box-shadow: 0 0 0 3px rgba(15, 110, 120, 0.3); }
#playdate-info .menu-icon,
#playdate-info .chip__label { color: var(--coast-teal); }

#description-container.is-editing,
#editable-title-container.is-editing,
#fieldtrip-container.is-editing { box-shadow: 0 0 0 3px rgba(15, 110, 120, 0.18); }

#edit-profile { background-color: var(--coast-teal) !important; }

/* Selected schedule card: shadow, title, labels, itinerary rows */
.schedule-card.selected-schedule,
.day-schedule-card.selected-schedule { box-shadow: 0 6px 20px rgba(15, 110, 120, 0.18); }
.schedule-card.selected-schedule h3,
.day-schedule-card.selected-schedule h3 { color: var(--coast-teal-dark); }
.schedule-card.selected-schedule p strong,
.day-schedule-card.selected-schedule p strong { color: #3E5F63; }
.schedule-card.selected-schedule li,
.day-schedule-card.selected-schedule li { border-color: rgba(15, 110, 120, 0.2); }
.schedule-card.selected-schedule li:hover,
.day-schedule-card.selected-schedule li:hover { border-color: rgba(15, 110, 120, 0.4); }

/* Slate-blue body text (#34495e) → warm ink */
#trip-description,
.info-card ul,
.info-card p,
.schedule-card ul,
.day-schedule-card ul { color: var(--coast-ink); }