@font-face {
    font-family: "Playfair";
    src: url("fonts/Playfair.ttf") format("truetype");
    font-weight: normal;
    font-style: normal;
  }
  
  @font-face {
    font-family: "Chivo";
    src: url("fonts/Chivo.ttf") format("truetype");
    font-weight: normal;
    font-style: normal;
  }
  

@font-face {
  font-family: "ChangaOne";
  src: url("fonts/ChangaOne-Regular.ttf") format("truetype");
  font-weight: normal;
  font-style: normal;
  font-display: swap;
}
:root {
    /* Light UI */
    --bg: #F6F4EF;
    --panel: #FFFFFF;
    --text: #0E1A22;
    --muted: #5C6B78;
    --line: rgba(14,26,34,0.10);
  
    --green: #32a707;
    --amber: #faae2a;
    --red: #c4100a;
  
    --radius: 14px;
  
    /* Fonts */
    
--font-body: "Chivo", system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Arial, sans-serif;
--font-heading: "ChangaOne", Georgia, serif;

  }
  
  
  
  * { box-sizing: border-box; }
  html, body { height: 100%; }
 
  h1, h2 {
    font-family: var(--font-heading);
    font-weight: 700;
    letter-spacing: -0.01em;
  }
.title {
    font-family: var(--font-heading);
    font-weight: 900;
    letter-spacing: -0.01em;
    font-size: 32px;
}

  label, .nav a, button, select, input {
    font-family: var(--font-body);
  }
  
  body {
    margin: 0;
    font-family: var(--font-body);
    background: var(--bg);
    color: var(--text);
  }  
  
  header.topbar {
  position: fixed;
  top: 12px;
  left: 0;
  right: 0;
  z-index: 1000;
  backdrop-filter: blur(2px);

  display: flex;
  justify-content: center;
  padding: 0 12px;

  /* make only the inner "card" interactive */
  pointer-events: none;

  /* let the page background show through around the floating card */
  background: transparent;
  border: 0;
}

header.topbar .topbar-inner {
    pointer-events: auto;
  
    width: 100%;
    max-width: none;
  
    display: flex;
    align-items: center;
    justify-content: space-between;
  
    padding: 12px 18px;
    border-radius: 16px;
  
    background: #097c87;
    backdrop-filter: blur(14px) saturate(1.1);
  
    border: 1px solid rgba(255,255,255,0.12);
  
    box-shadow:
      0 10px 30px rgba(0,0,0,0.18),
      0 1px 0 rgba(255,255,255,0.06) inset;
  }
  

