/*!
 * Popular Times widget — styles.
 * All rules scoped under .pt-widget so they don't collide with the host
 * Joomla template. Uses system fonts; inherits the template's background.
 */

.pt-widget {
  --pt-text: #1f2328;
  --pt-muted: #656d76;
  --pt-border: #e4e7eb;
  --pt-card: #f6f8fa;
  --pt-accent: #1a73e8;
  --pt-good: #0a7a35;
  --pt-good-bg: #e6f4ea;
  --pt-skip: #b42318;
  --pt-skip-bg: #fce8e6;
  --pt-warm: #a16207;
  --pt-warm-bg: #fef7e0;
  --pt-bar: #8ec5ff;
  --pt-bar-hover: #6aa8e8;

  font: 15px/1.55 -apple-system, "Segoe UI", Roboto, sans-serif;
  color: var(--pt-text);
  max-width: 760px;
  margin: 1.5em auto;
}
.pt-widget * { box-sizing: border-box; }

/* Header */
.pt-widget .pt-header { margin-bottom: 1.2em; }
.pt-widget .pt-title { font-size: 24px; margin: 0 0 .15em; letter-spacing: -.01em; }
.pt-widget .pt-meta  { color: var(--pt-muted); font-size: 13px; }
.pt-widget .pt-meta a { color: var(--pt-accent); text-decoration: none; }
.pt-widget .pt-meta a:hover { text-decoration: underline; }

/* Section scaffolding */
.pt-widget .pt-section { margin: 1.8em 0 .7em; }
.pt-widget .pt-section .pt-eyebrow {
  font-size: 13px; font-weight: 600; text-transform: none;
  letter-spacing: .08em; color: var(--pt-muted); margin: 0 0 .1em;
}
.pt-widget .pt-section p.pt-lede {
  font-size: 18px; font-weight: 600; margin: 0 0 .6em; letter-spacing: -.005em;
}

.pt-widget .pt-card {
  background: var(--pt-card); border: 1px solid var(--pt-border);
  border-radius: 10px; padding: 1.1em 1.2em;
}

/* Short answer (Q&A) */
.pt-widget .pt-qa {
  display: grid; grid-template-columns: auto 1fr; row-gap: .55em; column-gap: 1.1em;
  margin: 0;
}
.pt-widget .pt-qa dt {
  font-size: 12px; font-weight: 600; text-transform: uppercase;
  letter-spacing: .06em; color: var(--pt-muted); padding-top: .15em; white-space: nowrap;
}
.pt-widget .pt-qa dd { margin: 0; }
.pt-widget .pt-tag {
  display: inline-block; font-size: 11px; font-weight: 600;
  padding: .15em .55em; border-radius: 999px; margin-right: .5em;
  text-transform: uppercase; letter-spacing: .04em;
}
.pt-widget .pt-tag-go   { background: var(--pt-good-bg); color: var(--pt-good); }
.pt-widget .pt-tag-skip { background: var(--pt-skip-bg); color: var(--pt-skip); }
.pt-widget .pt-tag-mood { background: var(--pt-warm-bg); color: var(--pt-warm); }

