/* =======================================================================
   schedule-cards.css
   Brings the left-panel playdate schedule cards (.schedule-card and
   .day-schedule-card) in line with the site's existing design language:
   - Same glassmorphism/white-card surface as #calendar
   - Pill chips that use the same token colours as #product-profile
   - Coral (#ff5a5f) accent, soft-blue selected state (#A7D3F4)
   - Typography and spacing to match the right panel

   Drop this file in /css/ and add ONE line to profile/index.php
   (after the existing schedule/day-schedule link tags):
     <link rel="stylesheet" href="/css/schedule-cards.css">
   ======================================================================= */


/* -----------------------------------------------------------------------
   Design tokens (mirrors panel-refresh.css so both panels are in sync)
   ----------------------------------------------------------------------- */
:root {
  --sc-coral:        #ff5a5f;
  --sc-coral-dark:   #e14e50;
  --sc-coral-soft:   #fff1f1;
  --sc-blue-soft:    #b4d7f3;
  --sc-blue-select:  #A7D3F4;
  --sc-ink:          #1f2937;
  --sc-muted:        #6b7280;
  --sc-faint:        #9ca3af;
  --sc-surface:      #ffffff;
  --sc-soft:         #f7f9fc;
  --sc-border:       rgba(15, 23, 42, 0.08);
  --sc-border-2:     rgba(15, 23, 42, 0.12);
  --sc-radius:       16px;
  --sc-radius-sm:    10px;
  --sc-shadow:       0 2px 10px rgba(15, 23, 42, 0.09);
  --sc-shadow-lg:    0 8px 24px rgba(15, 23, 42, 0.13);
  --sc-ease:         cubic-bezier(.22, 1, .36, 1);
}


/* -----------------------------------------------------------------------
   Card shell — both the "main" and "day" variants share the same base
   ----------------------------------------------------------------------- */
.schedule-card,
.day-schedule-card {
  position: relative;
  background: rgba(255, 255, 255, 0.82);   /* matches #calendar glass surface */
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  border-radius: var(--sc-radius);
  border: 1px solid var(--sc-border);
  box-shadow: var(--sc-shadow);
  margin-bottom: 20px;
  padding: 52px 20px 20px 20px;            /* top padding clears the chip rail */
  transition: box-shadow 0.25s var(--sc-ease), transform 0.2s var(--sc-ease);
  opacity: 1;                               /* override the old 0.6 faded default */
  font-family: 'Nunito Sans', system-ui, -apple-system, Segoe UI, sans-serif;
  color: var(--sc-ink);
}

.schedule-card:hover,
.day-schedule-card:hover {
  box-shadow: var(--sc-shadow-lg);
  transform: translateY(-2px);
}


/* -----------------------------------------------------------------------
   Selected state — blue fill, deep-blue border (same colour family)
   Border is a saturated navy so it reads as intentional depth against
   the soft #A7D3F4 fill rather than an accent clash.
   ----------------------------------------------------------------------- */
.schedule-card.selected-schedule,
.day-schedule-card.selected-schedule {
  background: #A7D3F4 !important;
  border: 2px solid #2D8ACF;        /* saturated mid-blue — same family as fill */
  box-shadow: 0 6px 20px rgba(45, 138, 207, 0.22);
}

/* Title — deep navy, clear on blue */
.schedule-card.selected-schedule h3,
.day-schedule-card.selected-schedule h3 {
  color: #1a3a5c;
}

/* Body text — full ink */
.schedule-card.selected-schedule p,
.day-schedule-card.selected-schedule p,
.schedule-card.selected-schedule .day-date-header,
.day-schedule-card.selected-schedule .day-date-header {
  color: #1f2937;
}

/* Label strongs — readable blue-grey */
.schedule-card.selected-schedule p strong,
.day-schedule-card.selected-schedule p strong {
  color: #3b5a78;
}

/* Itinerary rows — white cards so they lift off the blue surface */
.schedule-card.selected-schedule li,
.day-schedule-card.selected-schedule li {
  background: rgba(255, 255, 255, 0.78);
  border-color: rgba(45, 138, 207, 0.2);
  color: #1f2937;
}

.schedule-card.selected-schedule li:hover,
.day-schedule-card.selected-schedule li:hover {
  background: rgba(255, 255, 255, 0.95);
  border-color: rgba(45, 138, 207, 0.4);
}