header.topbar { color: #ffffff; }
header.topbar .title {
    color: #ffffff;
  }
  
  header.topbar .subtitle {
    color: rgba(85, 84, 82, 0.8);
  }
  
  header.topbar .nav a {
    color: rgba(255, 255, 255, 0.85);
  }
  
 header.topbar .nav a.active {
    color: #636260;
    border-color: rgba(245, 230, 204, 0.4);
    background: rgba(245, 230, 204, 0.08);
  }
  
 header.topbar .nav a:hover {
    color: #5e5d5b;
    background: rgba(245, 230, 204, 0.08);
  }
  
  .topbar-inner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    
  }
  header.topbar .logo { color: #fff; }

  
  .brand { display: flex; gap: 10px; text-align: left; }
  .logo {
  width: 44px;
  height: 44px;
  display: grid;
  place-items: center;
  flex-shrink: 0;
  
}

.logo svg {
  width: 60px;
  height: 60px;
  color:inherit;
  display: block;
}
.logo img {
    width: 60px;
    height: 60px;
    object-fit: contain;
    display: block;
  }
  
  
    .title { 
    font-weight:900;
      text-align: left;
  }
    .subtitle {
        font-family: var(--font-body);
        font-size: 13px;
        color: var(--muted);
      }
      
  
  .nav { display: flex; gap: 10px; }
  .nav a {
    color: var(--muted);
    text-decoration: none;
    padding: 8px 10px;
    border-radius: 10px;
    border: 1px solid transparent;
  }
  .nav a.active { color: var(--text); border-color: var(--line); background: rgba(255,255,255,0.03); }
  .nav a[aria-disabled="true"] { opacity: 0.5; cursor: not-allowed; }
  
  .layout {
    position: relative;
    display: grid;
    grid-template-columns: 360px 1fr;
    height: 100vh;
  }
  
  .panel {
    position: fixed;
    top: 92px;              /* leaves room for the floating header */
    left: 12px;
    width: 360px;
    z-index: 900;           /* below header, above map */
  
    padding: 16px;
    overflow: auto;
  
    background: rgba(255,255,255,0.92);
    backdrop-filter: blur(14px) saturate(1.05);
  
    border: 1px solid rgba(14,26,34,0.10);
    border-radius: 18px;
  
    box-shadow: 0 12px 34px rgba(0,0,0,0.14);
  }
  
  
  
  .panel h1 {
    font-size: 22px;
    line-height: 1.25;
    margin-bottom: 8px;
  }
  .hint { color: var(--muted); margin: 0 0 14px; font-size: small; }
  
  .filters {
    display: grid;
    gap: 10px;
    padding: 12px;
    border: 1px solid var(--line);
    border-radius: var(--radius);
    background: #FAF9F6;
  }
  
  
  .filter-row { display: grid; gap: 6px; }

.filter-row.desktop-search-row{ margin-top: 12px; }
  label { font-size: 12px; color: var(--muted); }
  select, input[type="search"] {
    width: 100%;
    padding: 10px 10px;
    border-radius: 12px;
    border: 1px solid var(--line);
    background: #fff;
    color: var(--text);
    outline: none;
  }
  
  select:focus, input[type="search"]:focus {
    box-shadow: 0 0 0 3px rgba(14, 26, 34, 0.10);
  }
  
  .check { display: flex; gap: 10px; align-items: center; font-size: 14px; color: var(--text); }
  .check input { transform: scale(1.1); }
  
  .btn {
    padding: 10px 12px;
    border-radius: 12px;
    border: 1px solid var(--line);
    background: #fff;
    color: var(--text);
    cursor: pointer;
  }
  .btn.secondary { background: transparent; color: var(--muted); margin-top: 5px; }
  .btn:hover { background: rgba(14,26,34,0.04); }
  
  
  .legend { margin-top: 14px; }
  .legend h2 { font-size: 13px; color: var(--muted); margin: 0 0 8px; }
  .legend-items { display: grid; gap: 8px; }
  .legend-item { display: flex; gap: 10px; align-items: center; color: var(--text); font-size: 14px; }
  
  .dot { width: 10px; height: 10px; border-radius: 999px; display: inline-block; }
  .dot.green { background: var(--green); }
  .dot.amber { background: var(--amber); }
  .dot.red { background: var(--red); }
  
  .stats { margin-top: 14px; display: flex; gap: 16px; color: var(--muted); font-size: 12px; }
  .tiny { margin-top: 14px; color: var(--muted); font-size: 12px; }
  
  .map-wrap {
    position: fixed;
    inset: 0;
  /* allow Leaflet popups to sit above the floating topbar */
  z-index: auto;
}
  
  .map {
    width: 100%;
    height: 100%;
  }
  
  
  @media (max-width: 900px) {
    .layout { grid-template-columns: 1fr; grid-template-rows: auto 1fr; }
    .panel { border-right: none; border-bottom: 1px solid var(--line); }
  }

  /* Icon-only filter controls */
.icon-filter-row {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 10px;
  }
  
  .icon-check {
    display: grid;
    place-items: center;
    gap: 6px;
    padding: 10px 8px;
    border: 1px solid var(--line);
    border-radius: 12px;
    background: rgba(183, 182, 182, 0.394);
    cursor: pointer;
    user-select: none;
  }
  
  .icon-check:hover {
    background: rgba(255,255,255,0.06);
  }
  
  .icon-check input {
    /* Keep checkbox functional but visually hidden */
    position: absolute;
    opacity: 0;
    pointer-events: none;
  }
  
  .icon-check .icon{
    width: 18px;
    height: 18px;
    display: block;
    object-fit: contain;
    filter: saturate(0.95);
  }
  
  
  /* show selected state */
  .icon-check:has(input:checked) {
    outline: 2px solid rgba(255,255,255,0.18);
    background: #097c87;
  }
  .icon-check:has(input:checked) .icon {
    filter: brightness(0) invert(1);
    opacity: 1;
  }
  .icon-check:has(input:checked) .icon-label {
    color: #ffffff;
  }
  /* screen-reader-only text */
  .sr-only {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
  }
  

  
  
/* Labels under filter icons (desktop + mobile) */
.icon-label{
  display:block;
  font-size:11px;
  color: rgba(14,26,34,0.75);
  line-height:1.1;
  text-align:center;
}
/* Popup facility icons */
.facility-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 10px 14px;
    margin-top: 10px;
  }
  
  .facility-row {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 14px;
  }
  
  .facility-icon {
    width: 18px;
    height: 18px;
    opacity: 0.85;
  }
  
  .facility-symbol {
    font-weight: 600;
  }
  
  /* States */
  .facility-row.yes .facility-symbol {
    color: #4CAF50; /* soft green */
  }
  
  .facility-row.no .facility-symbol {
    color: #E57373; /* soft red */
  }
  
  .facility-row.unknown .facility-symbol {
    color: #666769;
  }
  
  /* Kids note spacing */
  .kids-note {
    margin-top: 10px;
    font-size: 12px;
    color: var(--muted);
  }
  
  /* Baby changing detail chips inside the tile */
