/* Nearby events widget — extracted from website/index.php. Homepage layout
   around #nearby-widget stays in index.php. */

.events-widget{
  margin-top:0;
  width:100%;
  max-width:none;
}

.events-widget .card{padding:22px}

.widget-stack{
  display:grid;
  gap:14px;
}

.widget-controls{
  display:grid;
  gap:12px;
}

.widget-controls .row{
  display:flex;
  gap:10px;
  flex-wrap:wrap;
  align-items:center;
}

.widget-input{
  width:100%;
  padding:12px 16px;
  border-radius:12px;
  border:1px solid rgba(15,23,42,.10);
  background:#fff;
  font:inherit;
  color:var(--ink);
}

.widget-input:focus{
  outline:none;
  border-color:var(--btnGradB);
  box-shadow:0 0 0 3px rgba(94,110,132,.22);
}

.widget-search-wrap{
  position:relative;
  width:100%;
}

.widget-search-wrap .widget-input{
  padding-right:48px;
}

.widget-search-clear{
  position:absolute;
  right:6px;
  top:50%;
  transform:translateY(-50%);
  width:36px;
  height:36px;
  margin:0;
  padding:0;
  border:0;
  border-radius:10px;
  background:transparent;
  color:var(--muted);
  cursor:pointer;
  font-size:22px;
  line-height:1;
  display:flex;
  align-items:center;
  justify-content:center;
  -webkit-appearance:none;
  appearance:none;
}

.widget-search-clear:hover{
  background:rgba(15,23,42,.08);
  color:var(--ink);
}

.widget-search-clear:focus-visible{
  outline:2px solid var(--btnGradB);
  outline-offset:2px;
}

.widget-search-clear[hidden]{
  display:none !important;
}

.widget-map-wrap{
  position:relative;
  width:100%;
  border-radius:16px;
  overflow:hidden;
  border:1px solid rgba(15,23,42,.08);
  background:rgba(15,23,42,.03);
}

.widget-map{
  width:100%;
  height:min(52vh, 520px);
  min-height:360px;
  border-radius:0;
  overflow:hidden;
  border:0;
  background:transparent;
}

.widget-map-loader{
  position:absolute;
  inset:0;
  z-index:4;
  display:flex;
  align-items:center;
  justify-content:center;
  padding:16px;
  background:rgba(15,23,42,.48);
  backdrop-filter:blur(5px);
  -webkit-backdrop-filter:blur(5px);
}

.widget-map-loader[hidden]{
  display:none !important;
}

.widget-map-loader-panel{
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:12px;
  padding:18px 22px;
  border-radius:14px;
  background:rgba(255,255,255,.95);
  color:#0f172a;
  font-weight:800;
  font-size:15px;
  letter-spacing:.02em;
  box-shadow:0 12px 40px rgba(0,0,0,.22);
  text-align:center;
}

.widget-map-loader-spinner{
  width:38px;
  height:38px;
  border-radius:50%;
  border:3px solid rgba(94,110,132,.22);
  border-top-color:#414F63;
  animation:events-widget-spin .8s linear infinite;
}

@keyframes events-widget-spin{
  to{transform:rotate(360deg)}
}

@media (prefers-reduced-motion: reduce){
  .widget-map-loader-spinner{
    animation:none;
    border-color:rgba(94,110,132,.45);
    opacity:.85;
  }
}

/* Prev/next over map — same control styling as .carousel .ctrl */
.widget-map-event-nav{
  position:absolute;
  inset:0;
  z-index:3;
  display:flex;
  justify-content:space-between;
  align-items:center;
  pointer-events:none;
}

.widget-map-event-nav[hidden]{
  display:none !important;
}

.widget-map-event-nav button{
  pointer-events:auto;
  background:rgba(255,255,255,.92);
  border:0;
  border-radius:50%;
  width:56px;
  height:56px;
  display:grid;
  place-items:center;
  box-shadow:var(--shadow);
  font-size:28px;
  line-height:0;
  padding:0 0 3px;
  cursor:pointer;
  color:#0f172a;
}

.widget-map-event-nav button:disabled{
  opacity:.35;
  cursor:not-allowed;
}

@media (prefers-color-scheme: dark){
  .widget-map-event-nav button{
    background:rgba(30,41,59,.88);
    color:#f8fafc;
    box-shadow:0 8px 28px rgba(0,0,0,.4);
  }
}

/* My location — same control as event_public_submit.php.
   Map pane often uses color-scheme: dark; force light chrome so we match Google’s default controls. */