.schedule-card.unselected-schedule,
.day-schedule-card.unselected-schedule {
  border: 1px solid var(--sc-border);
  opacity: 0.72;
}

.schedule-card.inactive,
.day-schedule-card.inactive {
  opacity: 0.55;
}


/* -----------------------------------------------------------------------
   Meta chip rail (absolute top-right on desktop)
   ----------------------------------------------------------------------- */
.schedule-card .schedule-meta,
.day-schedule-card .schedule-meta {
  position: absolute;
  top: 14px;
  right: 14px;
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 6px;
  z-index: 2;
}

/* Base chip */
.schedule-card .schedule-meta > *,
.day-schedule-card .schedule-meta > * {
  display: inline-flex;
  align-items: center;
  padding: 4px 10px;
  border-radius: 9999px;
  font-size: 0.78rem;
  font-weight: 700;
  line-height: 1;
  white-space: nowrap;
  border: 1px solid var(--sc-border-2);
  background: var(--sc-soft);
  color: var(--sc-muted);
  box-shadow: 0 1px 2px rgba(0,0,0,0.04);
}

/* Age / language chip — neutral grey */
.schedule-language-card,
.schedule-day-language-card {
  background: var(--sc-soft) !important;
  color: var(--sc-muted) !important;
  border-color: var(--sc-border-2) !important;
}

/* Tour language chip — soft blue, distinct from age */
.schedule-tourlang-card,
.schedule-day-tourlang-card {
  background: #eef4ff !important;
  color: #2456c8 !important;
  border-color: rgba(36, 86, 200, 0.22) !important;
}

/* Price chip — coral accent (matches right panel price pill) */
.schedule-price-card,
.schedule-day-price-card {
  background: var(--sc-coral-soft) !important;
  color: var(--sc-coral-dark) !important;
  border-color: rgba(255, 90, 95, 0.25) !important;
}

/* Spots chip — amber */
.schedule-spots-card,
.schedule-day-spots-card {
  background: #fffbeb !important;
  color: #92400e !important;
  border-color: #fde68a !important;
}


/* -----------------------------------------------------------------------
   Card heading (trip title)
   ----------------------------------------------------------------------- */
.schedule-card h3,
.day-schedule-card h3 {
  font-family: 'Quicksand', 'Nunito Sans', sans-serif;
  font-size: 1.15rem;
  font-weight: 700;
  color: var(--sc-coral);
  margin: 0 0 6px 0;
  cursor: pointer;
  line-height: 1.2;
}

/* Date header line (day-schedule only) */
.day-date-header {
  font-size: 0.82rem;
  font-weight: 700;
  color: var(--sc-muted);
  text-transform: uppercase;
  letter-spacing: 0.06em;
  margin-bottom: 10px;
}


/* -----------------------------------------------------------------------
   Start / End time lines
   ----------------------------------------------------------------------- */
.schedule-card p,
.day-schedule-card p {
  margin: 3px 0;
  font-size: 0.92rem;
  color: var(--sc-ink);
  line-height: 1.5;
}

.schedule-card p strong,
.day-schedule-card p strong {
  color: var(--sc-faint);
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  margin-right: 4px;
}


/* -----------------------------------------------------------------------
   Itinerary list
   ----------------------------------------------------------------------- */
.schedule-card ul,
.day-schedule-card ul {
  list-style: none;
  padding: 0;
  margin: 10px 0 0 0;
}

.schedule-card li,
.day-schedule-card li {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 7px 10px;
  margin-bottom: 4px;
  border-radius: var(--sc-radius-sm);
  background: var(--sc-soft);
  border: 1px solid var(--sc-border);
  font-size: 0.88rem;
  color: var(--sc-ink);
  cursor: pointer;
  transition: background 0.15s var(--sc-ease), border-color 0.15s var(--sc-ease);
}

.schedule-card li:hover,
.day-schedule-card li:hover {
  background: #f0f7ff;
  border-color: var(--sc-blue-soft);
}

.schedule-card li.selected,
.day-schedule-card li.selected {
  background: var(--sc-coral-soft);
  border-color: rgba(255, 90, 95, 0.3);
  color: var(--sc-coral-dark);
  font-weight: 600;
}

.schedule-card li.selected:hover,
.day-schedule-card li.selected:hover {
  background: #ffe0e1;
}


