/* UI kit overwrite CSS
   Load this file after the existing premguide/assets/css.css file.
   Required font link in HTML:
   https://fonts.googleapis.com/css2?family=Cal+Sans&family=Outfit:wght@400;500;600;700;800&display=swap
*/

:root{
  --ui-font-heading:"Cal Sans",Arial,sans-serif;
  --ui-font-body:"Outfit",Arial,sans-serif;
  --ui-bg:#ffffff;
  --ui-surface:#ffffff;
  --ui-surface-soft:#f9fafb;
  --ui-text:#333333;
  --ui-text-muted:#667085;
  --ui-border:#d1d5db;
  --ui-border-strong:#b8bec7;
  --ui-accent:#10EFFF;
  --ui-accent-soft:#E7FDFF;
  --ui-action:#333333;
  --ui-action-hover:#444444;
  --ui-positive-bg:#eef8f1;
  --ui-positive-text:#23623a;
  --ui-positive-border:#c7e8d1;
  --ui-danger-bg:#fff1f1;
  --ui-danger-text:#9f1f1f;
  --ui-danger-border:#f3c4c4;
  --ui-radius-sm:8px;
  --ui-radius-md:12px;
  --ui-radius-lg:20px;
  --ui-shadow:none;

  --bg:var(--ui-bg);
  --text:var(--ui-text);
  --border:var(--ui-border);
  --border-strong:var(--ui-border-strong);
  --muted:var(--ui-text-muted);
  --soft:var(--ui-surface-soft);
  --soft-2:#f1ede5;
  --green-bg:var(--ui-positive-bg);
  --green-text:var(--ui-positive-text);
  --green-border:var(--ui-positive-border);
  --red-bg:var(--ui-danger-bg);
  --red-text:var(--ui-danger-text);
  --red-border:var(--ui-danger-border);
}

html,
body{
  background:var(--ui-bg);
  color:var(--ui-text);
  font-family:var(--ui-font-body);
}

body,
p,
span,
div,
label,
th,
td,
li,
a{
  color:var(--ui-text);
}

body,
body *{
  letter-spacing:0!important;
}

button,
select,
input,
a,
p,
span,
div,
label,
table,
th,
td,
.leaflet-container,
.leaflet-popup-content,
.leaflet-control{
  font-family:var(--ui-font-body);
}

h1,
h2,
h3,
h4,
.hero h1,
.popupTitle,
.infoPanelTitle,
.fixturesHeader h2,
.leagueTableHeader h2,
.goalsChartHeader h3,
.goalTrendsHeader h3,
.fixtureMonthHeading,
.mapLoading strong,
.journeyToggle,
.fixturesToggle,
.routeDirectionsLink,
.popupBtn,
.fixtureFilterBtn,
.leagueTableTab,
.goalsChartToggle,
.goalsSeasonToggle,
.fixtureArrow,
.infoPanelClose,
.leaflet-popup-close-button,
.clubShareBtn{
  font-family:var(--ui-font-heading);
  font-weight:400;
}

body:before{
  content:"";
  position:fixed;
  inset:0;
  z-index:-1;
  background:var(--ui-bg);
}

.page{
  width:min(1520px,100%);
  padding:28px 28px 32px;
  background:transparent;
}

.hero{
  align-items:flex-start;
  margin-bottom:24px;
  padding:22px;
  background:var(--ui-surface);
  border:1px solid var(--ui-border);
  border-radius:var(--ui-radius-lg);
  box-shadow:var(--ui-shadow);
}

.hero h1{
  color:var(--ui-text);
  font-size:clamp(34px,4vw,48px);
  line-height:.82;
  text-transform:none;
}

.guideTitleRow{
  display:flex;
  //align-items:center;
  gap:28px;
}

.guideNav{
  align-items:center;
  gap:22px;
  padding:0;
}