.g2g-locate-control{
  margin:0 10px 12px 0;
  color-scheme:light;
}

.g2g-locate-btn{
  color-scheme:light;
  -webkit-appearance:none;
  appearance:none;
  background:#fff;
  border:1px solid #dadce0;
  border-radius:50%;
  width:40px;
  height:40px;
  display:flex;
  align-items:center;
  justify-content:center;
  box-shadow:0 1px 2px rgba(0,0,0,.2);
  cursor:pointer;
}

.g2g-locate-btn:hover{
  background:#f8f9fa;
}

.g2g-locate-btn:disabled{
  opacity:.6;
  cursor:not-allowed;
}

.g2g-locate-svg{
  width:20px;
  height:20px;
  fill:#1a73e8;
}

.widget-status{
  min-height:22px;
  color:var(--muted);
  font-size:14px;
  margin-top:12px;
}

.widget-empty{
  padding:16px;
  border-radius:16px;
  border:1px dashed rgba(15,23,42,.14);
  color:var(--muted);
  margin-top:8px;
}

.widget-note{
  font-size:13px;
  color:var(--muted);
  margin:0;
}

.widget-badge{
  display:inline-flex;
  align-items:center;
  gap:8px;
  padding:8px 10px;
  border-radius:999px;
  background:rgba(15,23,42,.05);
  font-size:13px;
  color:var(--muted);
}

/* Marker InfoWindow content (injected into map pane; not shadow DOM) */
.events-widget-iw{
  box-sizing:border-box;
  width:260px;
  max-width:85vw;
  font-family:system-ui,sans-serif;
  font-size:14px;
  line-height:1.38;
  color:#0f172a;
}

.events-widget-iw-thumb{
  margin:0 0 10px;
  border-radius:10px;
  overflow:hidden;
  background:#e2e8f0;
  line-height:0;
}

.events-widget-iw-img{
  display:block;
  width:100%;
  height:96px;
  object-fit:cover;
}

.events-widget-iw-title{
  font-weight:700;
  margin-bottom:6px;
  color:#0f172a;
}

.events-widget-iw-meta{
  color:#64748b;
  font-size:12px;
  margin-bottom:4px;
}

.events-widget-iw-link{
  display:inline-block;
  margin-top:2px;
  font-weight:600;
  color:#1e3a5f;
}

@media (prefers-color-scheme: dark){
  .widget-input{
    background:rgba(255,255,255,.06);
    color:var(--ink);
    border-color:rgba(255,255,255,.10);
  }

  .widget-search-clear:hover{
    background:rgba(255,255,255,.10);
    color:var(--ink);
  }

  .widget-map-wrap{
    border-color:rgba(255,255,255,.10);
    background:rgba(255,255,255,.04);
  }

  .widget-map-loader{
    background:rgba(8,12,22,.55);
  }

  .widget-map-loader-panel{
    background:rgba(18,26,45,.92);
    color:#f8fafc;
    box-shadow:0 12px 40px rgba(0,0,0,.45);
  }

  .widget-map-loader-spinner{
    border-color:rgba(255,255,255,.18);
    border-top-color:#94a3b8;
  }

  .widget-empty{
    border-color:rgba(255,255,255,.12);
  }

  .widget-badge{
    background:rgba(255,255,255,.06);
  }
}

@media (max-width: 720px){
  .events-widget{
    margin-top:0;
  }
  .events-widget .card{
    padding:14px;
  }
  .events-widget .widget-stack,
  .events-widget .widget-controls{
    gap:10px;
  }
  .events-widget .widget-map-wrap{
    border-radius:12px;
  }
  .events-widget .widget-map{
    min-height:240px;
    height:min(42vh, 380px);
  }
  .events-widget .widget-status{
    margin-top:8px;
  }
  .events-widget .widget-controls .row{
    gap:8px;
  }

  .widget-map-event-nav button{
    width:48px;
    height:48px;
    font-size:24px;
  }

  /* Taller popup: more image + text visible before internal scroll */
  .events-widget-iw{
    width:min(304px, 92vw);
    max-width:92vw;
    font-size:15px;
  }

  .events-widget-iw-img{
    height:min(120px, 22vh);
    min-height:88px;
  }

  .events-widget-iw-meta{
    font-size:13px;
    line-height:1.45;
  }

  .events-widget .gm-style-iw-c,
  #nearby-widget .gm-style-iw-c{
    max-height:min(82vh, 620px) !important;
  }

  .events-widget .gm-style-iw-d,
  #nearby-widget .gm-style-iw-d{
    max-height:min(78vh, 580px) !important;
  }
}