:root {
  font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --page-bg: #F4F5F0;
  --card-bg: #FFFFFF;
  --text: #111111;
  --muted-text: #6B6B6B;
  --border: #DADDD2;
  --button-bg: #FFFFFF;
  --button-text: #111111;
  --button-border: #111111;
  --button-active-bg: #C8FF00;
  --button-active-text: #111111;
  --lime-soft: #F4FFD8;
  --lime-border: #DDF5A8;
  --live-bg: #EAF8E5;
  --live-text: #166534;
  --setup-bg: #FFF4CC;
  --setup-text: #7A5A00;
  --error-bg: #FDE8E8;
  --error-text: #A61B1B;
  --shadow: 0 8px 30px rgba(0,0,0,.05);
}

* { box-sizing: border-box; }
html, body { margin: 0; background: var(--page-bg); color: var(--text); }
body { overflow-x: hidden; }
button, input, select { font: inherit; }
button { cursor: pointer; }
a { color: inherit; }
.wrap { max-width: 980px; margin: 0 auto; padding: 28px 16px 60px; }

/* Header */
.site-header { display:flex; align-items:flex-start; justify-content:space-between; gap:20px; margin-bottom:18px; }
.eyebrow, .section-kicker { font-size:12px; font-weight:900; letter-spacing:.16em; margin:0 0 6px; }
h1 { font-size:clamp(38px, 7vw, 62px); line-height:.95; margin:0; letter-spacing:-.05em; }
h2 { margin:0; font-size:clamp(27px, 4vw, 38px); letter-spacing:-.035em; }
h3 { margin:0; font-size:19px; letter-spacing:-.02em; }
p { line-height:1.5; }
.sub, .section-heading p, .community-lead { margin:10px 0 0; color:var(--muted-text); }