.has-details {
    position: relative;
  }
  
  .bc-details {
    margin-left: auto;
    display: flex;
    gap: 6px;
  }
  
  .chip {
    display: inline-grid;
    place-items: center;
    min-width: 18px;
    height: 18px;
    padding: 0 6px;
    border-radius: 999px;
    border: 1px solid rgba(14,26,34,0.12);
    background: rgba(255,255,255,0.8);
    font-size: 11px;
    font-weight: 600;
    color: rgba(14,26,34,0.8);
  }

  .icon-chip {
    padding: 0 4px;
  }
  
  .icon-chip img {
    width: 14px;
    height: 14px;
    display: block;
  }
  
  
.fab-add {
  position: fixed;
  right: 18px;
  bottom: 18px;
  z-index: 1400;

  height: 52px;
  padding: 0 16px;
  border-radius: 999px;
  border: none;
  background: #0b1b22;
  color: #fff;
  cursor: pointer;

  box-shadow: 0 10px 24px rgba(0,0,0,0.35);

  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;

  font-size: 22px; /* plus */
  line-height: 1;
}

.fab-add::after{
  content: "Add pub";
  font-size: 14px;
  line-height: 1;
  font-weight: 600;
  letter-spacing: 0.01em;
}

.fab-add:hover { filter: brightness(1.05); }
@media (max-width: 900px) {
   .panel {
      left: 12px;
      right: 12px;
      width: auto;
      top: 86px;
      bottom: auto;
      max-height: 42vh;
    }
  }
  /* Mobile filter sheet */
.fab-filter {
  position: fixed;
  left: 12px;
  bottom: 12px;
  z-index: 1400;

  height: 52px;
  padding: 0 16px;
  border-radius: 999px;
  border: none;
  background: #0b1b22;
  color: #fff;
  cursor: pointer;

  box-shadow: 0 10px 24px rgba(0,0,0,0.35);

  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;

  font-size: 14px;
  font-weight: 600;
  letter-spacing: 0.01em;
}
.fab-filter:hover { filter: brightness(1.05); }

/* Hide floating action buttons when a modal/sheet/popup is open (mobile only) */
@media (max-width: 900px){
  body.ui-busy .fab-add,
  body.ui-busy .fab-filter{
    display: none !important;
  }
}


.overlay {
    position: fixed;
    inset: 0;
    z-index: 880;
    background: rgba(0,0,0,0.28);
  }
  
  @media (min-width: 901px) {
    .fab-filter, .overlay { display: none; }
  }
  
  @media (max-width: 900px) {
    .map-page .panel {
      left: 12px;
      right: 12px;
      width: auto;
      top: auto;
      bottom: 12px;
      max-height: 70vh;
      transform: translateY(calc(100% + 24px));
      transition: transform 220ms ease;
    }
  
    body.map-page.filters-open .panel {
      transform: translateY(0);
    }
  
    body.map-page.filters-open .overlay {
      display: block;
    }
  }

 /* Google Places Autocomplete – force light theme */

/* Outer wrapper */
gmp-place-autocomplete {
  --gmp-font-family: inherit;
}

/* Inner input host */
gmp-place-autocomplete-input {
  --gmp-input-background-color: #ffffff !important;
  --gmp-input-text-color: #0b1b22 !important;
  --gmp-input-placeholder-color: #64748b !important;

  --gmp-input-border-color: rgba(0,0,0,0.15) !important;
  --gmp-input-border-radius: 10px !important;
  --gmp-input-padding: 10px 12px !important;

  --gmp-dropdown-background-color: #ffffff !important;
  --gmp-dropdown-border-color: rgba(0,0,0,0.12) !important;

  --gmp-suggestion-hover-background-color: #f1f5f9 !important;
  --gmp-suggestion-text-color: #0b1b22 !important;
}
 
/* --- Google Place Autocomplete widget styling --- */
gmp-place-autocomplete {
  /* Force light appearance even if widget wants to support light/dark */
  color-scheme: light;

  /* Make it match your other inputs */
  display: block;
  width: 100%;
  background-color: #fff;
  border: 1px solid rgba(0,0,0,0.15);
  border-radius: 12px;
  padding: 10px 12px;
  box-sizing: border-box;
  color: #0b1b22;
  font: inherit;
}