.guideNavLink{
  font-family:var(--ui-font-body);
  position:relative;
  display:inline-flex;
  align-items:center;
  min-height:auto;
  padding:0 0 7px;
  color:#333333;
  background:transparent;
  border:0;
  border-radius:0;
  font-size:20px;
  font-weight:700;
  line-height:1;
  text-decoration:none;
  transition:color .18s ease;
}

.guideNavLink:after{
  content:"";
  position:absolute;
  left:0;
  right:0;
  bottom:0;
  height:2px;
  background:var(--ui-accent);
  transform:scaleX(0);
  transform-origin:left center;
  transition:transform .18s ease;
}

.guideNavLink:hover,
.guideNavLink:focus-visible,
.guideNavLink.isActive{
  color:#333333;
  background:transparent;
  border:0;
}

.guideNavLink:hover:after,
.guideNavLink.isActive:after{
  transform:scaleX(1);
}

#premierSeasonToggles{
  margin-top:12px;
  padding:2px 0 6px;
}

.topbinsLogo{
  width:104px;
}

.topbinsLogo img{
  filter:brightness(0) saturate(100%);
}

.toolToggles{
  gap:12px;
  margin-bottom:16px;
  padding:2px 0 8px;
}

.journeyToggle,
.fixturesToggle,
.routeDirectionsLink,
.popupBtn,
.fixtureFilterBtn,
.leagueTableTab,
.goalsChartToggle,
.goalsSeasonToggle{
  font-family:var(--ui-font-heading);
  min-height:42px;
  flex-shrink:0;
  gap:8px;
  padding:11px 16px;
  border-radius:var(--ui-radius-sm);
  border:1px solid var(--ui-border-strong);
  background:var(--ui-surface);
  color:var(--ui-text);
  font-size:16px;
  font-weight:400;
  line-height:1;
  text-transform:none;
  transition:background .18s ease,border-color .18s ease,color .18s ease,box-shadow .18s ease;
}

.fixtureArrow,
.infoPanelClose,
.leaflet-popup-close-button{
  font-family:var(--ui-font-heading);
  font-weight:400;
  flex-shrink:0;
  border-radius:var(--ui-radius-sm);
  border:1px solid var(--ui-border-strong);
  background:var(--ui-surface);
  color:var(--ui-text);
  transition:background .18s ease,border-color .18s ease,color .18s ease,box-shadow .18s ease;
}

.journeyToggle:hover,
.fixturesToggle:hover,
.routeDirectionsLink:hover,
.popupBtn:hover,
.fixtureFilterBtn:hover,
.fixtureArrow:hover,
.infoPanelClose:hover,
.leaflet-popup-close-button:hover,
.leagueTableTab:hover,
.goalsChartToggle:hover,
.goalsSeasonToggle:hover{
  transform:none;
  box-shadow:0 1px 0 rgba(0,0,0,.06);
}

.journeyToggle,
.fixturesToggle,
.routeDirectionsLink,
.popupBtn:not(.secondary),
.fixtureFilterBtn.isActive,
.leagueTableTab.isActive,
.goalsChartToggle.isActive,
.goalsSeasonToggle.isActive{
  background:var(--ui-action);
  color:#ffffff;
  border-color:var(--ui-action);
}

.journeyToggle .material-symbols-outlined,
.fixturesToggle .material-symbols-outlined,
.routeDirectionsLink .material-symbols-outlined,
.popupBtn:not(.secondary) .material-symbols-outlined,
.fixtureFilterBtn.isActive .material-symbols-outlined,
.leagueTableTab.isActive .material-symbols-outlined,
.goalsChartToggle.isActive .material-symbols-outlined,
.goalsSeasonToggle.isActive .material-symbols-outlined{
  color:#ffffff;
}