/* Navigation */
.main-nav { display:flex; gap:8px; margin-bottom:26px; padding:6px; width:fit-content; max-width:100%; background:#fff; border:1px solid var(--border); border-radius:14px; overflow-x:auto; scrollbar-width:none; }
.main-nav::-webkit-scrollbar { display:none; }
.nav-tab { flex:0 0 auto; border:1px solid transparent; background:transparent; color:var(--text); border-radius:9px; padding:9px 14px; font-weight:800; white-space:nowrap; }
.nav-tab:hover { background:#111; color:#fff; }
.nav-tab.active { background:var(--button-active-bg); color:var(--button-active-text); border-color:var(--button-active-bg); }
.app-view { display:none; }
.app-view.active { display:block; }

/* Section headings */
.section-heading { display:flex; justify-content:space-between; align-items:flex-end; gap:18px; margin-bottom:18px; }
.section-heading > div { max-width:720px; }
.refresh-button { border:1px solid var(--button-border); background:var(--button-bg); color:var(--button-text); border-radius:10px; padding:10px 13px; font-weight:800; }
.refresh-button:hover { background:#111; color:#fff; }

/* Filters */
.filters { display:grid; grid-template-columns:1fr; gap:10px; background:var(--card-bg); padding:14px; border-radius:18px; box-shadow:var(--shadow); }
.filters > * { min-width:0; }
label { display:flex; flex-direction:column; gap:5px; font-size:12px; font-weight:700; color:var(--muted-text); }
input, select { width:100%; min-width:0; border:1px solid var(--border); border-radius:10px; padding:10px; background:var(--card-bg); color:var(--text); }
#meta { color:#7a827a; font-size:12px; margin:12px 3px; }


.time-filter { display:flex; flex-direction:column; gap:7px; }
.time-filter > span { font-size:12px; font-weight:700; color:var(--muted-text); }
.time-filter small { color:var(--muted-text); font-size:11px; }
.time-buttons { display:grid; grid-template-columns:repeat(8,minmax(0,1fr)); gap:7px; }
.time-choice { width:100%; min-width:0; border:1px solid var(--button-border); background:var(--button-bg); color:var(--button-text); padding:9px 6px; border-radius:10px; font-size:13px; font-weight:800; transition:.15s ease; }
.time-choice:hover, .time-choice:focus-visible { background:#111; color:#fff; border-color:#111; }
.time-choice.active, .time-choice.active:hover { background:var(--button-active-bg); color:var(--button-active-text); border-color:var(--button-active-bg); }

.duration-filter, .region-filter { grid-column:1 / -1; }
.duration-filter { display:flex; flex-direction:column; gap:7px; margin-top:2px; }
.duration-filter > span, .region-filter > span { font-size:12px; font-weight:700; color:var(--muted-text); }
.duration-buttons { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:8px; }
.duration { width:100%; min-width:0; border:1px solid var(--button-border); background:var(--button-bg); color:var(--button-text); padding:10px 12px; border-radius:10px; font-weight:800; transition:.15s ease; }
.duration:hover, .duration:focus-visible { background:#111; color:#fff; border-color:#111; }
.duration.active, .duration.active:hover { background:var(--button-active-bg); color:var(--button-active-text); border-color:var(--button-active-bg); }
.region-filter > span { display:block; margin-bottom:7px; }
.region-buttons { display:flex; gap:7px; overflow-x:auto; padding-bottom:3px; -webkit-overflow-scrolling:touch; scrollbar-width:none; }
.region-buttons::-webkit-scrollbar { display:none; }
.region { flex:0 0 auto; border:1px solid var(--button-border); border-radius:999px; padding:8px 13px; background:var(--button-bg) !important; color:var(--button-text) !important; font-size:13px; font-weight:700; transition:.15s ease; }
.region:hover, .region:focus-visible { background:#111 !important; color:#fff !important; border-color:#111 !important; }
.region.active, .region.active:hover { background:var(--button-active-bg) !important; color:var(--button-active-text) !important; border-color:var(--button-active-bg) !important; }

/* Sponsor banner */
.partner-banner { margin:14px 0 4px; padding:14px 16px; border:1px solid var(--lime-border); border-radius:14px; background:linear-gradient(90deg,var(--lime-soft),#fff); display:flex; align-items:center; justify-content:space-between; gap:18px; transition:opacity .2s ease; }
.partner-banner[hidden] { display:none; }
.partner-banner-copy { display:flex; flex-direction:column; gap:2px; min-width:0; }
.partner-banner-label, .partner-offer-kicker { font-size:10px; font-weight:900; letter-spacing:.12em; }
.partner-banner-copy strong { font-size:16px; }
.partner-banner-copy span:last-child { color:var(--muted-text); font-size:12px; }
.partner-banner-cta { flex:0 0 auto; border-radius:9px; padding:9px 12px; background:var(--button-active-bg); color:var(--button-active-text); text-decoration:none; font-size:12px; font-weight:900; }
.partner-banner-cta:hover { background:#111; color:#fff; }

/* Court comparison */
.comparison-wrap { width:100%; overflow-x:auto; overflow-y:visible; -webkit-overflow-scrolling:touch; margin-top:18px; padding-bottom:8px; position:relative; }
.comparison { min-width:100%; position:relative; }
.comparison-inner { min-width:max-content; width:100%; position:relative; overflow:visible; }
.comparison-grid { display:grid; grid-template-columns:76px repeat(var(--club-count), minmax(170px,1fr)); align-items:stretch; position:relative; }
.comparison-header { position:relative; z-index:2; background:var(--card-bg); }
.comparison-row { border-top:1px solid rgba(0,0,0,.08); }
.time-cell, .club-cell { padding:10px; background:var(--card-bg); }
.club-header { min-height:72px; display:flex; align-items:center; }
.sticky-time { position:-webkit-sticky; position:sticky; left:0; z-index:30; font-weight:800; background:var(--card-bg); border-right:1px solid rgba(0,0,0,.10); box-shadow:6px 0 10px -10px rgba(0,0,0,.45); }
.top-left { z-index:60; }
.club-head { display:flex; flex-direction:column; gap:6px; min-width:0; }
.club-name { font-weight:800; line-height:1.2; overflow-wrap:anywhere; }
.status-badge { display:inline-flex; width:fit-content; font-size:11px; font-weight:800; border-radius:999px; padding:3px 7px; border:1px solid rgba(0,0,0,.12); }
.status-badge.live { background:var(--live-bg); color:var(--live-text); }
.status-badge.setup { background:var(--setup-bg); color:var(--setup-text); }
.status-badge.error { background:var(--error-bg); color:var(--error-text); }
.club-message { margin-top:3px; max-width:220px; font-size:11px; line-height:1.3; opacity:.75; overflow-wrap:anywhere; }
.club-problem { font-size:11px; line-height:1.35; color:var(--error-text); background:#fff7f7; overflow-wrap:anywhere; }
.slot-stack { display:flex; flex-direction:column; gap:7px; }
.slot-card { border:1px solid var(--lime-border); border-radius:10px; padding:8px 9px; background:var(--lime-soft); }
.slot-court { font-size:13px; font-weight:700; line-height:1.25; }
.slot-type { font-size:11px; opacity:.72; margin-top:2px; text-transform:capitalize; }
.slot-price { margin-top:4px; font-weight:800; font-size:13px; }
.empty-slot { display:flex; justify-content:center; align-items:center; color:rgba(0,0,0,.35); font-size:18px; }
.book-link, .primary-cta { display:inline-flex; align-items:center; justify-content:center; margin-top:8px; font-size:12px; font-weight:900; text-decoration:none; background:var(--button-active-bg); color:var(--button-active-text); padding:7px 10px; border-radius:8px; transition:.15s ease; }
.book-link:hover, .primary-cta:hover { background:#111; color:#fff; }
.loading-state, .empty-state { padding:22px 10px; text-align:center; color:var(--muted-text); }

/* Events */
.events-grid { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:16px; }
.event-card { background:var(--card-bg); border:1px solid var(--border); border-radius:18px; padding:18px; box-shadow:0 8px 24px rgba(0,0,0,.035); }
.event-card-top { display:flex; align-items:flex-start; justify-content:space-between; gap:12px; }
.event-date { color:var(--muted-text); font-size:12px; font-weight:800; text-transform:capitalize; margin-bottom:4px; }
.event-status { flex:0 0 auto; font-size:10px; font-weight:900; letter-spacing:.06em; border-radius:999px; padding:6px 8px; }
.event-status.full { background:var(--error-bg); color:var(--error-text); }
.event-status.open { background:var(--live-bg); color:var(--live-text); }
.event-status.external { background:var(--lime-soft); color:var(--text); }
.event-meta { display:flex; flex-wrap:wrap; gap:7px 12px; margin-top:14px; color:var(--muted-text); font-size:12px; }
.event-card p { color:var(--muted-text); font-size:14px; margin:14px 0 0; }
.event-tags { display:flex; flex-wrap:wrap; gap:6px; margin-top:14px; }
.event-tags span { border:1px solid var(--border); border-radius:999px; padding:5px 8px; font-size:11px; font-weight:700; }
.secondary-cta { margin-top:16px; border:1px solid var(--border); background:#eee; color:#777; border-radius:8px; padding:8px 11px; font-weight:800; cursor:not-allowed; }

/* Community */
.community-hero { background:var(--card-bg); border-radius:22px; padding:clamp(22px,5vw,42px); box-shadow:var(--shadow); }
.community-hero h2 { max-width:650px; }
.community-lead { max-width:650px; font-size:16px; }
.community-stats { display:flex; gap:12px; margin:24px 0 14px; flex-wrap:wrap; }
.stat-card { min-width:150px; padding:14px 16px; border-radius:14px; background:var(--lime-soft); border:1px solid var(--lime-border); display:flex; flex-direction:column; gap:2px; }
.stat-card strong { font-size:24px; }
.stat-card span { color:var(--muted-text); font-size:12px; }
.primary-cta { font-size:14px; padding:11px 15px; border-radius:10px; }
.primary-cta.small { margin-top:16px; font-size:12px; padding:8px 11px; }
.primary-cta.is-disabled { pointer-events:none; opacity:.45; filter:grayscale(.4); }
.config-help { color:var(--muted-text); font-size:12px; margin:9px 0 0; }
.community-features { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:12px; margin-top:14px; }
.feature-card { background:var(--card-bg); border:1px solid var(--border); border-radius:16px; padding:17px; box-shadow:var(--shadow); }
.feature-card p { margin:8px 0 0; color:var(--muted-text); font-size:14px; }
code { background:#f1f1ec; border-radius:5px; padding:2px 5px; }

/* Partners */
.partner-intro-grid { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:12px; margin:20px 0 28px; }
.partner-offer-card, .partner-card, .partner-join-card { background:var(--card-bg); border:1px solid var(--border); border-radius:16px; padding:18px; }
.partner-offer-card h3 { margin-top:7px; }
.partner-offer-card p, .partner-card p, .partner-join-card p { color:var(--muted-text); margin:8px 0 0; font-size:14px; }
.partners-section-head { margin:4px 0 12px; }
.partners-grid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:12px; }
.partner-card { box-shadow:var(--shadow); }
.partner-card-head { display:flex; align-items:center; gap:12px; }
.partner-logo { width:54px; height:54px; border-radius:12px; object-fit:contain; border:1px solid var(--border); background:#fff; padding:5px; }
.partner-category { color:var(--muted-text); font-size:11px; font-weight:800; text-transform:uppercase; letter-spacing:.06em; }
.partner-benefit { margin-top:12px; padding:10px 12px; border-radius:10px; background:var(--lime-soft); border:1px solid var(--lime-border); font-size:13px; font-weight:700; }
.partner-link { display:inline-flex; margin-top:12px; color:var(--text); font-size:12px; font-weight:900; }
.partner-join-card { margin-top:18px; display:flex; align-items:center; justify-content:space-between; gap:20px; background:var(--lime-soft); border-color:var(--lime-border); }

/* Tablet / mobile */
@media (max-width:800px) {
  .events-grid { grid-template-columns:repeat(2,minmax(0,1fr)); gap:10px; }
  .section-heading { flex-direction:column; align-items:flex-start; }
  .partner-intro-grid, .community-features { grid-template-columns:1fr; }
  .partners-grid { grid-template-columns:1fr; }
  .partner-join-card { flex-direction:column; align-items:flex-start; }
}

@media (max-width:700px) {
  .wrap { width:100%; max-width:100%; padding:16px 8px 42px; }
  .site-header { flex-direction:column; margin-bottom:14px; }
  h1 { font-size:clamp(34px,12vw,48px); }
  .sub { font-size:12px; }

  .main-nav { width:100%; padding:4px; gap:4px; margin-bottom:20px; }
  .nav-tab { padding:7px 10px; font-size:11px; }

  .section-heading { margin-bottom:14px; }
  .section-heading h2 { font-size:24px; }
  .section-heading p:not(.section-kicker) { font-size:13px; }

  .filters { grid-template-columns:1fr; width:100%; padding:10px; gap:9px; border-radius:14px; overflow:hidden; }
  .filters label:first-child { grid-column:auto; }
  .region-filter, .duration-filter, .filters label { width:100%; min-width:0; }
  .region-buttons { width:100%; margin:0; padding:0 0 4px; }
  .region { padding:6px 9px; font-size:10px; }
  .time-buttons { grid-template-columns:repeat(4,minmax(0,1fr)); gap:6px; }
  .time-choice { padding:8px 3px; font-size:11px; }
  .duration-buttons { gap:6px; }
  .duration { padding:8px 4px; font-size:10px; }

  .partner-banner { width:100%; align-items:stretch; flex-direction:column; gap:10px; padding:12px; }
  .partner-banner-cta { width:100%; text-align:center; }

  .comparison-wrap { width:100%; max-width:100%; margin:10px 0 0; padding:0 0 8px; overflow-x:auto; overflow-y:visible; }
  .comparison { min-width:max-content; }
  .comparison-inner { width:max-content; min-width:max-content; }
  .comparison-grid { grid-template-columns:56px repeat(var(--club-count),155px); }
  .time-cell, .club-cell { padding:7px; }
  .sticky-time { width:56px; min-width:56px; z-index:30; }
  .top-left { z-index:60; }
  .club-header { min-height:72px; align-items:flex-start; }
  .club-name { font-size:11px; line-height:1.15; }
  .status-badge { font-size:8px; padding:2px 5px; }
  .club-message, .club-problem { font-size:9px; }
  .slot-card { padding:7px; border-radius:8px; }
  .slot-court, .slot-price { font-size:11px; }
  .slot-type { font-size:9px; }
  .book-link { font-size:10px; padding:5px 7px; }

  .event-card, .partner-card, .partner-offer-card, .partner-join-card, .feature-card { padding:14px; }
  .community-hero { padding:18px; }
  .community-hero h2 { font-size:34px; }
  .community-lead { font-size:14px; }
  .community-stats { display:grid; grid-template-columns:1fr 1fr; }
  .stat-card { min-width:0; padding:14px; }
  .stat-card strong { font-size:24px; }
  .stat-card span { font-size:12px; }
}

@media (max-width:430px) {
  .events-grid { grid-template-columns:1fr; }
}

@media (max-width:480px) {
  .duration-buttons { grid-template-columns:repeat(3,minmax(0,1fr)); }
  .comparison-grid { grid-template-columns:56px repeat(var(--club-count),150px); }
}

/* v14.4: eventfilters + stale cache status */
.status-badge.stale {
  background: var(--setup-bg);
  color: var(--setup-text);
}
.event-status.closed {
  background: var(--setup-bg);
  color: var(--setup-text);
}
.event-filter-wrap {
  margin: 0 0 16px;
  padding: 12px 14px;
  background: var(--card-bg);
  border: 1px solid var(--border);
  border-radius: 16px;
}
.event-filter-wrap > span {
  display: block;
  margin-bottom: 8px;
  color: var(--muted-text);
  font-size: 12px;
  font-weight: 800;
}
.event-source-buttons {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
}
.event-filter {
  appearance: none;
  border: 1px solid var(--button-border);
  background: var(--button-bg);
  color: var(--button-text);
  border-radius: 999px;
  padding: 8px 12px;
  font: inherit;
  font-size: 13px;
  font-weight: 800;
  cursor: pointer;
}
.event-filter.active {
  background: var(--button-active-bg);
  color: var(--button-active-text);
}
.event-filter:hover:not(.active) {
  background: #111;
  color: #fff;
}
.booking-hint {
  margin-top: 6px;
  color: var(--muted-text);
  font-size: 10px;
  line-height: 1.3;
}

/* v14.5: animated CourtFinder loader */
.padel-loading {
  min-height: 180px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 7px;
}
.padel-loading strong {
  color: var(--text);
  font-size: 14px;
}
.padel-loading > span {
  color: var(--muted-text);
  font-size: 12px;
}
.padel-loader {
  position: relative;
  width: 106px;
  height: 88px;
  margin-bottom: 5px;
}
.padel-racket {
  position: absolute;
  left: 23px;
  top: 5px;
  width: 48px;
  height: 58px;
  border: 4px solid #111;
  border-radius: 46% 46% 42% 42%;
  background:
    radial-gradient(circle at 12px 12px, #111 0 2px, transparent 2.5px),
    radial-gradient(circle at 24px 12px, #111 0 2px, transparent 2.5px),
    radial-gradient(circle at 36px 12px, #111 0 2px, transparent 2.5px),
    radial-gradient(circle at 12px 25px, #111 0 2px, transparent 2.5px),
    radial-gradient(circle at 24px 25px, #111 0 2px, transparent 2.5px),
    radial-gradient(circle at 36px 25px, #111 0 2px, transparent 2.5px),
    radial-gradient(circle at 12px 38px, #111 0 2px, transparent 2.5px),
    radial-gradient(circle at 24px 38px, #111 0 2px, transparent 2.5px),
    radial-gradient(circle at 36px 38px, #111 0 2px, transparent 2.5px),
    var(--button-active-bg);
  transform: rotate(-18deg);
  transform-origin: 50% 86%;
  animation: padel-swing 1.15s ease-in-out infinite;
  box-shadow: 0 5px 14px rgba(0,0,0,.10);
}
.padel-racket::after {
  content: "";
  position: absolute;
  left: 17px;
  top: 54px;
  width: 12px;
  height: 30px;
  border-radius: 5px 5px 7px 7px;
  background: #111;
}
.padel-ball {
  position: absolute;
  right: 9px;
  top: 22px;
  width: 19px;
  height: 19px;
  border-radius: 50%;
  background: var(--button-active-bg);
  border: 2px solid #111;
  box-shadow: 0 4px 10px rgba(0,0,0,.10);
  animation: padel-ball-bounce 1.15s ease-in-out infinite;
}
.padel-ball::after {
  content: "";
  position: absolute;
  left: 3px;
  top: 7px;
  width: 10px;
  height: 4px;
  border-top: 2px solid #fff;
  border-radius: 50%;
  transform: rotate(-25deg);
}
@keyframes padel-swing {
  0%, 100% { transform: rotate(-22deg); }
  48% { transform: rotate(5deg); }
  62% { transform: rotate(-3deg); }
}
@keyframes padel-ball-bounce {
  0%   { transform: translate(15px, -6px) scale(.92); }
  48%  { transform: translate(-13px, 8px) scale(1); }
  52%  { transform: translate(-15px, 8px) scale(.92); }
  100% { transform: translate(15px, -6px) scale(.92); }
}
@media (prefers-reduced-motion: reduce) {
  .padel-racket, .padel-ball { animation: none; }
}