/**
 * Display shortcodes ([tpcbs_types], [tpcbs_pitches], [tpcbs_pitch]…).
 * Neutral styling that inherits the theme's fonts and colours; override the
 * custom properties below in the theme to restyle.
 */

.tpcbsd-grid,
.tpcbsd-pitch,
.tpcbsd-filters,
.tpcbsd-features {
  --tpcbsd-accent: var(--bde-brand-primary-color, #2f6f4f);
  --tpcbsd-accent-text: #fff;
  --tpcbsd-border: rgba(0, 0, 0, 0.1);
  --tpcbsd-muted: rgba(0, 0, 0, 0.6);
  --tpcbsd-radius: 12px;
}

.tpcbsd-grid {
  display: grid;
  grid-template-columns: repeat(var(--tpcbsd-cols, 3), minmax(0, 1fr));
  gap: 24px;
  margin: 24px 0;
}
@media (max-width: 900px) {
  .tpcbsd-grid { grid-template-columns: repeat(min(var(--tpcbsd-cols, 3), 2), minmax(0, 1fr)); }
}
@media (max-width: 600px) {
  .tpcbsd-grid { grid-template-columns: 1fr; }
}

.tpcbsd-card {
  display: flex;
  flex-direction: column;
  border: 1px solid var(--tpcbsd-border);
  border-radius: var(--tpcbsd-radius);
  overflow: hidden;
  background: #fff;
}
.tpcbsd-card-media { aspect-ratio: 4 / 3; overflow: hidden; background: #eef1ee; }
.tpcbsd-card-media img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform 0.3s ease; }
.tpcbsd-card-media a:hover img { transform: scale(1.03); }
.tpcbsd-card-body { display: flex; flex-direction: column; gap: 8px; padding: 16px 18px 18px; flex: 1; }
.tpcbsd-card-title { margin: 0; font-size: 1.2em; line-height: 1.3; }
/* A linked title should look like the heading it is, not like body-copy link
   spam — colour inherits, and the underline only appears on hover/focus. */
.tpcbsd-card-title a { color: inherit; text-decoration: none; }
.tpcbsd-card-title a:hover,
.tpcbsd-card-title a:focus-visible { text-decoration: underline; }
.tpcbsd-card-meta { margin: 0; color: var(--tpcbsd-muted); font-size: 0.9em; }
.tpcbsd-card-text { margin: 0; }
.tpcbsd-card-foot { margin-top: auto; display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; padding-top: 8px; }
.tpcbsd-card-foot .tpcbsd-price { flex-basis: 100%; }

.tpcbsd-tags { display: flex; flex-wrap: wrap; gap: 6px; margin: 0; padding: 0; list-style: none; }
.tpcbsd-tags li {
  margin: 0;
  padding: 2px 10px;
  border-radius: 999px;
  background: rgba(0, 0, 0, 0.05);
  font-size: 0.85em;
}

.tpcbsd-price { margin: 0; }
.tpcbsd-price strong { font-size: 1.25em; }

.tpcbsd-btn {
  display: inline-block;
  padding: 9px 16px;
  border: 1px solid var(--tpcbsd-accent);
  border-radius: 8px;
  color: var(--tpcbsd-accent);
  background: transparent;
  text-decoration: none;
  font-weight: 600;
  line-height: 1.2;
}
.tpcbsd-btn:hover { opacity: 0.85; }
.tpcbsd-btn-primary { background: var(--tpcbsd-accent); color: var(--tpcbsd-accent-text); }

.tpcbsd-filters { display: flex; flex-wrap: wrap; gap: 8px; margin: 16px 0 0; }
.tpcbsd-empty, .tpcbsd-notice { margin: 16px 0; }
.tpcbsd-showing { margin: 16px 0 0; font-weight: 600; }
#tpcbsd-pitches { scroll-margin-top: 80px; }

/* Single pitch */
.tpcbsd-pitch {
  display: grid;
  grid-template-columns: minmax(0, 3fr) minmax(0, 2fr);
  gap: 32px;
  margin: 24px 0;
  align-items: start;
}
@media (max-width: 800px) {
  .tpcbsd-pitch { grid-template-columns: 1fr; }
}
.tpcbsd-pitch-info { display: flex; flex-direction: column; gap: 12px; }
.tpcbsd-pitch-info > * { margin: 0; }
.tpcbsd-pitch-title { margin: 0; }

/* Gallery */
.tpcbsd-gallery { display: flex; flex-direction: column; gap: 10px; }
.tpcbsd-gallery-main { margin: 0; aspect-ratio: 4 / 3; border-radius: var(--tpcbsd-radius, 12px); overflow: hidden; background: #eef1ee; }
.tpcbsd-gallery-main img { width: 100%; height: 100%; object-fit: cover; display: block; }
.tpcbsd-gallery-thumbs { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 8px; }
.tpcbsd-thumb {
  padding: 0;
  border: 2px solid transparent;
  border-radius: 8px;
  overflow: hidden;
  aspect-ratio: 4 / 3;
  cursor: pointer;
  background: none;
  opacity: 0.75;
}
.tpcbsd-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
.tpcbsd-thumb.is-active,
.tpcbsd-thumb:hover { opacity: 1; border-color: var(--tpcbsd-accent, #2f6f4f); }

/* [tpcbs_things_to_do] — category buttons reuse .tpcbsd-filters */
.tpcbsd-things .tpcbsd-filters { display: flex; flex-wrap: wrap; gap: 8px; margin: 0 0 16px; }

/* [tpcbs_features] — icons with names */
.tpcbsd-features { list-style: none; margin: 0; padding: 0; }
.tpcbsd-features-title { margin: 0 0 12px; }
.tpcbsd-features--grid { display: grid; gap: 14px 20px; grid-template-columns: repeat(var(--tpcbsd-cols, 4), minmax(0, 1fr)); }
.tpcbsd-features--list { display: flex; flex-direction: column; gap: 10px; }
.tpcbsd-features--inline { display: flex; flex-wrap: wrap; gap: 10px 22px; }
.tpcbsd-feature { display: flex; align-items: center; gap: 10px; margin: 0; }
.tpcbsd-feature-badge { flex: none; display: inline-flex; align-items: center; justify-content: center; width: 40px; height: 40px; border-radius: 50%; background: #e8f3ec; background: color-mix(in srgb, var(--tpcbsd-accent, #2f6f4f) 12%, transparent); color: var(--tpcbsd-accent, #2f6f4f); }
.tpcbsd-feature-icon { width: 22px; height: 22px; }
.tpcbsd-feature-text { display: flex; flex-direction: column; line-height: 1.3; }
.tpcbsd-feature-label { font-weight: 600; }
.tpcbsd-feature-desc { font-size: .9em; opacity: .75; }
@media (max-width: 720px) { .tpcbsd-features--grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }

/* layout="cards" — each feature in its own panel, for a facilities strip that
   has to sit across the page rather than hug the text. */
.tpcbsd-features--cards { display: grid; gap: 16px; grid-template-columns: repeat(var(--tpcbsd-cols, 4), minmax(0, 1fr)); }
.tpcbsd-features--cards .tpcbsd-feature { flex-direction: column; align-items: flex-start; gap: 12px; padding: 20px; background: #fff; border: 1px solid var(--tpcbsd-border, rgba(0,0,0,.1)); border-radius: var(--tpcbsd-radius, 12px); height: 100%; box-sizing: border-box; }
.tpcbsd-features--cards .tpcbsd-feature-badge { width: 48px; height: 48px; border-radius: 14px; }
.tpcbsd-features--cards .tpcbsd-feature-icon { width: 26px; height: 26px; }
.tpcbsd-features--cards .tpcbsd-feature-label { font-size: 1.02em; }
@media (max-width: 980px) { .tpcbsd-features--cards { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 560px) { .tpcbsd-features--cards { grid-template-columns: 1fr; } }



/* [tpcbs_plan_stay] — one box for every screen size (no separate mobile build) */
.tpcbsd-plan {
  --tpcbsd-accent: var(--bde-brand-primary-color, #2f6f4f);
  --tpcbsd-plan-btn: var(--tpcbsd-accent);
  --tpcbsd-plan-tile: #eef3e8;
  --tpcbsd-plan-tile-on: #fdf5d3;
  box-sizing: border-box; width: 100%; max-width: 680px; margin: 0;
  background: #fff; color: #1f2d1f; border-radius: 18px; padding: 22px 22px 24px;
  box-shadow: 0 10px 30px rgba(0, 0, 0, .12);
}
.tpcbsd-plan *, .tpcbsd-plan *::before, .tpcbsd-plan *::after { box-sizing: border-box; }
.tpcbsd-plan-title { margin: 0 0 14px; font-size: 1.6em; line-height: 1.2; color: var(--tpcbsd-accent); }
.tpcbsd-plan-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 12px 12px; }
.tpcbsd-plan-field { display: flex; flex-direction: column; gap: 5px; margin: 0; font-size: .95em; }
.tpcbsd-plan-field > span { font-weight: 600; color: var(--tpcbsd-accent); }
.tpcbsd-plan-field abbr { color: #c0392b; text-decoration: none; border: 0; }
.tpcbsd-plan-field input, .tpcbsd-plan-field select {
  width: 100%; min-height: 44px; padding: 8px 12px; font: inherit; font-size: 16px; /* 16px stops iOS zooming in */
  color: inherit; background: #fff; border: 1px solid #cfe0cf; border-radius: 8px; margin: 0;
}
.tpcbsd-plan-field input:focus, .tpcbsd-plan-field select:focus { outline: 2px solid var(--tpcbsd-accent); outline-offset: 1px; }
.tpcbsd-plan-types { border: 0; padding: 0; margin: 18px 0 0; min-width: 0; }
.tpcbsd-plan-types legend { padding: 0; margin: 0 0 10px; font-weight: 600; color: var(--tpcbsd-accent); }
.tpcbsd-plan-tiles { display: grid; grid-template-columns: repeat(auto-fit, minmax(118px, 1fr)); gap: 12px; }
.tpcbsd-plan-tile { position: relative; display: block; margin: 0; cursor: pointer; }
.tpcbsd-plan-tile input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.tpcbsd-plan-tile-inner {
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 8px;
  min-height: 108px; padding: 12px 8px; text-align: center; font-size: .92em; font-weight: 600;
  color: var(--tpcbsd-accent); background: var(--tpcbsd-plan-tile); border: 2px solid transparent; border-radius: 12px;
  transition: background .15s, border-color .15s;
}
.tpcbsd-plan-tile-inner .tpcbs-type-icon { width: 40px; height: 40px; }
.tpcbsd-plan-tile:hover .tpcbsd-plan-tile-inner { border-color: #cfe0cf; }
.tpcbsd-plan-tile input:checked + .tpcbsd-plan-tile-inner { background: var(--tpcbsd-plan-tile-on); border-color: var(--tpcbsd-accent); }
.tpcbsd-plan-tile input:focus-visible + .tpcbsd-plan-tile-inner { outline: 2px solid var(--tpcbsd-accent); outline-offset: 2px; }
.tpcbsd-plan-submit {
  display: block; width: 100%; min-height: 48px; margin: 16px 0 0; padding: 12px 16px; border: 0; border-radius: 10px;
  font: inherit; font-weight: 700; font-size: 1.05em; color: #fff; background: var(--tpcbsd-plan-btn); cursor: pointer;
}
.tpcbsd-plan-submit:hover { filter: brightness(1.08); }

/* Phones: one field per row, smaller tiles that still sit two-up. */
@media (max-width: 560px) {
  .tpcbsd-plan { padding: 18px 16px 20px; border-radius: 14px; }
  .tpcbsd-plan-title { font-size: 1.35em; }
  .tpcbsd-plan-grid { grid-template-columns: 1fr; gap: 10px; }
  .tpcbsd-plan-tiles { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
  .tpcbsd-plan-tile-inner { min-height: 92px; }
}

/* --- [tpcbs_weather] ---------------------------------------------------
   Conditions now across the top, the days ahead as a snapping strip beneath.
   The strip scrolls rather than wrapping, so the block keeps the same height
   whether it has 3 forecast days or 7 and whether it sits in a full-width
   section or a narrow column. */

.tpcbsd-wx { display: flex; flex-direction: column; gap: 14px; }

.tpcbsd-wx-title { margin: 0; font-size: 1.25em; }

.tpcbsd-wx-now {
  display: grid;
  grid-template-columns: auto 1fr;
  align-items: center;
  gap: 4px 18px;
  padding: 18px 20px;
  border: 1px solid var(--tpcbsd-border, rgba(0, 0, 0, 0.1));
  border-radius: var(--tpcbsd-radius, 12px);
  background: #fff;
}
.tpcbsd-wx-now-icon { color: var(--tpcbsd-accent, #2f6f4f); display: flex; }
.tpcbsd-wx-now-icon .tpcbsd-wx-icon { width: 64px; height: 64px; }
.tpcbsd-wx-now-main { display: flex; align-items: baseline; flex-wrap: wrap; gap: 4px 14px; }
.tpcbsd-wx-now-temp { font-size: 2.6em; font-weight: 700; line-height: 1; }
.tpcbsd-wx-now-text { font-size: 1.05em; }
.tpcbsd-wx-place { color: var(--tpcbsd-muted, rgba(0, 0, 0, 0.6)); margin-left: 0.4em; }
.tpcbsd-wx-place::before { content: "\2014\00a0"; }

.tpcbsd-wx-now-meta {
  grid-column: 2;
  display: flex;
  flex-wrap: wrap;
  gap: 4px 18px;
  margin: 2px 0 0;
  padding: 0;
  list-style: none;
  font-size: 0.9em;
  color: var(--tpcbsd-muted, rgba(0, 0, 0, 0.6));
}
.tpcbsd-wx-now-meta li { margin: 0; }

.tpcbsd-wx-days {
  display: flex;
  gap: 10px;
  margin: 0;
  padding: 0 0 4px;
  list-style: none;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: thin;
}
.tpcbsd-wx-day {
  /* Grows to fill the row, but capped: on a three-day plan two or three cards
     would otherwise stretch to 350px each and look like a mistake. */
  flex: 1 1 110px;
  max-width: 190px;
  scroll-snap-align: start;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  margin: 0;
  padding: 14px 10px 12px;
  border: 1px solid var(--tpcbsd-border, rgba(0, 0, 0, 0.1));
  border-radius: var(--tpcbsd-radius, 12px);
  background: #fff;
  text-align: center;
  box-sizing: border-box;
}
.tpcbsd-wx-day-name { font-weight: 700; font-size: 0.95em; }
.tpcbsd-wx-day-date { font-size: 0.78em; color: var(--tpcbsd-muted, rgba(0, 0, 0, 0.6)); }
.tpcbsd-wx-day-icon { color: var(--tpcbsd-accent, #2f6f4f); display: flex; margin: 2px 0; }
.tpcbsd-wx-day-temps { display: flex; align-items: baseline; gap: 6px; font-size: 1.02em; }
.tpcbsd-wx-day-min { color: var(--tpcbsd-muted, rgba(0, 0, 0, 0.6)); }
.tpcbsd-wx-day-text { font-size: 0.8em; line-height: 1.25; color: var(--tpcbsd-muted, rgba(0, 0, 0, 0.6)); }
.tpcbsd-wx-day-rain { margin-top: auto; padding-top: 2px; font-size: 0.78em; color: var(--tpcbsd-accent, #2f6f4f); }

.tpcbsd-wx-credit { margin: 0; font-size: 0.75em; color: var(--tpcbsd-muted, rgba(0, 0, 0, 0.6)); }
.tpcbsd-wx-credit a { color: inherit; text-decoration: underline; }

@media (max-width: 560px) {
  .tpcbsd-wx-now { padding: 14px; gap: 2px 14px; }
  .tpcbsd-wx-now-icon .tpcbsd-wx-icon { width: 52px; height: 52px; }
  .tpcbsd-wx-now-temp { font-size: 2.1em; }
  .tpcbsd-wx-day { flex: 0 0 92px; max-width: none; }
}

/* ── Shared icon set (vendor/tp-icons) ────────────────────────────────────
   Each icon is a cached SVG used as a mask, so it paints in currentColor
   exactly as an inline SVG would, without putting 4KB of path data in the
   page for every icon shown. A site can recolour every icon at once by
   setting `color` on the surrounding element. */
.tpcbs-icon {
	display: inline-block;
	flex: 0 0 auto;
	vertical-align: -0.125em;
	background-color: currentColor;
	-webkit-mask-image: var(--tpcbs-icon);
	mask-image: var(--tpcbs-icon);
	-webkit-mask-repeat: no-repeat;
	mask-repeat: no-repeat;
	-webkit-mask-position: center;
	mask-position: center;
	-webkit-mask-size: contain;
	mask-size: contain;
}

/* Icon beside a card title (things to do). */
.tpcbsd-card-title .tpcbsd-card-icon { margin-right: 8px; vertical-align: -0.15em; }

/* [tpcbs_search_bar] / [tpcbs_plan_stay layout="bar"] — one-line search bar */
.tpcbsd-bar {
  --tpcbsd-accent: var(--bde-brand-primary-color, #2f6f4f);
  --tpcbsd-bar-bg: #f8f4ea;
  --tpcbsd-bar-btn: #1f3a2b;
  --tpcbsd-bar-ink: #1f2a22;
  box-sizing: border-box; display: flex; align-items: stretch; width: 100%; margin: 0;
  background: var(--tpcbsd-bar-bg); color: var(--tpcbsd-bar-ink);
  border-radius: 14px; padding: 8px; box-shadow: 0 8px 24px rgba(0, 0, 0, .14);
}
.tpcbsd-bar *, .tpcbsd-bar *::before, .tpcbsd-bar *::after { box-sizing: border-box; }
.tpcbsd-bar-seg {
  position: relative; flex: 1 1 0; min-width: 0; display: flex; align-items: center; gap: 12px;
  margin: 0; padding: 10px 16px; cursor: pointer; border-radius: 10px;
}
.tpcbsd-bar-seg + .tpcbsd-bar-seg::before {
  content: ""; position: absolute; left: 0; top: 18%; bottom: 18%; width: 1px; background: rgba(0, 0, 0, .12);
}
.tpcbsd-bar-seg:hover, .tpcbsd-bar-seg:focus-within { background: rgba(255, 255, 255, .7); }
.tpcbsd-bar-seg:focus-within { outline: 2px solid var(--tpcbsd-accent); outline-offset: -2px; }
.tpcbsd-bar-icon { flex: none; width: 24px; height: 24px; color: var(--tpcbsd-bar-btn); }
.tpcbsd-bar-text { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; line-height: 1.25; }
.tpcbsd-bar-label { font-size: .82em; opacity: .8; }
.tpcbsd-bar-value { font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.tpcbsd-bar-chev { flex: none; width: 18px; height: 18px; opacity: .8; }
/* The real control covers the segment, invisible: native pickers on every device. */
.tpcbsd-bar-control {
  position: absolute; inset: 0; width: 100%; height: 100%; margin: 0; padding: 0;
  opacity: 0; cursor: pointer; border: 0; font-size: 16px; -webkit-appearance: none; appearance: none;
}
.tpcbsd-bar-control::-webkit-calendar-picker-indicator { position: absolute; inset: 0; width: 100%; height: 100%; opacity: 0; cursor: pointer; }
.tpcbsd-bar-submit {
  flex: 0 0 auto; display: inline-flex; align-items: center; justify-content: center; gap: 10px;
  margin: 0 0 0 8px; padding: 0 26px; min-height: 56px; border: 0; border-radius: 10px;
  font: inherit; font-weight: 600; font-size: 1.05em; color: #fff; background: var(--tpcbsd-bar-btn); cursor: pointer; white-space: nowrap;
}
.tpcbsd-bar-submit:hover { filter: brightness(1.15); }
.tpcbsd-bar-arrow { width: 18px; height: 18px; }

/* Lay out by the bar's OWN width (container queries), so it wraps correctly in a
   half-width hero column on a big screen as well as on a phone. */
.tpcbsd-bar-wrap { container-type: inline-size; container-name: tpcbsd-bar; width: 100%; }
.tpcbsd-bar-seg { min-width: 0; }
.tpcbsd-bar-label { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

/* Narrower than ~880px: two segments per row, button full width underneath. */
@container tpcbsd-bar (max-width: 880px) {
  .tpcbsd-bar { flex-wrap: wrap; padding: 6px; }
  .tpcbsd-bar-seg { flex: 1 1 calc(50% - 6px); padding: 10px 12px; border-bottom: 1px solid rgba(0, 0, 0, .08); }
  .tpcbsd-bar-seg + .tpcbsd-bar-seg::before { display: none; }
  .tpcbsd-bar-submit { flex: 1 1 100%; margin: 6px 0 0; min-height: 52px; }
}
/* Five boxes (children="yes"): three on the first row, two on the second. */
@container tpcbsd-bar (max-width: 880px) and (min-width: 600px) {
  .tpcbsd-bar:has(.tpcbsd-bar-seg:nth-of-type(5)) .tpcbsd-bar-seg { flex-basis: calc(33.33% - 6px); }
  .tpcbsd-bar:has(.tpcbsd-bar-seg:nth-of-type(5)) .tpcbsd-bar-chev { display: none; }
  .tpcbsd-bar:has(.tpcbsd-bar-seg:nth-of-type(5)) .tpcbsd-bar-seg { gap: 10px; }
}
@container tpcbsd-bar (max-width: 520px) {
  .tpcbsd-bar-seg { gap: 8px; padding: 10px 8px; }
  .tpcbsd-bar-chev { display: none; }
  .tpcbsd-bar-icon { width: 20px; height: 20px; }
  .tpcbsd-bar-value { font-size: .95em; }
}
@container tpcbsd-bar (max-width: 320px) {
  .tpcbsd-bar-seg { flex-basis: 100%; }
}

/* Bar layout: [tpcbs_weather layout="bar"] - one horizontal strip, conditions
   now sitting beside the days instead of in a card above them. */
.tpcbsd-wx--bar { flex-direction: row; flex-wrap: wrap; align-items: center; gap: 0 18px; padding: 10px 20px; border-radius: var(--tpcbsd-radius, 12px); background: var(--tpcbsd-wx-bar-bg, #eef2e4); }
.tpcbsd-wx--bar .tpcbsd-wx-title { font-size: 1em; font-weight: 600; margin-right: 4px; }
.tpcbsd-wx--bar .tpcbsd-wx-now { padding: 0; border: 0; background: none; border-radius: 0; gap: 0 10px; }
.tpcbsd-wx--bar .tpcbsd-wx-now-icon .tpcbsd-wx-icon { width: 30px; height: 30px; }
.tpcbsd-wx--bar .tpcbsd-wx-now-temp { font-size: 1.5em; }
.tpcbsd-wx--bar .tpcbsd-wx-now-text { font-size: 0.9em; }
.tpcbsd-wx--bar .tpcbsd-wx-now-meta { display: none; }
.tpcbsd-wx--bar .tpcbsd-wx-days { flex: 1 1 auto; gap: 0; padding: 0; overflow: visible; }
.tpcbsd-wx--bar .tpcbsd-wx-day { flex: 1 1 auto; max-width: none; flex-direction: row; align-items: center; justify-content: center; gap: 8px; padding: 4px 14px; border: 0; border-left: 1px solid var(--tpcbsd-border, rgba(0,0,0,0.12)); border-radius: 0; background: none; text-align: left; }
.tpcbsd-wx--bar .tpcbsd-wx-day-date,
.tpcbsd-wx--bar .tpcbsd-wx-day-text,
.tpcbsd-wx--bar .tpcbsd-wx-day-rain,
.tpcbsd-wx--bar .tpcbsd-wx-day-min { display: none; }
.tpcbsd-wx--bar .tpcbsd-wx-day-icon .tpcbsd-wx-icon { width: 22px; height: 22px; }
.tpcbsd-wx--bar .tpcbsd-wx-credit { flex: 1 0 100%; text-align: right; margin-top: 2px; }
@media (max-width: 900px) {
  .tpcbsd-wx--bar { gap: 8px 14px; }
  .tpcbsd-wx--bar .tpcbsd-wx-days { flex-wrap: wrap; }
}