/* -----------------------------------------------------------------------
   Mobile — chips flow above title, remove absolute positioning
   ----------------------------------------------------------------------- */
@media (max-width: 768px) {
  .schedule-card,
  .day-schedule-card {
    padding: 16px;
    opacity: 1 !important;
  }

  .schedule-card .schedule-meta,
  .day-schedule-card .schedule-meta {
    position: static;
    margin-bottom: 10px;
    flex-wrap: wrap;
  }
}


/* -----------------------------------------------------------------------
   Mobile-only "See Dates" shortcut (schedule cards only)
   The button itself is created in js/calendar/cal/nemo/scheduleManager.js
   (class .schedule-see-dates): it opens the date grid if collapsed and
   smooth-scrolls to #calendar. Only schedule cards get it — day-schedule
   cards never render it. Hidden on desktop, where the calendar already sits
   in the left panel beside the cards; shown on phones, where the cards stack
   above/below the calendar and a jump-to-dates shortcut is useful.
   ----------------------------------------------------------------------- */
.schedule-see-dates {
  display: none;                 /* desktop: calendar is already alongside */
}

@media (max-width: 768px) {
  .schedule-see-dates {
    display: block;
    width: 100%;
    margin-top: 16px;
    padding: 12px 16px;
    font: 700 15px/1 'Nunito Sans', system-ui, -apple-system, Segoe UI, sans-serif;
    color: #fff;
    background: var(--sc-coral, #ff5a5f);
    border: none;
    border-radius: var(--sc-radius-sm, 10px);
    cursor: pointer;
    box-shadow: 0 2px 8px rgba(255, 90, 95, 0.28);
    transition: background 0.2s var(--sc-ease, ease), transform 0.1s ease;
  }
  .schedule-see-dates:hover  { background: var(--sc-coral-dark, #e14e50); }
  .schedule-see-dates:active { transform: translateY(1px); }
  .schedule-see-dates:focus-visible {
    outline: 2px solid var(--sc-coral-dark, #e14e50);
    outline-offset: 2px;
  }
}


/* =======================================================================
   OWNER MODE — editable duration panel mounted into the schedule card
   (scheduleManager.js moves #duration-container-N into the card in place of
   the read-only mirror pills when the logged-in user owns the profile).
   ======================================================================= */

/* Strip the container's standalone panel chrome so it reads as part of the
   card rather than a nested box. */
.schedule-card.owner-schedule .duration-container {
  background: transparent;
  border: 0;
  border-radius: 0;
  margin: 0;
  padding: 0;
}
.schedule-card.owner-schedule .duration-header { display: block; }

/* The "+" that get_duration ships inside container #1 is redundant here —
   owners add via the standalone "Add schedule" button below the cards. */
.schedule-card #add-duration { display: none !important; }

/* Per-card delete: the "−" remove-duration button that get_duration renders on
   every schedule after #1. Presented as a clear delete affordance top-right. */
.schedule-card .remove-duration-btn {
  position: absolute;
  top: 12px;
  right: 12px;
  width: 28px;
  height: 28px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 20px;
  line-height: 1;
  color: #fff;
  background: var(--sc-coral, #ff5a5f);
  border-radius: 50%;
  cursor: pointer;
  box-shadow: 0 2px 6px rgba(255, 90, 95, 0.30);
  z-index: 3;
}
.schedule-card .remove-duration-btn:hover { background: var(--sc-coral-dark, #e14e50); }

/* Standalone "Add schedule" button below the whole list of cards (owner only).
   Styled once further down — the duplicate block that used to sit here was
   overridden by it anyway, so it's been removed to keep a single source. */


/* ============================================================================
   OWNER MODE — editable duration panel embedded in each schedule card
   ----------------------------------------------------------------------------
   scheduleManager.js (owner branch) moves #duration-container-N into the card's
   .schedule-meta and tags the card .owner-schedule, hides the standalone
   .duration-panel, and adds one .add-schedule-btn below all cards. The read-only
   mirror-pill layout (absolute top-right rail) must NOT apply here, so we reset
   it to normal flow and style the embedded panel + its chips.
   ============================================================================ */

/* No absolute chip rail for owners → reclaim the 52px top gap reserved for it. */
.schedule-card.owner-schedule { padding-top: 20px; }

/* The .schedule-meta wrapper now holds the whole editable duration container:
   drop the absolute top-right rail and let it flow full-width at the card top. */
.schedule-card.owner-schedule .schedule-meta {
  position: static;
  display: block;
  top: auto;
  right: auto;
  width: 100%;
  margin: 0 0 12px;
  z-index: auto;
}

/* Its direct child is the container, not a pill — undo the pill chrome that
   .schedule-card .schedule-meta > * applies, and let it blend into the card. */
.schedule-card.owner-schedule .schedule-meta > .duration-container {
  display: block;
  padding: 0;
  margin: 0;
  background: transparent;
  border: none;
  border-radius: 0;
  white-space: normal;
  font-weight: 400;
}
.schedule-card.owner-schedule .schedule-meta > .duration-container:hover {
  background: transparent;
}

/* Header row: the "Duration: …" paragraph (with its editable chips + the "…"
   editor) on the left, the "−" delete (cards 2, 3, …) pinned right. */
.schedule-card.owner-schedule .duration-header {
  display: flex;
  align-items: flex-start;
  gap: 8px;
}
.schedule-card.owner-schedule .duration-header p {
  flex: 1;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px;
  margin: 0;
  font-size: 0.9rem;
}
/* duration.css adds margin-left:10px to chips; the flex gap spaces them now. */
.schedule-card.owner-schedule .duration-header p > * { margin-left: 0; }

/* The inline "+" get_duration renders inside container #1 is replaced by the
   standalone button below — hide it inside the card. */
.schedule-card.owner-schedule #add-duration { display: none !important; }

/* Per-card "−" delete on the 2nd, 3rd, … schedules. */
.schedule-card.owner-schedule .duration-header .remove-duration-btn {
  margin-left: auto;
  color: #d64545;
  font-weight: 700;
}
.schedule-card.owner-schedule .duration-header .remove-duration-btn:hover { color: #b62d2d; }

/* Standalone "+ Add schedule" button below all cards (owner only).
   White fill, brand-coloured text and a perforated (dashed) brand border —
   reads as an "add another" affordance rather than a primary action, so it
   doesn't compete with the coral "Select a date" CTA. */
.add-schedule-btn {
  display: block;
  width: 100%;
  margin: 4px 0 24px;
  padding: 12px 16px;
  font: 700 15px/1 'Nunito Sans', system-ui, -apple-system, Segoe UI, sans-serif;
  color: var(--sc-coral, #ff5a5f);
  background: #fff;
  border: 2px dashed var(--sc-coral, #ff5a5f);
  border-radius: var(--sc-radius-sm, 10px);
  cursor: pointer;
  box-shadow: none;
  transition: background 0.2s var(--sc-ease, ease),
              border-color 0.2s var(--sc-ease, ease),
              color 0.2s var(--sc-ease, ease),
              transform 0.1s ease;
}
.add-schedule-btn:hover {
  background: rgba(255, 90, 95, 0.06);   /* faint brand tint, stays white-ish */
  border-color: var(--sc-coral-dark, #e14e50);
  color: var(--sc-coral-dark, #e14e50);
}
.add-schedule-btn:active { transform: translateY(1px); }
.add-schedule-btn:focus-visible {
  outline: 2px solid var(--sc-coral-dark, #e14e50);
  outline-offset: 2px;
}


/* -----------------------------------------------------------------------
   Mobile tap target for the per-card "−" delete.
   The button is only 28x28 on desktop, which is below the ~44px minimum for
   reliable finger taps. Absolutely positioned in the card's top-right corner,
   a slightly-off tap misses it and lands on the card instead — which runs the
   card's selectSchedule handler and selects the schedule, looking exactly like
   the click "bubbled" past the button. Enlarging the hit area on touch screens
   removes the mis-tap. (The guard in schedule.js still handles real bubbling;
   this fixes taps that never hit the button in the first place.)
   ----------------------------------------------------------------------- */
@media (max-width: 768px) {
  .schedule-card .remove-duration-btn {
    width: 44px;
    height: 44px;
    font-size: 24px;
    top: 8px;
    right: 8px;
    /* Keep the tap reliable: no text selection / long-press callout on tap. */
    -webkit-touch-callout: none;
    -webkit-user-select: none;
    user-select: none;
    touch-action: manipulation;
  }
}


/* ============================================================================
   OWNER MODE — schedule chips + edit form inside the card
   ----------------------------------------------------------------------------
   All the pill styling for these chips lives in panel-refresh.css scoped to
   "#product-profile ..." — the RIGHT-hand panel that used to host
   .duration-panel. Owner mode moves the container into a schedule card in the
   LEFT panel, so none of those selectors match any more and the chips fell back
   to bare text. These rules re-establish the pills (matching that palette) in
   their new home, and style the edit-mode form controls, which were never
   styled anywhere.
   ============================================================================ */

/* ── "Schedule:" label + the duration string ── */
.schedule-card.owner-schedule .duration-header p > strong {
  font-size: 0.72rem;
  font-weight: 800;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--ft-muted, #6b7280);
}
.schedule-card.owner-schedule .duration-header p {
  font-size: 0.9rem;
  font-weight: 700;
  color: var(--sc-ink, #1f2937);
}

/* ── Base pill for every saved chip ── */
.schedule-card.owner-schedule .duration-header p > span {
  display: inline-flex;
  align-items: center;
  margin: 0;
  padding: 4px 10px;
  font-size: 0.78rem;
  font-weight: 700;
  line-height: 1;
  white-space: nowrap;
  border-radius: 9999px;
  background: var(--ft-soft, #f7f9fc);
  color: var(--ft-muted, #6b7280);
  border: 1px solid var(--ft-border, rgba(15, 23, 42, 0.10));
}

/* ── Per-chip tints (price is the key number, so it takes the brand accent) ── */
.schedule-card.owner-schedule .duration-price-card {
  background: var(--ft-coral-soft, #fff1f1);
  color: var(--ft-coral-dark, #e14e50);
  border-color: rgba(255, 90, 95, 0.25);
}
.schedule-card.owner-schedule .duration-spots-card {
  background: #fffbeb; color: #92400e; border-color: #fde68a;
}
.schedule-card.owner-schedule .duration-tourlang-card {
  background: #eef2ff; color: #3730a3; border-color: #c7d2fe;
}
.schedule-card.owner-schedule .duration-group-card {
  background: #faf5ff; color: #6b21a8; border-color: #e9d5ff;
}
.schedule-card.owner-schedule .duration-payment-card {
  background: #ecfeff; color: #155e75; border-color: #a5f3fc;
}
.schedule-card.owner-schedule .duration-terms-card {
  background: #fff7ed; color: #9a3412; border-color: #fed7aa;
}
.schedule-card.owner-schedule .duration-interval-card {
  background: #f8fafc; color: #475569; border-color: #e2e8f0;
}
/* Difficulty: green by default, warming through to red */
.schedule-card.owner-schedule .duration-difficulty-card {
  background: #f0fdf4; color: #166534; border-color: #bbf7d0;
}
.schedule-card.owner-schedule .duration-difficulty-card[data-difficulty="Moderate"]    { background:#fffbeb; color:#92400e; border-color:#fde68a; }
.schedule-card.owner-schedule .duration-difficulty-card[data-difficulty="Challenging"] { background:#fff7ed; color:#9a3412; border-color:#fed7aa; }
.schedule-card.owner-schedule .duration-difficulty-card[data-difficulty="Strenuous"]   { background:#fef2f2; color:#991b1b; border-color:#fecaca; }
/* Cutoff: blue when active, neutral grey when "No cutoff" */
.schedule-card.owner-schedule .duration-cutoff-card {
  background: #eef4ff; color: #2456c8; border-color: rgba(36, 86, 200, 0.22);
}
.schedule-card.owner-schedule .duration-cutoff-card[data-cutoff-hours="0"] {
  background: #f7f9fc; color: #9ca3af; border-color: rgba(15, 23, 42, 0.08);
}

/* ── The "..." editor trigger: a clear affordance, not another data pill ── */
.schedule-card.owner-schedule .duration-header p > span.menu-icon {
  padding: 4px 12px;
  font-size: 0.9rem;
  letter-spacing: 0.06em;
  color: var(--sc-coral, #ff5a5f);
  background: #fff;
  border: 1px dashed var(--sc-coral, #ff5a5f);
  cursor: pointer;
  transition: background 0.15s ease, color 0.15s ease;
}
.schedule-card.owner-schedule .duration-header p > span.menu-icon:hover {
  background: rgba(255, 90, 95, 0.08);
  color: var(--sc-coral-dark, #e14e50);
}

/* ============================ EDIT MODE ============================ */
/* Controls sit in the same wrapping flex row, so give them a consistent
   field style, readable labels and comfortable (44px-friendly) targets. */
.schedule-card.owner-schedule .duration-header input[type="time"],
.schedule-card.owner-schedule .duration-header input[type="number"],
.schedule-card.owner-schedule .duration-header select {
  min-height: 34px;
  padding: 5px 8px;
  font: 600 0.82rem/1 'Nunito Sans', system-ui, -apple-system, Segoe UI, sans-serif;
  color: var(--sc-ink, #1f2937);
  background: #fff;
  border: 1px solid var(--ft-border, rgba(15, 23, 42, 0.14));
  border-radius: 8px;
  box-shadow: 0 1px 2px rgba(15, 23, 42, 0.04);
}
/* Inline width="50/60px" attributes stay, so widen via min-width for touch. */
.schedule-card.owner-schedule .duration-header input[type="number"] { min-width: 64px; }
.schedule-card.owner-schedule .duration-header input:focus,
.schedule-card.owner-schedule .duration-header select:focus {
  outline: none;
  border-color: var(--sc-coral, #ff5a5f);
  box-shadow: 0 0 0 3px rgba(255, 90, 95, 0.15);
}

/* Field labels — quiet, uppercase, clearly not data */
.schedule-card.owner-schedule .duration-header label {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--ft-muted, #6b7280);
}
.schedule-card.owner-schedule .duration-header input[type="checkbox"] {
  width: 16px; height: 16px;
  accent-color: var(--sc-coral, #ff5a5f);
  cursor: pointer;
}

/* Disclosure rows (group pricing / payment / terms) become full-width blocks
   so their panels don't get squeezed into the chip row. */
.schedule-card.owner-schedule .duration-header details {
  flex: 1 0 100%;
  margin: 2px 0;
  padding: 8px 10px;
  background: var(--ft-soft, #f7f9fc);
  border: 1px solid var(--ft-border, rgba(15, 23, 42, 0.10));
  border-radius: 10px;
}
.schedule-card.owner-schedule .duration-header summary {
  font-size: 0.8rem;
  font-weight: 700;
  color: var(--sc-ink, #1f2937);
  cursor: pointer;
}
.schedule-card.owner-schedule .duration-header details[open] summary {
  margin-bottom: 8px;
  padding-bottom: 6px;
  border-bottom: 1px solid var(--ft-border, rgba(15, 23, 42, 0.10));
}
.schedule-card.owner-schedule .duration-header .group-pricing-hint {
  font-size: 0.72rem;
  font-weight: 500;
  color: var(--ft-muted, #6b7280);
}

/* Buttons: Save is the primary action; "+ Add tier" is secondary/dashed. */
.schedule-card.owner-schedule .duration-header button {
  min-height: 34px;
  padding: 7px 16px;
  font: 700 0.82rem/1 'Nunito Sans', system-ui, -apple-system, Segoe UI, sans-serif;
  color: #fff;
  background: var(--sc-coral, #ff5a5f);
  border: none;
  border-radius: 8px;
  cursor: pointer;
  transition: background 0.15s ease, transform 0.1s ease;
}
.schedule-card.owner-schedule .duration-header button:hover  { background: var(--sc-coral-dark, #e14e50); }
.schedule-card.owner-schedule .duration-header button:active { transform: translateY(1px); }
.schedule-card.owner-schedule .duration-header .group-pricing-add {
  color: var(--sc-coral, #ff5a5f);
  background: #fff;
  border: 1px dashed var(--sc-coral, #ff5a5f);
}
.schedule-card.owner-schedule .duration-header .group-pricing-add:hover {
  background: rgba(255, 90, 95, 0.08);
  color: var(--sc-coral-dark, #e14e50);
}

/* Mobile: stack the edit controls so nothing is cramped or overflowing. */
@media (max-width: 768px) {
  .schedule-card.owner-schedule .duration-header input[type="number"] { min-width: 72px; }
  .schedule-card.owner-schedule .duration-header input[type="time"],
  .schedule-card.owner-schedule .duration-header select { min-height: 40px; }
  .schedule-card.owner-schedule .duration-header button { min-height: 40px; }
}