/* Prevent iOS auto-zoom on Google Places input */
@media (max-width: 900px) {
  gmp-place-autocomplete,
  gmp-place-autocomplete * {
    font-size: 16px !important;
  }
}


/* Mobile floating search bar (always visible) */
.mobile-search{
  display:none;
}

@media (max-width: 900px){
  .mobile-search{
    display:block;
    position: fixed;
    left: 12px;
    right: 12px;
    top: 86px; /* below the floating header */
    z-index: 940;
    pointer-events: auto;
  }
  .mobile-search input{
    width: 100%;
    padding: 12px 12px;
    border-radius: 14px;
    border: 1px solid rgba(14,26,34,0.12);
    background: rgba(255,255,255,0.94);
    backdrop-filter: blur(10px);
    box-shadow: 0 12px 30px rgba(0,0,0,0.14);
  }
}



/* --- Mobile UX refinements (v2) --- */
@media (max-width: 900px){
  /* Remove clutter from filter sheet */
  .desktop-search-row{ display:none !important; }
  .map-page .panel > h1, .map-page .panel > .hint{ display:none !important; }

  /* Floating search below topbar */
  .mobile-search{
    top: 86px; /* below the floating header */
  }

  /* Prevent the brand title wrapping and keep topbar compact */
  .title{
    white-space: nowrap;
    font-size: clamp(18px, 4.8vw, 24px);
    line-height: 1;
  }
}


/* Welcome overlay */
.welcome-modal{
  position: fixed;
  inset: 0;
  z-index: 1300;
  display: grid;
  place-items: center;
  padding: 18px;
  background: rgba(0,0,0,0.45);
}
.welcome-card{
  width: min(560px, 100%);
  max-height: calc(100vh - 40px);
  overflow: auto;
  background: rgba(255,255,255,0.96);
  border-radius: 18px;
  border: 1px solid rgba(14,26,34,0.10);
  box-shadow: 0 18px 50px rgba(0,0,0,0.35);
  padding: 18px 18px 16px;
}
.welcome-card h2{
  margin: 2px 0 6px;
  font-size: 22px;
}
.welcome-lede{
  margin: 0 0 14px;
  color: var(--muted);
  font-size: 14px;
}
.welcome-section{
  margin-top: 14px;
  padding-top: 12px;
  border-top: 1px solid rgba(0,0,0,0.08);
}
.welcome-section h3{
  margin: 0 0 8px;
  font-size: 13px;
  color: rgba(14,26,34,0.70);
  text-transform: uppercase;
  letter-spacing: 0.06em;
}

/* Make 'How to use the map' copy match 'How the colours work' */
.welcome-section ul {
  margin: 0;
  padding-left: 16px; /* keeps bullets tidy */
}

.welcome-section li {
  font-size: 12px;          /* matches welcome-key text */
  line-height: 1.4;
  color: rgba(14,26,34,0.85);
  margin-bottom: 6px;
}

.welcome-key{
  display: grid;
  gap: 8px;
}
.welcome-key-row{
  display:flex;
  gap: 10px;
  align-items:flex-start;
  font-size: 14px;
}
.welcome-key-row strong{ font-weight: 800; }
.welcome-card ul{
  margin: 8px 0 0 18px;
  color: rgba(14,26,34,0.85);
}
.welcome-checkbox{
  display:flex;
  gap: 10px;
  align-items:center;
  margin-top: 14px;
  font-size: 13px;
  color: rgba(14,26,34,0.85);
}
.welcome-actions{
  margin-top: 14px;
  display:flex;
  gap: 10px;
  justify-content:flex-end;
  flex-wrap: wrap;
}
.welcome-primary{
  padding: 10px 12px;
  border-radius: 12px;
  border: none;
  background: #0b1b22;
  color: #fff;
  font-weight: 800;
  cursor: pointer;
}
.welcome-secondary{
  padding: 10px 12px;
  border-radius: 12px;
  border: 1px solid rgba(14,26,34,0.12);
  color: rgba(14,26,34,0.85);
  text-decoration: none;
  background: #fff;
  font-weight: 700;
}
.welcome-close{
  float:right;
  border:none;
  background: transparent;
  font-size: 22px;
  cursor: pointer;
  color: rgba(14,26,34,0.55);
}


/* Ensure hidden attribute always hides welcome overlay */
.welcome-modal[hidden]{
  display:none !important;
}


