/* trip.cocan.co.uk: maps Trip Cost custom properties onto the shared Cocan palette. */
:root[data-cocan-theme][data-cocan-theme] {
  --background: var(--cocan-bg);
  --foreground: var(--cocan-ink);
  --card: var(--cocan-surface);
  --card-foreground: var(--cocan-ink);
  --popover: var(--cocan-surface);
  --popover-foreground: var(--cocan-ink);
  --primary: var(--cocan-steel);
  --primary-foreground: var(--cocan-on-accent, #ffffff);
  --secondary: color-mix(in srgb, var(--cocan-ink) 9%, var(--cocan-surface));
  --secondary-foreground: var(--cocan-ink);
  --muted: color-mix(in srgb, var(--cocan-ink) 7%, var(--cocan-surface));
  --muted-foreground: color-mix(in srgb, var(--cocan-ink) 74%, var(--cocan-bg));
  --accent: var(--cocan-steel);
  --accent-foreground: var(--cocan-on-accent, #ffffff);
  --border: var(--cocan-border);
  --input: var(--cocan-border);
  --ring: var(--cocan-steel);
  --gradient-hero: linear-gradient(
    160deg,
    color-mix(in srgb, var(--cocan-steel) 10%, var(--cocan-bg)) 0%,
    var(--cocan-bg) 60%,
    var(--cocan-bg) 100%
  );
  --gradient-total: linear-gradient(
    135deg,
    var(--cocan-steel) 0%,
    color-mix(in srgb, var(--cocan-steel) 78%, #000000) 100%
  );
  --shadow-card: var(--card-shadow, 0 4px 14px rgba(0, 0, 0, 0.08));
  --shadow-glow: 0 16px 36px -18px color-mix(in srgb, var(--cocan-steel) 50%, transparent);
}

:root[data-cocan-theme="liquid-glass"][data-cocan-theme] {
  --gradient-hero: var(--page-bg);
}

:root[data-cocan-theme="liquid-glass"] .card-surface {
  background: var(--glass-fill);
  border-color: var(--glass-rim);
  -webkit-backdrop-filter: var(--glass-blur);
  backdrop-filter: var(--glass-blur);
}

.cocan-trip-topbar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  margin-bottom: -4px;
}

.cocan-trip-topnav {
  display: inline-flex;
  align-items: center;
  gap: 12px;
}

.cocan-trip-sep {
  color: var(--cocan-ink);
  opacity: 0.45;
  font-size: 14px;
}

.cocan-trip-back {
  color: var(--cocan-steel);
  text-decoration: none;
  font-size: 14px;
  font-weight: 500;
  display: inline-flex;
  align-items: center;
  min-height: 36px;
}

.cocan-trip-back:hover {
  text-decoration: underline;
}

.cocan-trip-topbar .cocan-theme-selector {
  position: static;
  top: auto;
  right: auto;
  z-index: auto;
  border-radius: 8px;
  box-shadow: none;
}