.journeyToggle:hover,
.fixturesToggle:hover,
.routeDirectionsLink:hover,
.popupBtn:not(.secondary):hover,
.fixtureFilterBtn.isActive:hover,
.leagueTableTab.isActive:hover,
.goalsChartToggle.isActive:hover,
.goalsSeasonToggle.isActive:hover{
  background:var(--ui-action-hover);
  color:#ffffff;
  border-color:var(--ui-action-hover);
}

.journeyToggle:hover .material-symbols-outlined,
.fixturesToggle:hover .material-symbols-outlined,
.routeDirectionsLink:hover .material-symbols-outlined,
.popupBtn:not(.secondary):hover .material-symbols-outlined,
.fixtureFilterBtn.isActive:hover .material-symbols-outlined,
.leagueTableTab.isActive:hover .material-symbols-outlined,
.goalsChartToggle.isActive:hover .material-symbols-outlined,
.goalsSeasonToggle.isActive:hover .material-symbols-outlined{
  color:#ffffff;
}

.fixtureFilterBtn:not(.isActive),
.popupBtn.secondary,
.leagueTableTab:not(.isActive),
.fixtureArrow,
.infoPanelClose,
.leaflet-popup-close-button,
.goalsChartToggle:not(.isActive),
.goalsSeasonToggle:not(.isActive){
  background:var(--ui-surface);
  color:var(--ui-text);
  border-color:var(--ui-border-strong);
}

.fixtureFilterBtn:not(.isActive):hover,
.popupBtn.secondary:hover,
.leagueTableTab:not(.isActive):hover,
.fixtureArrow:hover,
.infoPanelClose:hover,
.leaflet-popup-close-button:hover,
.goalsChartToggle:not(.isActive):hover,
.goalsSeasonToggle:not(.isActive):hover{
  background:var(--ui-surface-soft);
  color:var(--ui-text);
  border-color:var(--ui-text);
}

.routePlanner,
.fixturesPanel,
.leagueTablePanel{
  padding:18px;
  background:var(--ui-surface);
  border:1px solid var(--ui-border);
  border-radius:var(--ui-radius-lg);
  box-shadow:var(--ui-shadow);
}

.routeField label,
.teamGoalControlsLabel,
.attendanceStat strong,
.goalsStat strong,
.teamTimingStat strong{
  color:var(--ui-text-muted);
  font-size:13px;
}

.routeField select,
.fixtureClubFilter{
  min-height:46px;
  border-color:var(--ui-border);
  border-radius:var(--ui-radius-sm);
  background:var(--ui-surface-soft);
  color:var(--ui-text);
}

.routeField select:focus,
.fixtureClubFilter:focus,
button:focus-visible,
a:focus-visible{
  outline:none;
  box-shadow:0 0 0 3px rgba(16,239,255,.28);
  border-color:var(--ui-accent);
}

.routeStatus{
  background:var(--ui-accent-soft);
  border:1px solid var(--ui-border);
  border-left:6px solid var(--ui-action);
  color:var(--ui-text);
  border-radius:var(--ui-radius-md);
}

.fixturesHeader h2,
.leagueTableHeader h2,
.goalsChartHeader h3,
.goalTrendsHeader h3{
  color:var(--ui-text);
}

.leagueTableHeader p,
.goalsChartHeader p,
.goalTrendsHeader p,
.goalTrendCard p,
.fixtureDate,
.fixtureMeta,
.fixtureEmpty,
.popupMeta,
.infoPanelMeta{
  color:var(--ui-text-muted);
}

.leagueTableWrap,
.attendanceTableWrap{
  border-color:var(--ui-border);
  border-radius:var(--ui-radius-md);
  background:var(--ui-surface);
}

.leagueTable th,
.leagueTable td{
  border-bottom:1px solid var(--ui-border);
  color:var(--ui-text);
}

.leagueTable th{
  font-family:var(--ui-font-body);
  background:var(--ui-surface-soft);
  color:var(--ui-text-muted);
  font-size:14px;
}