/* Ensure Leaflet popups sit above the floating topbar */
.leaflet-popup-pane{ z-index: 2005 !important; }
.leaflet-tooltip-pane{ z-index: 2004 !important; }
.leaflet-marker-pane{ z-index: 600 !important; }


/* Prevent iOS Safari from auto-zooming on input focus */
@media (max-width: 900px){
  input[type="search"], input, select, textarea { font-size: 16px; }
}


/* Generic page main spacing so content isn't pushed too far down on mobile */
.page-main{ padding: 96px 12px 24px; display:flex; justify-content:center; align-items:flex-start; }
@media (max-width: 900px){
  .page-main{ padding-top: 76px; }
}
/* ABOUT PAGE: let content flow normally on mobile */
@media (max-width: 900px) {
  body.about-page .panel {
    position: relative;
    top: auto;
    bottom: auto;
    left: auto;
    right: auto;

    width: auto;
    max-height: none;
    height: auto;
    transform: none;

    overflow: visible; /* key: prevents “scroll inside the box” */
  }

  body.about-page main {
    padding-top: 88px; /* enough to clear the fixed topbar */
    min-height: calc(100vh - 88px);
  }
}
/* ================================
   Tighter inline dropdowns in
   Leaflet edit popup
   ================================ */

/* Each edit row becomes label + control on one line */
.edit-block {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 8px;
}

/* Labels shrink and stop forcing vertical stacks */
.edit-block > label {
  flex: 0 0 auto;
  font-size: 12px;
  color: #475569;
  margin: 0;
  white-space: nowrap;
}

/* Make selects compact */
.edit-block select {
  flex: 1 1 auto;
  min-width: 0;
  height: 30px;
  padding: 4px 8px;
  font-size: 12px;
  border-radius: 8px;
  line-height: 1.2;
}

/* Baby changing block: reduce inner spacing */
.edit-block > div {
  gap: 6px !important;
}

/* Tighten helper labels like “Available / Access / Location” */
.edit-block div[style*="font-size:11px"] {
  font-size: 10px !important;
  margin-bottom: 2px;
}

/* Two-column rows inside baby changing stay compact */
.edit-block div[style*="grid-template-columns"] {
  gap: 6px !important;
}

/* Prevent selects from becoming overly tall on mobile */
@media (max-width: 900px) {
  .edit-block select {
    height: 28px;
    font-size: 12px;
  }
}

/* ================================
 /* Baby changing: header + 3 equal columns */

.edit-block.edit-baby{
  display: block;
  margin-bottom: 12px;
}

.edit-block.edit-baby > label{
  display: block;
  margin-bottom: 6px;
  font-size: 10px;
  font-weight: 600;
}

.edit-baby-grid{
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 8px;
  width: 100%;
}

.edit-baby-field{
  display: grid;
  gap: 4px;
}

.edit-baby-label{
  font-size: 10px;
  color: #64748b;
}

.edit-baby-grid select{
  width: 100%;
  min-width: 0;
  height: 30px;
  padding: 4px 4px;
  font-size: 10px;
}

/* Grey-out Access + Location when unavailable */
.bc-unavailable .edit-baby-field:nth-child(2),
.bc-unavailable .edit-baby-field:nth-child(3){
  opacity: 0.35;
  pointer-events: none;
}

.home-link {
  display: flex;
  align-items: center;
  gap: 10px;
  text-decoration: none;
  color: inherit;
}

.home-link:hover {
  opacity: 0.85;
}
/* Ensure brand text column is left-aligned (prevents the title looking centred) */
.brand > div {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
}

.brand .title {
  text-align: left;
}

.brand-text {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
}

.choice-row{
  display:flex;
  gap:10px;
}
.choice-row button{
  flex:1;
  padding:12px;
  border-radius:14px;
  border:1px solid rgba(0,0,0,0.15);
  background:#fff;
  font-weight:700;
}
.choice-row button.active{
  background:#9ad33c;
  border-color:#9ad33c;
}
/* Add Pub progressive disclosure */
.add-after-baby{
  display:none;
  width:100%;
  margin-top:10px;
}

/* When baby changing has been answered, reveal the rest */
body.baby-answered .add-after-baby{
  display:block;
}
.choice-row{
  display:flex;
  gap:10px;
  flex-wrap:wrap;
}

.choice-row button{
  flex:1;
  padding:12px;
  border-radius:14px;
  border:1px solid rgba(0,0,0,0.15);
  background:#fff;
  font-weight:700;
  cursor:pointer;
}

.choice-row button.active{
  background:#9ad33c;
  border-color:#9ad33c;
}

.choice-row-icons button{
  display:flex;
  align-items:center;
  justify-content:center;
  gap:8px;
  min-width:140px;
}