/* Week strip */
.pt-widget .pt-week {
  display: grid; grid-template-columns: repeat(7, 1fr); gap: .4em;
}
.pt-widget .pt-daybtn {
  border: 1px solid var(--pt-border); background: #fff;
  border-radius: 8px; padding: .55em .2em; cursor: pointer;
  font: inherit; color: var(--pt-text);
  display: flex; flex-direction: column; align-items: center; gap: .3em;
  transition: background .15s, border-color .15s, transform .05s;
}
.pt-widget .pt-daybtn:hover { background: var(--pt-card); }
.pt-widget .pt-daybtn:active { transform: scale(.98); }
.pt-widget .pt-daybtn.pt-active { border-color: var(--pt-accent); background: #e8f0fe; }
.pt-widget .pt-daybtn .pt-dname { font-size: 11px; color: var(--pt-muted); text-transform: uppercase; letter-spacing: .05em; font-weight: 600; }
.pt-widget .pt-daybtn[data-kind="best"]  .pt-dname { color: var(--pt-good); }
.pt-widget .pt-daybtn[data-kind="avoid"] .pt-dname { color: var(--pt-skip); }
.pt-widget .pt-daybtn .pt-dot { width: 10px; height: 10px; border-radius: 50%; }
.pt-widget .pt-daybtn .pt-peak-pct { font-size: 10px; color: var(--pt-muted); }

/* Chart */
.pt-widget .pt-chart-card { margin-top: .5em; }
.pt-widget .pt-chart-head {
  display: flex; align-items: baseline; justify-content: space-between;
  margin-bottom: .8em;
}
.pt-widget .pt-chart-title { font-size: 17px; font-weight: 600; }
.pt-widget .pt-chart-peak  { font-size: 13px; color: var(--pt-muted); }
.pt-widget .pt-bars {
  display: grid; grid-template-columns: repeat(14, 1fr); gap: 3px;
  align-items: end; height: 128px; padding: 0 2px;
  border-bottom: 1px dashed var(--pt-border);
}
.pt-widget .pt-bar {
  background: var(--pt-bar); border-radius: 3px 3px 0 0;
  min-height: 2px; position: relative;
  transition: height .3s ease, background .15s;
}
.pt-widget .pt-bar.pt-bar-closed { background: transparent; height: 0 !important; }
.pt-widget .pt-bar:hover { background: var(--pt-bar-hover); }
.pt-widget .pt-bar .pt-bar-val {
  position: absolute; top: -18px; left: 50%; transform: translateX(-50%);
  font-size: 10px; color: var(--pt-muted); opacity: 0;
  transition: opacity .15s; white-space: nowrap; font-weight: 600;
}
.pt-widget .pt-bar:hover .pt-bar-val { opacity: 1; }
.pt-widget .pt-bars-xaxis {
  display: grid; grid-template-columns: repeat(14, 1fr); gap: 3px;
  font-size: 11px; color: var(--pt-muted); margin-top: .45em; padding: 0 2px;
}
.pt-widget .pt-bars-xaxis div { text-align: center; min-height: 1em; }

/* Weekday vs weekend */
.pt-widget .pt-compare-grid { display: grid; grid-template-columns: 1fr 1fr; gap: .9em; }
.pt-widget .pt-compare-grid .pt-card h4 {
  font-size: 12px; font-weight: 700; text-transform: none;
  letter-spacing: .07em; margin: 0 0 .4em; color: var(--pt-muted);
}
.pt-widget .pt-stat { font-size: 24px; font-weight: 600; margin: .15em 0 .05em; letter-spacing: -.01em; }
.pt-widget .pt-stat-unit { font-size: 13px; color: var(--pt-muted); font-weight: 500; margin-left: .2em; }
.pt-widget .pt-compare-grid p { margin: .45em 0 0; color: var(--pt-muted); font-size: 13px; line-height: 1.5; }

/* Anomalies */
.pt-widget .pt-anomalies ul { margin: 0; padding-left: 1.2em; }
.pt-widget .pt-anomalies li { margin: .3em 0; }

/* Footnote + closed banners + empty */
.pt-widget .pt-foot {
  color: var(--pt-muted); font-size: 12px;
  margin-top: 1.8em; padding-top: .8em; border-top: 1px solid var(--pt-border);
}
.pt-widget .pt-closed {
  padding: .9em 1.1em; border-radius: 8px; margin: .8em 0;
  border-left: 4px solid var(--pt-skip); background: var(--pt-skip-bg); color: var(--pt-skip);
  font-weight: 600;
}
.pt-widget .pt-closed-temp { border-left-color: var(--pt-warm); background: var(--pt-warm-bg); color: var(--pt-warm); }
.pt-widget .pt-empty {
  padding: .8em 1em; border-radius: 6px; background: var(--pt-card);
  color: var(--pt-muted); font-size: 14px;
}

@media (max-width: 560px) {
  .pt-widget .pt-compare-grid { grid-template-columns: 1fr; }
  .pt-widget .pt-daybtn .pt-peak-pct { font-size: 9px; }
  .pt-widget .pt-daybtn .pt-dname { font-size: 10px; }
  .pt-widget .pt-daybtn { padding: .5em .1em; }
  .pt-widget .pt-bars-xaxis { font-size: 10px; }
  .pt-widget .pt-qa { grid-template-columns: 1fr; row-gap: .2em; }
  .pt-widget .pt-qa dt { padding-top: .8em; }
  .pt-widget .pt-qa dt:first-child { padding-top: 0; }
}