/* Cities screen — what is specific to THIS screen's swipe panels. The shell,
 * the sliding card and the trash are shared and live in swipe.css.
 *
 *   swipe LEFT  -> .is-open       reveals the trash (swipe.css)
 *   swipe RIGHT -> .is-open-days  reveals the day stepper (.wx-city-days),
 *                  group view only. One state open at a time (see cities.js).
 */
:root {
  --wx-city-days-w: 180px;   /* fits the 44px +/- buttons with comfortable margin */
}

/* The trash and the sliding shell now live in swipe.css — shared with the
 * voice list. What stays below is what only this screen has. */

/* Trip days (swipe right, group view) — symmetric to the trash: card slides by
 * the panel width + 8px so the gap matches on both sides. */
.wx-swipe-wrap.is-open-days .wx-city {
  transform: translateX(calc(var(--wx-city-days-w) + 8px));
}
.wx-swipe-wrap.is-open-days .wx-city-days {
  display: flex;
}
.wx-city-days {
  display: none;
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  width: var(--wx-city-days-w);
  align-items: center;
  justify-content: center;
  gap: 6px;
  padding: 0 10px;
  background: rgba(255, 255, 255, 0.07);
  border-radius: var(--wx-radius) 0 0 var(--wx-radius);
}
.wx-city-days-btn {
  flex: 0 0 auto;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--wx-seg-active);
  border: 1px solid var(--wx-card-border);
  color: var(--wx-text);
  font-size: 24px;
  line-height: 1;
  cursor: pointer;
  transition: transform 0.12s ease;
  touch-action: manipulation;
}
.wx-city-days-btn:active {
  transform: scale(0.88);
}
.wx-city-days-inc {
  color: var(--wx-accent-cold);
  border-color: color-mix(in srgb, var(--wx-accent-cold) 45%, transparent);
}
.wx-city-days-val {
  min-width: 34px;
  text-align: center;
  line-height: 1.05;
  font-variant-numeric: tabular-nums;
}
.wx-city-days-n {
  display: block;
  font-size: 18px;
  font-weight: 600;
  color: var(--wx-text);
}
.wx-city-days-u {
  display: block;
  font-size: 10px;
  color: var(--wx-faint);
  margin-top: 2px;
}
.wx-city-days-val.is-zero .wx-city-days-n {
  color: var(--wx-faint);
  font-weight: 400;
}

/* Group departure date — swipe RIGHT on a folder reveals a calendar button
 * (symmetric to the trash on swipe-left). Panel + reveal (mirror of the trash). */
.wx-group-date {
  display: none;
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  width: 84px;
  align-items: center;
  justify-content: center;
  background: color-mix(in srgb, var(--wx-accent-cold) 14%, transparent);
  border-radius: var(--wx-radius) 0 0 var(--wx-radius);
}
.wx-group-date-btn {
  width: 48px;
  height: 48px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--wx-accent-cold);
  color: var(--wx-on-accent);
  border: 0;
  cursor: pointer;
  transition: transform 0.12s ease;
  touch-action: manipulation;
}
.wx-group-date-btn:active {
  transform: scale(0.9);
}
.wx-group-date-btn svg {
  width: 24px;
  height: 24px;
}
.wx-swipe-wrap.is-open-date .wx-group {
  transform: translateX(calc(84px + 8px));
}
.wx-swipe-wrap.is-open-date .wx-group-date {
  display: flex;
}

/* Group departure-date popover (#group-date-modal): native picker + clear/OK. */
.wx-gd-cur {
  font-size: 12.5px;
  color: var(--wx-muted);
  margin: 4px 0 14px;
}
.wx-gd-field {
  display: flex;
  align-items: center;
  gap: 10px;
  background: rgba(0, 0, 0, 0.22);
  border: 1px solid var(--wx-card-border);
  border-radius: 14px;
  padding: 13px 15px;
}
.wx-gd-date {
  flex: 1;
  min-width: 0;
  background: none;
  border: 0;
  outline: none;
  color: var(--wx-text);
  font-size: 17px;
  font-family: inherit;
  color-scheme: dark;
}
.wx-gd-actions {
  display: flex;
  gap: 10px;
  margin-top: 16px;
}
.wx-gd-actions button {
  flex: 1;
  border-radius: 13px;
  padding: 13px 14px;
  font-size: 15px;
  font-weight: 600;
  cursor: pointer;
  border: 1px solid transparent;
  transition: transform 0.12s ease;
}
.wx-gd-actions button:active {
  transform: scale(0.97);
}
.wx-gd-clear {
  background: var(--wx-hover);
  border-color: var(--wx-card-border);
  color: #ff8a8a;
}
.wx-gd-ok {
  background: var(--wx-accent-cold);
  color: var(--wx-on-accent);
}