.choice-row-icons img{
  width:18px;
  height:18px;
  display:block;
  opacity:0.9;
}

.choice-row-icons span{
  font-weight:700;
}
/* Circular button groups (Huckleberry-style) */
.circle-row{
  display:flex;
  gap:12px;
  flex-wrap:wrap;
  align-items:center;
}

.circle-btn{
  width:56px;
  height:56px;
  border-radius:999px;
  border:1px solid rgba(0,0,0,0.15);
  background:#fff;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  font-weight:800;
  cursor:pointer;
  user-select:none;
}

/* Tri-state colouring */
.circle-btn.active[data-val="true"]{
  background: #32a707;
  border-color: #32a707;
  color: #fff;
}

.circle-btn.active[data-val="false"]{
  background: #c4100a;
  border-color: #c4100a;
  color: #fff;
}

.circle-btn.active[data-val="unknown"]{
  background: #9e9e9e;
  border-color: #9e9e9e;
  color: #fff;
}
/* Toilet choice buttons (mens/womens/unisex/disabled): active = green */
#addBabyLoc .circle-btn.active{
  background: #32a707;
  border-color: #32a707;
  color: #fff;
}


.circle-btn.icon-only img{
  width:22px;
  height:22px;
  display:block;
  opacity:0.95;
}

/* Default: normal icon colours */
.circle-btn.icon-only img{
  filter: none;
}

/* Selected: invert icon to white */
.circle-btn.active.icon-only img{
  filter: brightness(0) invert(1);
  opacity: 1;
}

/* Access icons (ground / stairs) */
.circle-btn.icon-access img{
  width:20px;
  height:20px;
  display:block;
  opacity:0.9;
}

/* Slight emphasis when selected */
.circle-btn.active.icon-access img{
  opacity:1;
}

/* Step visibility helpers */
.add-step{ display:none; }
body.baby-answered .add-step{ display:block; }

/* Access is conditional, we’ll toggle this class from JS */
body.hide-access #addAccessWrap{ display:none !important; }
/* Hide access until a toilet is chosen */
body.no-toilet-selected #addAccessWrap{
  display:none !important;
}

body.baby-answered #addToiletWrap,
body.baby-answered #addAccessWrap { display:none; }

body.baby-answered.baby-yes #addToiletWrap { display:block; }
body.baby-answered.baby-yes:not(.no-toilet-selected) #addAccessWrap { display:block; } /* may be hidden by hide-access */


/* ================================
   Add Pub: centred facility buttons
   ================================ */
.addpub-facilities{
  display: grid;
  gap: 14px;
  justify-items: center;
  margin-top: 6px;
}

.addpub-fac{
  display: grid;
  gap: 8px;
  justify-items: center;
  width: 100%;
}

.addpub-fac-label{
  font-size: 12px;
  color: #475569;
  text-align: center;
}

/* Yes/No icons (check/cross) used in popups + add pub */
.yn-icon{
  width: 16px;
  height: 16px;
  display: block;
}

.facility-symbol{
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 18px;
  height: 18px;
}

.facility-unk{
  font-weight: 800;
  font-size: 14px;
  line-height: 1;
  color: #666769;
}

/* Make the button groups feel more centred in the modal */
#addPubModal .circle-row{
  justify-content: center;
}

/* Slightly narrower/centred add pub card on desktop */
@media (min-width: 901px){
  #addPubModal > div{
    max-width: 520px;
  }
}
/* ================================
   Yes / No / Unknown colouring
   (popup + add pub)
   ================================ */

/* centre the symbol */
.facility-symbol.center{
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

/* icon sizing already defined via .yn-icon */

/* YES */
.facility-row.yes .facility-symbol{
  background: rgba(50, 167, 7, 0.12);
  border-radius: 999px;
}

/* NO */
.facility-row.no .facility-symbol{
  background: rgba(196, 16, 10, 0.12);
  border-radius: 999px;
}

/* UNKNOWN */
.facility-row.unknown .facility-symbol{
  background: rgba(120, 120, 120, 0.12);
  border-radius: 999px;
}
/* Centre Baby changing availability group to match other button groups */
#addPubModal #addBabyAvail {
  justify-content: center;
  width: 100%;
}
/* Any steps (stored as stairs/ground): active colour */
#addBabyAccess .circle-btn.active[data-val="ground"]{
  background: #9e9e9e;
  border-color: #9e9e9e;
  color: #fff;
}

#addBabyAccess .circle-btn.active[data-val="stairs"]{
  background: #9e9e9e;
  border-color: #9e9e9e;
  color: #fff;
}
/* Center Baby changing availability buttons like other facilities */
#addPubModal #addBabyAvail {
  justify-content: center;
}