.attendanceStat,
.goalsStat,
.teamTimingStat,
.goalTrendCard{
  background:var(--ui-surface-soft);
  border:1px solid var(--ui-border);
  border-radius:var(--ui-radius-md);
}

.attendanceStat span,
.goalsStat span,
.teamTimingStat span{
  color:var(--ui-text);
}

.goalsChart{
  padding:20px;
  background:var(--ui-surface-soft);
  border:1px solid var(--ui-border);
  border-radius:var(--ui-radius-lg);
}

.teamGoalBadge{
  background:var(--ui-surface);
  border-color:var(--ui-border);
}

.teamGoalBadge.isActive{
  background:var(--ui-action);
  border-color:var(--ui-action);
}

.goalTrendStat{
  background:var(--ui-surface);
  border:1px solid var(--ui-border);
  border-radius:999px;
}

.fixtureMonthHeading{
  border-bottom:1px solid var(--ui-border);
  color:var(--ui-text);
}

.fixtureCard{
  border-bottom:1px solid var(--ui-border);
}

.fixtureScore,
.fixtureBadgeFallback{
  background:var(--ui-surface-soft);
  border-color:var(--ui-border);
  border-radius:999px;
}

.mapShell{
  background:var(--ui-surface);
  border:1px solid var(--ui-border);
  border-radius:var(--ui-radius-lg);
  box-shadow:var(--ui-shadow);
}

#map,
.mapLoading,
.leaflet-container{
  background:#f4f2ec;
}

.markerWrap{
  width:54px;
  height:54px;
  background:var(--ui-surface);
  border:2px solid var(--ui-surface);
  box-shadow:0 8px 24px rgba(24,24,24,.16);
}

.groundLabel{
  padding:7px 11px;
  background:var(--ui-action);
  color:#ffffff;
  border:1px solid rgba(255,255,255,.75);
  border-radius:999px;
  font-size:13px;
}

.leaflet-popup-content-wrapper{
  background:var(--ui-surface);
  border:1px solid var(--ui-border);
  border-radius:var(--ui-radius-md);
}

.popupTitle{
  color:var(--ui-text);
  font-size:22px;
}

.infoPanel{
  padding:24px;
  background:var(--ui-surface);
  border-left:1px solid var(--ui-border);
  box-shadow:-18px 0 46px rgba(24,24,24,.16);
}

.infoPanelHeader,
.infoPanelDetails,
.infoPanelRow{
  border-color:var(--ui-border);
}

.infoPanelTitle{
  color:var(--ui-text);
  font-size:26px;
}

.infoPanelRow strong{
  color:var(--ui-text-muted);
}

.infoPanelRow p,
.infoPanelRow a{
  color:var(--ui-text);
}

.tag{
  border-radius:999px;
  font-size:13px;
}

.clubShareBtn{
  font-family:var(--ui-font-heading);
  font-weight:400;
  border-radius:var(--ui-radius-sm);
  background:var(--ui-action);
  color:#ffffff;
}

.clubShareBtn:hover{
  background:var(--ui-action-hover);
}

@media(max-width:700px){
  .page{
    padding:14px;
  }

  .hero{
    padding:18px;
    border-radius:20px;
  }

  .hero h1{
    font-size:38px;
  }

  .guideNav,
  .seasonTogglesSecondary,
  .toolToggles{
    flex-wrap:nowrap;
    overflow-x:auto;
    padding-bottom:8px;
  }

  .guideNavLink,
  .journeyToggle,
  .fixturesToggle,
  .seasonToggleSecondary.fixtureFilterBtn{
    flex:0 0 auto;
    white-space:nowrap;
  }

  .routePlanner,
  .fixturesPanel,
  .leagueTablePanel,
  .goalsChart{
    padding:14px;
    border-radius:20px;
  }

  .mapShell,
  #map,
  .mapLoading{
    min-height:580px;
    height:580px;
  }

  .infoPanel{
    width:94vw;
  }
}