/* Remove the left-pull caused by the label wrapper */
#addPubModal #addBabyAvail {
  margin-left: auto;
  margin-right: auto;
}
/* Keep the Baby changing "Available" field in the left column,
   but center the YES/NO buttons within that field */
   #addPubModal #addBabyAvail {
    width: 100%;
    display: flex;            /* overrides .circle-row's wrap behaviour cleanly */
    justify-content: center;  /* centers the buttons */
  }
  
  /* Make the Available label’s container span the row so centering has room */
  #addPubModal #addBabyAvailValue,
  #addPubModal #addBabyAvail {
    justify-self: stretch;
  }
/* ================================
   Add Pub modal: row layout (mock-up)
   ================================ */
   .addpub-section{
    border-top: 1px solid rgba(0,0,0,0.08);
    padding-top: 10px;
    margin-top: 10px;
  }
  
  .addpub-section-title{
    font-weight: 700;
    font-size: 13px;
    margin-bottom: 10px;
  }
  
  .addpub-required{
    color: #b91c1c;
    font-weight: 800;
  }
  
  .addpub-list{
    display: grid;
    gap: 14px;
  }
  
  .addpub-row{
    display: grid;
    grid-template-columns: 1fr auto;
    align-items: center;
    gap: 12px;
  }
  
  .addpub-left{
    display: flex;
    align-items: center;
    gap: 10px;
    min-width: 0;
  }
  
  .addpub-icon{
    width: 22px;
    height: 22px;
    display: block;
    opacity: 0.9;
  }
  
  .addpub-text{
    display: grid;
    gap: 2px;
    min-width: 0;
  }
  
  .addpub-label{
    font-size: 14px;
    font-weight: 700;
    color: #0E1A22;
    line-height: 1.2;
  }
  
  .addpub-right{
    justify-self: end;
  }
  
  /* Make the button groups sit nicely on the right */
  #addPubModal .circle-row{
    justify-content: flex-end;
  }
  
  /* Subtitles for the progressive baby steps */
  .addpub-subtitle{
    font-weight: 700;
    font-size: 13px;
    margin: 10px 0 8px;
  }
  
  /* Mobile: give the right column a bit less squeeze */
  @media (max-width: 520px){
    .addpub-row{
      grid-template-columns: 1fr;
      gap: 8px;
    }
    .addpub-right{
      justify-self: start;
    }
    #addPubModal .circle-row{
      justify-content: flex-start;
    }
  }
  /* Spacer so sub-steps align with the icon column */
.addpub-icon-spacer{
  width: 22px;
  height: 22px;
  display: block;
}

/* Optional: slightly tighter spacing for sub-steps */
.addpub-row--substep{
  margin-top: 6px;
}
.addpub-select{
  padding: 10px;
  border: 1px solid rgba(0,0,0,0.15);
  border-radius: 10px;
  background: #fff;
  min-width: 160px;
}
.addpub-actions{
  display:flex;
  gap:10px;
  justify-content:center;
  flex-wrap:wrap;
  margin-top: 10px;
}

/* 3-up actions row in Add Pub modal */
.addpub-actions--3{
  align-items: center;
}

/* Make Manage this pub look like a recessive link/button */
#managePubBtn{
  border: none;
  background: transparent;
  padding: 0;
  margin: 0;
  cursor: pointer;

  font-weight: 700;
  font-size: 12px;
  color: rgba(14,26,34,0.55);
  text-decoration: underline;
  text-underline-offset: 3px;
}

/* Hover/focus states */
#managePubBtn:hover{
  color: rgba(14,26,34,0.75);
}
#managePubBtn:focus{
  outline: none;
}
#managePubBtn:focus-visible{
  outline: 2px solid rgba(14,26,34,0.25);
  outline-offset: 4px;
  border-radius: 8px;
}

#addPubModal .circle-row{ justify-content: flex-end; }
/* =========================
   Add Pub: mobile tightening
   ========================= */
   @media (max-width: 520px){

    /* Keep label + buttons on one line (2 columns) */
    .addpub-row{
      grid-template-columns: 1fr auto;
      align-items: center;
      gap: 10px;
    }
  
    /* Stop the buttons wrapping to a second line */
    #addPubModal .circle-row{
      flex-wrap: nowrap;
      gap: 10px;
    }
  
    /* Make the circles smaller on mobile */
    #addPubModal .circle-btn{
      width: 54px;
      height: 54px;
      border-radius: 999px;
    }
  
    /* If your icons inside the circles are large, tighten them too */
    #addPubModal .circle-btn img{
      width: 18px;
      height: 18px;
    }
  
    /* Slightly reduce icon/label footprint */
    .addpub-icon{
      width: 20px;
      height: 20px;
    }
    .addpub-label{
      font-size: 13px;
    }
  
    /* Dropdown row: keep it compact */
    .addpub-select{
      min-width: 140px;
      padding: 9px;
    }
  }
  /* Underlined text-style select (Kids allowed until) */
.addpub-select--underline{
  border: none;
  border-radius: 0;
  background: transparent;
  padding: 0;
  min-width: 0;
  width: auto;

  font-weight: 700;
  font-size: 14px;
  color: #0E1A22;

  text-decoration: underline;
  text-underline-offset: 4px;

  cursor: pointer;

  /* remove default focus outline weirdness but keep accessibility */
  outline: none;
}

.addpub-select--underline:focus{
  outline: 2px solid rgba(0,0,0,0.18);
  outline-offset: 4px;
  border-radius: 6px;
}

/* Hide the default select arrow in most browsers (keeps native dropdown behaviour) */
.addpub-select--underline{
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
}

/* If you want a subtle chevron, uncomment:
.addpub-select--underline{
  padding-right: 16px;
  background-image: url("icons/chevron-down.svg");
  background-repeat: no-repeat;
  background-position: right center;
  background-size: 12px 12px;
}
*/
.addpub-right{ justify-self: end; }
/* iOS-safe underline affordance (Start-time style) */
.underline-field{
  display: inline-flex;
  align-items: center;
  gap: 8px;

  border-bottom: 2px solid rgba(14,26,34,0.35);
  padding-bottom: 4px;
}

.underline-select{
  border: none;
  background: transparent;
  padding: 0;
  margin: 0;

  font-weight: 700;
  font-size: 16px;
  color: #0E1A22;

  width: auto;
  min-width: 0;

  cursor: pointer;

  /* remove default select styling */
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
}

.underline-select:focus{
  outline: none;
}

.underline-field:focus-within{
  border-bottom-color: rgba(14,26,34,0.75);
}

.underline-caret{
  font-size: 14px;
  line-height: 1;
  color: rgba(14,26,34,0.75);
}
@media (max-width: 520px){
  .underline-select{ font-size: 14px; }
  .underline-field{ padding-bottom: 3px; }
}

.popup-suggest-btn{
  background:#fff;
  color: rgba(14,26,34,0.65);
  border: 1px solid rgba(14,26,34,0.25);
  padding: 8px 10px;
  border-radius: 10px;
  font-size: 12px;
  cursor: pointer;
  font-weight: 800;
}

.popup-suggest-btn:hover{
  border-color: rgba(14,26,34,0.45);
  color: rgba(14,26,34,0.8);
}

.popup-suggest-btn:focus-visible{
  outline: 2px solid rgba(14,26,34,0.25);
  outline-offset: 3px;
}
/* Popup "Manage this pub?" link */
.popup-manage-link{
  display: inline-flex;
  align-items: center;

  font-weight: 700;
  font-size: 12px;
  color: rgba(14,26,34,0.55);

  text-decoration: underline;
  text-underline-offset: 3px;

  padding: 8px 2px; /* aligns vertically with popup buttons */
}

.popup-manage-link:hover{
  color: rgba(14,26,34,0.75);
}
.popup-manage-link:focus-visible{
  outline: 2px solid rgba(14,26,34,0.25);
  outline-offset: 3px;
  border-radius: 8px;
}
.popup-title-link{
  color: inherit;
  text-decoration: underline;
  text-underline-offset: 3px;
}
.popup-title-link:hover{
  opacity: 0.85;
}
/* ================================
   Mobile: full-screen Add/Suggest modal
   ================================ */
   @media (max-width: 900px){
    /* Overlay itself: no padding so it truly fills screen */
    #addPubModal{
      padding: 0 !important;
      align-items: stretch !important;
      justify-content: stretch !important;
    }
  
    /* The inner white card becomes a full-screen panel */
    #addPubModal > div{
      width: 100% !important;
      height: 100% !important;
      max-height: none !important;
  
      border-radius: 0 !important;
      box-shadow: none !important;
  
      /* feels app-like */
      padding: 16px !important;
  
      /* ensure content scrolls within the panel */
      overflow-y: auto !important;
      -webkit-overflow-scrolling: touch;
    }
  }
  /* ================================
   Mobile: full-screen Leaflet popup (Edit mode)
   ================================ */

body.ui-busy{
  overflow: hidden;
}