:root{
  --ssj-text:#23272a;
  --ssj-muted:#6f777c;
  --ssj-border:#d9dee2;
  --ssj-panel:#ffffff;
  --ssj-shadow:0 10px 28px rgba(28,35,39,.12);
  --ssj-cluster:#dceff3;
  --ssj-cluster-border:#8fb9c3;
  --ssj-cluster-text:#2f4f57;
  --ssj-landslide:#e58b33;
  --ssj-landslide-soft:#fff3e7;
  --ssj-tsunami:#69b9d4;
  --ssj-tsunami-soft:#edf8fc;
  --ssj-evacuation:#2f8f68;
  --ssj-evacuation-soft:#edf8f3;
}

#safeStayControls{
  font-family:Arial,sans-serif;
  margin-bottom:12px;
}

.search-row{
  display:flex;
  gap:10px;
  align-items:center;
  margin-bottom:12px;
}

#destinationSearch{
  flex:1;
  min-width:240px;
  height:50px;
  padding:0 16px;
  border:1px solid var(--ssj-border);
  border-radius:12px;
  background:#fff;
  color:var(--ssj-text);
  font-size:16px;
  box-sizing:border-box;
  outline:none;
}

#destinationSearch:focus{
  border-color:#9fb7c0;
  box-shadow:0 0 0 3px rgba(117,157,171,.14);
}

#destinationSearchButton{
  height:50px;
  padding:0 22px;
  border:1px solid #789da7;
  border-radius:12px;
  background:#6f98a3;
  color:#fff;
  font-size:15px;
  font-weight:700;
  cursor:pointer;
  box-shadow:0 4px 12px rgba(75,111,121,.14);
  transition:background .15s ease, transform .15s ease, box-shadow .15s ease;
}

#destinationSearchButton:hover{
  background:#628b96;
  box-shadow:0 5px 14px rgba(75,111,121,.20);
}

#destinationSearchButton:active{
  transform:translateY(1px);
  background:#587f89;
}

.explore-strip{
  display:flex;
  align-items:center;
  gap:10px;
  flex-wrap:wrap;
  margin-bottom:12px;
}

.explore-title{
  font-size:13px;
  font-weight:700;
  color:var(--ssj-muted);
  margin-right:2px;
}

.category-chip{
  border:1px solid var(--ssj-border);
  background:#fff;
  color:#475056;
  border-radius:999px;
  padding:9px 13px;
  font-size:13px;
  font-weight:700;
  cursor:pointer;
  transition:.15s ease;
}

.category-chip:hover{
  background:#f5f7f8;
}

.category-chip.is-active{
  background:#edf3f5;
  border-color:#a9bcc4;
  color:#26373d;
}

#destinationPanel{
  display:none;
  margin-bottom:12px;
  padding:10px;
  background:#fff;
  border:1px solid var(--ssj-border);
  border-radius:12px;
  box-shadow:0 8px 24px rgba(30,38,43,.08);
}

#destinationPanel.is-open{
  display:block;
}

#destinationPanelSearch{
  width:100%;
  height:42px;
  border:1px solid var(--ssj-border);
  border-radius:10px;
  padding:0 12px;
  box-sizing:border-box;
  margin-bottom:8px;
  font-size:14px;
}

#destinationList{
  max-height:280px;
  overflow:auto;
}

.destination-item{
  width:100%;
  border:0;
  background:#fff;
  text-align:left;
  padding:10px 11px;
  border-radius:9px;
  cursor:pointer;
  font-size:14px;
  color:var(--ssj-text);
}

.destination-item:hover{
  background:#f4f7f8;
}

.destination-empty{
  padding:16px 10px;
  color:var(--ssj-muted);
  font-size:13px;
}

#mapShell{
  position:relative;
  width:100%;
}

#map{
  width:100%;
  height:650px;
  border-radius:14px;
  overflow:hidden;
}

#hazardMapControls{
  position:absolute;
  z-index:20;
  top:14px;
  right:14px;
  display:flex;
  flex-direction:column;
  gap:8px;
  padding:8px;
  border:1px solid rgba(0,0,0,.08);
  border-radius:14px;
  background:rgba(255,255,255,.95);
  box-shadow:var(--ssj-shadow);
  backdrop-filter:blur(10px);
  -webkit-backdrop-filter:blur(10px);
}

.hazardToggle{
  appearance:none;
  -webkit-appearance:none;
  border:1px solid #d9dee2;
  border-radius:999px;
  background:#fff;
  min-width:148px;
  min-height:42px;
  padding:6px 9px 6px 12px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  cursor:pointer;
  color:#4f575c;
  font:700 12px/1 Arial,sans-serif;
}

.hazardToggleLabel{
  display:flex;
  align-items:center;
  gap:8px;
  white-space:nowrap;
}

.hazardToggleIcon{
  display:block;
  width:20px;
  height:20px;
  flex:0 0 20px;
  object-fit:contain;
}

.hazardDot{
  width:10px;
  height:10px;
  border-radius:50%;
  background:#c9ced1;
  flex:0 0 auto;
}

.toggleTrack{
  width:38px;
  height:22px;
  border-radius:999px;
  position:relative;
  flex:0 0 auto;
  background:#d9dddf;
  transition:.18s ease;
}

.toggleKnob{
  position:absolute;
  width:18px;
  height:18px;
  top:2px;
  left:2px;
  border-radius:50%;
  background:#fff;
  box-shadow:0 1px 3px rgba(0,0,0,.28);
  transition:transform .18s ease;
}

.hazardToggle.is-on .toggleKnob{
  transform:translateX(16px);
}

#landslideToggle.is-on{
  background:var(--ssj-landslide-soft);
  border-color:#e1a15f;
  color:#8a4d17;
}
#landslideToggle .hazardDot{
  background:#d6dadd;
}
#landslideToggle.is-on .hazardDot,
#landslideToggle.is-on .toggleTrack{
  background:var(--ssj-landslide);
}

#tsunamiToggle.is-on{
  background:var(--ssj-tsunami-soft);
  border-color:#8ac8dc;
  color:#2d7187;
}
#tsunamiToggle .hazardDot{
  background:#d6dadd;
}
#tsunamiToggle.is-on .hazardDot,
#tsunamiToggle.is-on .toggleTrack{
  background:var(--ssj-tsunami);
}

#evacuationToggle.is-on{
  background:var(--ssj-evacuation-soft);
  border-color:#74b99a;
  color:#216b4d;
}
#evacuationToggle .hazardDot{
  background:#d6dadd;
}
#evacuationToggle.is-on .hazardDot,
#evacuationToggle.is-on .toggleTrack{
  background:var(--ssj-evacuation);
}

#mapMessage{
  position:absolute;
  z-index:19;
  left:50%;
  bottom:18px;
  transform:translateX(-50%);
  max-width:calc(100% - 36px);
  display:none;
  padding:9px 13px;
  border-radius:999px;
  background:rgba(111,152,163,.96);
  color:#fff;
  border:1px solid rgba(255,255,255,.42);
  font-size:12px;
  font-weight:700;
  line-height:1.2;
  white-space:nowrap;
  box-shadow:0 4px 14px rgba(65,98,107,.22);
  pointer-events:none;
}

#mapMessage.is-visible{
  display:block;
}

@media (max-width:700px){
  .search-row{
    flex-direction:column;
    align-items:stretch;
  }
  #destinationSearchButton{
    width:100%;
  }
  .explore-strip{
    gap:7px;
  }
  .category-chip{
    padding:8px 10px;
    font-size:12px;
  }
  #map{
    width:100%;
    height:55vh;
    min-height:380px;
    max-height:520px;
    border-radius:10px;
    overflow:hidden;
  }

  #mapShell{
    width:100%;
    height:auto;
    overflow:hidden;
  }
  #mapMessage{
    bottom:12px;
    max-width:calc(100% - 24px);
    padding:8px 12px;
    font-size:11px;
  }

  #hazardMapControls{
    top:10px;
    right:10px;
    left:auto;
    width:min(150px, calc(100dvw - 20px));
    max-width:calc(100dvw - 20px);
    box-sizing:border-box;
    padding:6px;
    gap:6px;
  }
  .hazardToggle{
    min-width:132px;
    min-height:40px;
    padding-left:10px;
    gap:8px;
  }
  .hazardToggleLabel{
    font-size:11px;
  }
}



/* ===== Compact mobile layer controls ===== */
#mobileLayersButton,
#mobileLayersBackdrop,
.mobileLayersHeader{
  display:none;
}

@media (max-width:700px){
  #mobileLayersButton{
    appearance:none;
    -webkit-appearance:none;
    position:absolute;
    z-index:24;
    right:10px;
    bottom:12px;
    height:38px;
    padding:0 11px;
    border:1px solid rgba(0,0,0,.10);
    border-radius:999px;
    background:rgba(255,255,255,.96);
    box-shadow:0 4px 14px rgba(35,56,63,.18);
    color:#455158;
    display:flex;
    align-items:center;
    gap:7px;
    font:800 11px/1 Arial,sans-serif;
    cursor:pointer;
    backdrop-filter:blur(8px);
    -webkit-backdrop-filter:blur(8px);
  }
  #mobileLayersButton .layersGlyph{
    font-size:17px;
    line-height:1;
  }
  #mobileLayersButton .layersBadge{
    min-width:17px;
    height:17px;
    padding:0 4px;
    border-radius:999px;
    display:none;
    align-items:center;
    justify-content:center;
    background:#2f8f68;
    color:#fff;
    font:800 10px/1 Arial,sans-serif;
    box-sizing:border-box;
  }
  #mobileLayersButton .layersBadge.is-visible{
    display:flex;
  }

  #mobileLayersBackdrop{
    position:absolute;
    z-index:26;
    inset:0;
    background:rgba(24,42,48,.12);
  }
  #mobileLayersBackdrop.is-open{
    display:block;
  }

  #hazardMapControls{
    display:none;
    top:auto;
    right:8px;
    bottom:8px;
    left:8px;
    width:auto;
    max-width:none;
    max-height:min(74vh, 390px);
    overflow:auto;
    box-sizing:border-box;
    padding:10px;
    gap:6px;
    border-radius:18px;
    z-index:28;
  }
  #hazardMapControls.mobile-open{
    display:flex;
  }

  .mobileLayersHeader{
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:10px;
    padding:1px 2px 5px;
  }
  .mobileLayersTitle{
    color:#3f4a50;
    font:800 12px/1.2 Arial,sans-serif;
  }
  #mobileLayersClose{
    appearance:none;
    -webkit-appearance:none;
    border:0;
    background:transparent;
    color:#58646a;
    width:30px;
    height:30px;
    border-radius:50%;
    display:grid;
    place-items:center;
    font-size:21px;
    line-height:1;
    cursor:pointer;
  }

  .hazardToggle{
    width:100%;
    min-width:0;
    min-height:34px;
    padding:4px 7px 4px 10px;
    border-radius:11px;
    gap:8px;
  }
  .hazardToggleLabel{
    font-size:11px;
  }
  .toggleTrack{
    width:32px;
    height:18px;
  }
  .toggleKnob{
    width:14px;
    height:14px;
    top:2px;
    left:2px;
  }
  .hazardToggle.is-on .toggleKnob{
    transform:translateX(14px);
  }
  .hazardLoadNote{
    margin-top:1px;
    font-size:9px;
  }
}

#searchAutocompleteBox{
  position:relative;
  flex:1;
}

#destinationSearch{
  width:100%;
}

#searchSuggestions{
  position:absolute;
  z-index:50;
  top:calc(100% + 6px);
  left:0;
  right:0;
  display:none;
  max-height:320px;
  overflow:auto;
  background:#fff;
  border:1px solid var(--ssj-border);
  border-radius:12px;
  box-shadow:0 12px 28px rgba(28,35,39,.16);
}

#searchSuggestions.is-open{
  display:block;
}

.searchSuggestionItem{
  width:100%;
  border:0;
  background:#fff;
  padding:11px 13px;
  text-align:left;
  cursor:pointer;
  display:flex;
  flex-direction:column;
  gap:3px;
}

.searchSuggestionItem:hover,
.searchSuggestionItem.is-active{
  background:#f4f7f8;
}

.searchSuggestionMain{
  font-size:14px;
  font-weight:700;
  color:var(--ssj-text);
}

.searchSuggestionSub{
  font-size:12px;
  color:var(--ssj-muted);
}

.searchSuggestionEmpty{
  padding:13px;
  font-size:13px;
  color:var(--ssj-muted);
}


.searchSuggestionSection{
  padding:8px 12px 5px;
  font-size:11px;
  font-weight:800;
  letter-spacing:.04em;
  text-transform:uppercase;
  color:#7c858a;
  background:#fafbfb;
  border-top:1px solid #eef1f2;
}

.searchSuggestionBadge{
  display:inline-flex;
  align-items:center;
  gap:5px;
  width:max-content;
  padding:3px 7px;
  border-radius:999px;
  font-size:10px;
  font-weight:800;
  margin-top:2px;
}

.searchSuggestionBadge.ssj{
  background:#eaf3f5;
  color:#355861;
}

.searchSuggestionBadge.google{
  background:#f2f3f4;
  color:#6d7478;
}

.searchSuggestionMeta{
  font-size:11px;
  color:#7b8489;
}


.category-row{
  overflow-x:auto;
  -webkit-overflow-scrolling:touch;
  scrollbar-width:none;
}
.category-row::-webkit-scrollbar{display:none;}
.category-chip{flex:0 0 auto;}

.destination-loading{
  display:flex;
  align-items:center;
  gap:10px;
  padding:22px 16px;
  color:#66747a;
  font-size:14px;
  font-weight:650;
}
.destination-loading-spinner{
  width:18px;
  height:18px;
  border:2px solid #dce6e9;
  border-top-color:#6f98a3;
  border-radius:50%;
  animation:ssjSpin .8s linear infinite;
}
@keyframes ssjSpin{to{transform:rotate(360deg);}}


/* ===== Hazard loading note ===== */
.hazardLoadNote{
  width:148px;
  box-sizing:border-box;
  padding:2px 5px 3px;
  font-size:10px;
  line-height:1.35;
  color:#758287;
  text-align:center;
}

@media (max-width:700px){
  .hazardLoadNote{
    width:132px;
    font-size:9px;
  }
}


/* ===== SafeStayJapan page heading / top spacing ===== */
.post_content{
  padding-top:0 !important;
}
.post_content > *:first-child{
  margin-top:0 !important;
}
.post_content > .wp-block-spacer:first-child{
  display:none !important;
  height:0 !important;
}
.post_content h1:first-of-type{
  margin-top:0 !important;
}
@media (max-width:700px){
  .post_content h1:first-of-type,
  .post_content .wp-block-heading:first-of-type{
    white-space:normal !important;
overflow-wrap:anywhere !important;
    font-size:clamp(17px,5.4vw,24px) !important;
    line-height:1.15 !important;
    letter-spacing:-0.02em !important;
    margin-top:0 !important;
    margin-bottom:18px !important;
  }
}


/* Prevent the WordPress page itself from shifting/overflowing on mobile.
   Map gestures are handled separately by Google Maps. */
html, body{
  width:100%;
  max-width:100%;
  overflow-x:hidden;
}

#safeStayControls,
#mapShell{
  max-width:100%;
  box-sizing:border-box;
}



/* Keep ordinary page scrolling, but do not advertise browser pinch zoom
   on the surrounding page. Google Maps gets its own explicit gesture area. */
@media (pointer:coarse){
  body{
    touch-action:pan-y;
    overscroll-behavior-x:none;
  }

  #map,
  #map *{
    touch-action:auto;
  }
}


/* === Mobile custom fullscreen map — stable viewport version === */
#mapFullscreenButton{
  position:absolute;
  z-index:30;
  right:14px;
  bottom:14px;
  width:44px;
  height:44px;
  border:1px solid rgba(0,0,0,.10);
  border-radius:12px;
  background:#ffffff;
  color:#355861;
  font-size:22px;
  font-weight:700;
  line-height:1;
  cursor:pointer;
  box-shadow:var(--ssj-shadow);
}

/* During fullscreen #mapShell is moved directly under body by JS.
   This avoids SWELL/WordPress transformed ancestors becoming the
   containing block for position:fixed. */
#mapShell.is-fullscreen-map{
  position:fixed !important;
  inset:0 !important;
  z-index:2147483000 !important;
  width:auto !important;
  max-width:none !important;
  height:100dvh !important;
  min-height:100dvh !important;
  margin:0 !important;
  padding:0 !important;
  overflow:hidden !important;
  border-radius:0 !important;
  background:#fff !important;
}

#mapShell.is-fullscreen-map #map{
  position:absolute !important;
  inset:0 !important;
  width:100% !important;
  height:100% !important;
  min-height:0 !important;
  max-height:none !important;
  border-radius:0 !important;
}

/* Fixed to the real phone viewport, with a hard right inset. */
#mapShell.is-fullscreen-map #hazardMapControls{
  position:fixed !important;
  z-index:2147483200 !important;
  top:max(12px, env(safe-area-inset-top, 0px)) !important;
  right:max(12px, env(safe-area-inset-right, 0px)) !important;
  left:auto !important;
  bottom:auto !important;
  transform:none !important;
  width:154px !important;
  max-width:calc(100vw - 24px) !important;
  margin:0 !important;
  padding:6px !important;
  box-sizing:border-box !important;
}

#mapShell.is-fullscreen-map #hazardMapControls .hazardToggle{
  width:100% !important;
  min-width:0 !important;
  max-width:100% !important;
  box-sizing:border-box !important;
}

#mapShell.is-fullscreen-map #hazardMapControls .hazardLoadNote{
  width:100% !important;
  max-width:100% !important;
  box-sizing:border-box !important;
  white-space:normal !important;
}

#mapShell.is-fullscreen-map #mapFullscreenButton{
  position:fixed !important;
  z-index:2147483200 !important;
  right:max(12px, env(safe-area-inset-right, 0px)) !important;
  bottom:max(18px, env(safe-area-inset-bottom, 0px)) !important;
}

html.ssj-map-fullscreen,
body.ssj-map-fullscreen{
  overflow:hidden !important;
  overscroll-behavior:none !important;
}

@media (min-width:701px){
  #mapFullscreenButton{display:none;}
}
@media (max-width:700px){

  .post_content{
    width:100% !important;
    max-width:100% !important;
    margin-left:auto !important;
    margin-right:auto !important;
    padding-left:16px !important;
    padding-right:16px !important;
    box-sizing:border-box !important;
    overflow-x:hidden !important;
  }

  #safeStayControls,
  #mapShell{
    width:100% !important;
    max-width:100% !important;
    margin-left:0 !important;
    margin-right:0 !important;
    box-sizing:border-box !important;
  }

}


/* Mobile: keep the Layers/menu button clear of Google Maps fullscreen control */
@media (max-width: 767px) {
  #mobileLayersButton,
  .mobile-layers-button,
  .layers-mobile-button,
  .map-layers-button,
  .layers-fab {
    right: 64px !important;
  }
}


/* ===== Mobile Layers button: avoid overlap with fullscreen / open panel ===== */
@media (max-width:700px){

  /* Normal mobile view: put Layers at bottom-left, fullscreen stays bottom-right */
  #mapShell:not(.is-fullscreen-map) #mobileLayersButton{
    left:12px !important;
    right:auto !important;
    bottom:12px !important;
  }

  /* Once the Layers sheet is open, the launcher is no longer needed */
  #mobileLayersButton[aria-expanded="true"]{
    display:none !important;
  }

  /* Fullscreen: keep the launcher clear of the fullscreen control */
  #mapShell.is-fullscreen-map #mobileLayersButton{
    left:auto !important;
    right:68px !important;
    bottom:max(18px, env(safe-area-inset-bottom, 0px)) !important;
  }
}


/* ===== Mobile layer launcher / panel collision fix ===== */
@media (max-width:700px){

  /* Closed state: Layers launcher at top-left of the map */
  #mapShell:not(.is-fullscreen-map) #mobileLayersButton{
    top:12px !important;
    left:12px !important;
    right:auto !important;
    bottom:auto !important;
  }

  /* The launcher is hidden while its sheet is open */
  #mobileLayersButton[aria-expanded="true"]{
    display:none !important;
  }

  /* Fullscreen mode keeps its existing dedicated positioning */
  #mapShell.is-fullscreen-map #mobileLayersButton{
    top:auto !important;
    left:auto !important;
    right:68px !important;
    bottom:max(18px, env(safe-area-inset-bottom, 0px)) !important;
  }
}


/* Mobile: raise the layer panel above the fullscreen button */
@media (max-width:700px){
  #mapShell:not(.is-fullscreen-map) #hazardMapControls.mobile-open{
    bottom:68px !important;
  }
}

/* =====================================================
   SAFESTAYJAPAN V3.0 — CLEAN UI LAYER
   Built on the original working map code.
===================================================== */

#mapShell{
  position:relative !important;
}

/* Disable the old mobile layer launcher. The actual controls are reused
   inside our V3 sidebar. */
#mobileLayersButton,
#mobileLayersBackdrop{
  display:none !important;
}

/* Always use our own fullscreen button on desktop and mobile. */
#mapFullscreenButton{
  display:grid !important;
  place-items:center !important;
}

/* ---------- V3 shared ---------- */
.ssjV3Sidebar,
.ssjV3HotelPanel,
.ssjV3Calendar,
.ssjV3MobileTools{
  font-family:Arial,sans-serif !important;
}

.ssjV3Brand{
  color:#6f98a3;
  font-size:10px;
  font-weight:800;
  letter-spacing:.04em;
}

.ssjV3Title{
  margin:5px 0 18px;
  color:#263238;
  font-size:20px;
  font-weight:800;
  line-height:1.2;
}

.ssjV3Card{
  margin:0 0 14px;
  padding:14px;
  border:1px solid #dfe5e7;
  border-radius:14px;
  background:#fbfcfc;
}

.ssjV3CardTitle{
  margin-bottom:11px;
  color:#344147;
  font-size:12px;
  font-weight:800;
  text-transform:uppercase;
  letter-spacing:.04em;
}

.ssjV3Field{
  display:block;
  margin-bottom:10px;
}

.ssjV3Field > span,
.ssjV3GuestCard > span{
  display:block;
  margin-bottom:5px;
  color:#66747a;
  font-size:11px;
  font-weight:700;
}

.ssjV3DateField{
  position:relative;
}

.ssjV3DateField input{
  width:100%;
  height:44px;
  padding:0 44px 0 10px;
  box-sizing:border-box;
  border:1px solid #d8e0e3;
  border-radius:11px;
  background:#fff;
  color:#263238;
  font:700 13px/1 Arial,sans-serif;
  cursor:pointer;
}

.ssjV3DateField button{
  position:absolute;
  top:6px;
  right:6px;
  width:32px;
  height:32px;
  border:0;
  border-radius:8px;
  background:transparent;
  color:#355861;
  font:800 14px/1 Arial,sans-serif;
  cursor:pointer;
}

.ssjV3Guests{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:10px;
  margin-top:2px;
}

.ssjV3GuestCard{
  padding:9px 10px 10px;
  border:1px solid #dfe5e7;
  border-radius:12px;
  background:#f7f9fa;
}

.ssjV3GuestCard select{
  width:100%;
  height:38px;
  padding:0 8px;
  border:0;
  border-radius:8px;
  background:#fff;
  box-shadow:0 0 0 1px #dce3e6 inset;
  color:#263238;
  font:700 13px/1 Arial,sans-serif;
}

.ssjV3SearchButton{
  width:100%;
  min-height:46px;
  margin-top:12px;
  border:0;
  border-radius:11px;
  background:#6f98a3;
  color:#fff;
  font:800 13px/1.2 Arial,sans-serif;
  cursor:pointer;
}

.ssjV3Hint{
  margin-top:8px;
  color:#8a9397;
  font-size:9px;
  line-height:1.4;
}

/* Existing hazard controls inside the V3 mount. */
#ssjV3LayerMount #hazardMapControls{
  position:static !important;
  inset:auto !important;
  display:flex !important;
  flex-direction:column !important;
  width:100% !important;
  max-width:none !important;
  margin:0 !important;
  padding:0 !important;
  gap:8px !important;
  border:0 !important;
  border-radius:0 !important;
  background:transparent !important;
  box-shadow:none !important;
  backdrop-filter:none !important;
  pointer-events:auto !important;
}

#ssjV3LayerMount #hazardMapControls .mobileLayersHeader{
  display:none !important;
}

#ssjV3LayerMount #hazardMapControls .hazardToggle{
  width:100% !important;
  min-width:0 !important;
  min-height:50px !important;
  margin:0 !important;
  padding:7px 9px !important;
  box-sizing:border-box !important;
  border-radius:13px !important;
  font-family:Arial,sans-serif !important;
}

#ssjV3LayerMount #hazardMapControls .hazardToggleLabel{
  gap:9px !important;
  font:800 13px/1.2 Arial,sans-serif !important;
}

#ssjV3LayerMount #hazardMapControls .hazardToggleIcon{
  width:24px !important;
  height:24px !important;
}

#ssjV3LayerMount #hazardMapControls .toggleTrack{
  flex:0 0 48px !important;
  width:48px !important;
  height:28px !important;
}

#ssjV3LayerMount #hazardMapControls .hazardLoadNote{
  width:100% !important;
  margin:0 !important;
  padding:2px 0 0 !important;
  text-align:center !important;
  font:400 10px/1.4 Arial,sans-serif !important;
}

/* ---------- Desktop left and right rails ---------- */
@media (min-width:701px){
  .ssjV3Sidebar{
    position:absolute;
    z-index:50;
    top:0;
    left:0;
    bottom:0;
    width:320px;
    background:#fff;
    border-right:1px solid #dfe5e7;
    box-shadow:8px 0 24px rgba(28,35,39,.12);
    transition:transform .20s ease;
  }

  .ssjV3Sidebar.is-collapsed{
    transform:translateX(-100%);
  }

  .ssjV3SidebarHandle{
    position:absolute;
    z-index:3;
    top:20px;
    right:-36px;
    width:36px;
    height:58px;
    border:1px solid #dfe5e7;
    border-left:0;
    border-radius:0 10px 10px 0;
    background:#fff;
    color:#355861;
    font:800 24px/1 Arial,sans-serif;
    box-shadow:4px 3px 10px rgba(28,35,39,.10);
    cursor:pointer;
  }

  .ssjV3SidebarScroll{
    height:100%;
    overflow:auto;
    padding:18px;
    box-sizing:border-box;
  }

  .ssjV3MobileClose,
  .ssjV3MobileTools,
  .ssjV3MobileBackdrop{
    display:none !important;
  }

  .ssjV3HotelPanel{
    position:absolute;
    z-index:52;
    top:0;
    right:0;
    bottom:0;
    width:390px;
    max-width:42%;
    display:none;
    overflow:hidden;
    background:#fff;
    border-left:1px solid #dfe5e7;
    box-shadow:-8px 0 24px rgba(28,35,39,.12);
  }

  .ssjV3HotelPanel.is-open{
    display:block;
  }

  .ssjV3HotelHero{
    height:150px;
  }

  .ssjV3HotelBody{
    height:calc(100% - 150px);
    overflow:auto;
  }

  #mapFullscreenButton{
    position:absolute !important;
    z-index:55 !important;
    right:18px !important;
    bottom:18px !important;
  }

  #mapShell.ssj-v3-hotel-open #mapFullscreenButton{
    right:408px !important;
  }

  #mapShell.is-fullscreen-map .ssjV3Sidebar,
  #mapShell.is-fullscreen-map .ssjV3HotelPanel{
    height:100% !important;
  }
}

/* ---------- Hotel panel ---------- */
.ssjV3HotelClose{
  position:absolute;
  z-index:4;
  top:10px;
  right:10px;
  width:34px;
  height:34px;
  display:grid;
  place-items:center;
  border:1px solid #dfe5e7;
  border-radius:50%;
  background:#fff;
  color:#455158;
  font:400 22px/1 Arial,sans-serif;
  box-shadow:0 3px 10px rgba(28,35,39,.12);
  cursor:pointer;
}

.ssjV3HotelHero{
  position:relative;
  isolation:isolate;
  overflow:hidden;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  gap:8px;
  background:linear-gradient(145deg,#e8f1f4,#f6f9fa);
  color:#67838c;
  font-size:12px;
  font-weight:700;
}

.ssjV3HotelHero::after{
  content:"";
  position:absolute;
  z-index:1;
  inset:0;
  pointer-events:none;
  background:linear-gradient(to top,rgba(18,28,34,.62),rgba(18,28,34,0) 62%);
  opacity:0;
  transition:opacity .25s ease;
}

.ssjV3HotelHeroImage{
  position:absolute;
  z-index:0;
  inset:0;
  width:100%;
  height:100%;
  display:block;
  object-fit:cover;
  opacity:0;
  transform:scale(1.015);
  transition:opacity .25s ease,transform .35s ease;
}

.ssjV3HotelHero.has-photo::after{
  opacity:1;
}

.ssjV3HotelHero.has-photo .ssjV3HotelHeroImage{
  opacity:1;
  transform:scale(1);
}

.ssjV3HotelHeroIcon,
.ssjV3HotelHeroLabel{
  position:relative;
  z-index:2;
}

.ssjV3HotelHero.has-photo .ssjV3HotelHeroIcon{
  display:none;
}

.ssjV3HotelHero.has-photo .ssjV3HotelHeroLabel{
  position:absolute;
  left:16px;
  bottom:12px;
  color:#fff;
  font-size:13px;
  text-shadow:0 1px 3px rgba(0,0,0,.5);
}

.ssjV3HotelHeroIcon{
  width:46px;
  height:46px;
  display:grid;
  place-items:center;
  border:1px solid #d8e5e8;
  border-radius:14px;
  background:#fff;
  font-size:23px;
}

.ssjV3HotelBody{
  padding:18px 20px 22px;
  box-sizing:border-box;
}

.ssjV3HotelName{
  margin:6px 38px 7px 0;
  color:#263238;
  font-size:22px;
  font-weight:800;
  line-height:1.2;
  overflow-wrap:anywhere;
}

.ssjV3HotelRating{
  min-height:19px;
  margin-bottom:5px;
  color:#48545a;
  font-size:13px;
  font-weight:700;
}

.ssjV3HotelRating .ssjV3Star{
  color:#d39a25;
}

.ssjV3HotelLocation{
  min-height:17px;
  margin-bottom:16px;
  color:#7a858a;
  font-size:12px;
}

.ssjV3SafetyCard{
  padding:14px;
  border:1px solid #e1e6e8;
  border-radius:14px;
  background:#fbfcfc;
}

.ssjV3SafetyHead{
  display:flex;
  justify-content:space-between;
  align-items:flex-start;
  gap:10px;
  margin-bottom:9px;
}

.ssjV3SafetyKicker{
  margin-bottom:3px;
  color:#6f98a3;
  font-size:9px;
  font-weight:800;
  letter-spacing:.09em;
}

.ssjV3SafetyTitle{
  color:#344147;
  font-size:14px;
  font-weight:800;
}

.ssjV3SafetySource{
  padding:4px 7px;
  border-radius:999px;
  background:#eaf3f5;
  color:#355861;
  font-size:8px;
  font-weight:800;
  white-space:nowrap;
}

.ssjV3SafetyRows{
  border-top:1px solid #e7ebed;
}

.ssjV3SafetyRow{
  display:grid;
  grid-template-columns:118px minmax(0,1fr);
  align-items:center;
  gap:10px;
  min-height:49px;
  border-bottom:1px solid #edf0f1;
}

.ssjV3SafetyRow:last-child{
  border-bottom:0;
}

.ssjV3SafetyLabel{
  display:flex;
  align-items:center;
  gap:8px;
  color:#5c686e;
  font-size:12px;
  font-weight:700;
}

.ssjV3SafetyLabel img{
  width:22px;
  height:22px;
}

.ssjV3ElevationIcon{
  width:22px;
  height:22px;
  display:grid;
  place-items:center;
  border-radius:7px;
  background:#edf3f5;
}

.ssjV3ElevationIcon svg{
  width:18px;
  height:18px;
  fill:none;
  stroke:#527781;
  stroke-width:1.8;
  stroke-linecap:round;
  stroke-linejoin:round;
}

.ssjV3SafetyValue{
  text-align:right;
  font-size:12px;
}

.ssjV3Risk{
  display:inline-flex;
  justify-content:center;
  max-width:100%;
  padding:5px 8px;
  border-radius:8px;
  font-size:11px;
  font-weight:800;
  line-height:1.2;
  text-align:center;
}

.ssjV3Safe{
  background:#e7f4ed;
  color:#28704f;
}

.ssjV3Caution{
  background:#fff1c7;
  color:#765a00;
}

.ssjV3Warning{
  background:#fff0e2;
  color:#9a5518;
}

.ssjV3Danger{
  background:#d93025;
  color:#fff;
}

.ssjV3Unknown{
  background:#eef1f2;
  color:#667277;
}

.ssjV3RiskSub{
  display:block;
  margin-top:4px;
  color:#7a858a;
  font-size:10px;
}

.ssjV3HotelNote{
  margin-top:12px;
  color:#7b858a;
  font-size:10px;
  line-height:1.45;
}

.ssjV3ViewHotel{
  display:block;
  margin-top:15px;
  padding:13px 14px;
  border-radius:11px;
  background:#6f98a3;
  color:#fff !important;
  text-align:center;
  text-decoration:none !important;
  font-size:13px;
  font-weight:800;
}

.ssjV3BookingFuture{
  margin-top:9px;
  padding:10px 11px;
  border:1px dashed #d9dee2;
  border-radius:10px;
  color:#8a9397;
  background:#fafbfb;
  font-size:10px;
  text-align:center;
}

/* ---------- Custom Gregorian calendar ---------- */
.ssjV3Calendar{
  position:absolute;
  z-index:100;
  width:300px;
  display:block;
  padding:12px;
  box-sizing:border-box;
  border:1px solid #d9dee2;
  border-radius:12px;
  background:#fff;
  box-shadow:0 16px 38px rgba(28,35,39,.22);
  opacity:0;
  visibility:hidden;
  pointer-events:none;
  transform:translateY(8px);
  transition:
    opacity .18s ease,
    transform .20s cubic-bezier(.22,.8,.32,1),
    visibility 0s linear .20s;
}

.ssjV3Calendar.is-open{
  opacity:1;
  visibility:visible;
  pointer-events:auto;
  transform:translateY(0);
  transition:
    opacity .18s ease,
    transform .20s cubic-bezier(.22,.8,.32,1),
    visibility 0s;
}

.ssjV3Calendar.is-closing{
  visibility:visible;
}

.ssjV3CalendarHead{
  display:grid;
  grid-template-columns:36px 1fr 36px;
  align-items:center;
  gap:6px;
  margin-bottom:10px;
}

.ssjV3CalendarHead button{
  width:36px;
  height:36px;
  border:0;
  border-radius:8px;
  background:#f3f6f7;
  color:#355861;
  font:800 22px/1 Arial,sans-serif;
  cursor:pointer;
}

#ssjV3CalendarTitle{
  text-align:center;
  font-size:14px;
  font-weight:800;
}

.ssjV3Weekdays,
.ssjV3CalendarGrid{
  display:grid;
  grid-template-columns:repeat(7,1fr);
  gap:4px;
}

.ssjV3Weekdays{
  margin-bottom:5px;
}

.ssjV3Weekdays span{
  text-align:center;
  color:#7a858a;
  font-size:10px;
  font-weight:800;
}

.ssjV3CalendarDay{
  height:34px;
  display:grid;
  place-items:center;
  border:0;
  border-radius:8px;
  background:#fff;
  color:#344147;
  font:700 12px/1 Arial,sans-serif;
  cursor:pointer;
}

.ssjV3CalendarDay.is-other{color:#b2b9bc;}
.ssjV3CalendarDay.is-disabled{color:#c8cdcf;background:#fafbfb;cursor:not-allowed;}
.ssjV3CalendarDay.is-in-range{
  border-radius:5px;
  background:#e4f0f3;
  color:#294a52;
}
.ssjV3CalendarDay.is-range-start,
.ssjV3CalendarDay.is-range-end,
.ssjV3CalendarDay.is-selected{
  position:relative;
  z-index:1;
  border-radius:50%;
  background:#6f98a3;
  color:#fff;
}
.ssjV3CalendarDay.is-today{box-shadow:inset 0 0 0 1px #8fb9c3;}

.ssjV3CalendarFooter{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:10px;
  margin-top:10px;
  padding-top:10px;
  border-top:1px solid #e7ebed;
}

.ssjV3CalendarRangeSummary{
  min-width:0;
  color:#617177;
  font:700 10px/1.35 Arial,sans-serif;
}

.ssjV3CalendarDone{
  flex:0 0 auto;
  min-width:64px;
  height:34px;
  padding:0 12px;
  border:0;
  border-radius:9px;
  background:#6f98a3;
  color:#fff;
  font:800 11px/1 Arial,sans-serif;
  cursor:pointer;
}

/* ---------- Mobile ---------- */
@media (max-width:700px){
  .ssjV3Sidebar{
    position:absolute;
    z-index:80;
    left:10px;
    right:10px;
    bottom:10px;
    display:block;
    max-height:calc(100dvh - 92px);
    overflow:hidden;
    border:1px solid #dfe5e7;
    border-radius:18px;
    background:#fff;
    box-shadow:0 16px 40px rgba(28,35,39,.24);
    transform:translateY(calc(100% + 32px));
    opacity:0;
    pointer-events:none;
    transition:transform .20s ease, opacity .16s ease;
  }

  .ssjV3Sidebar.is-mobile-open{
    transform:translateY(0);
    opacity:1;
    pointer-events:auto;
  }

  .ssjV3SidebarScroll{
    max-height:calc(100dvh - 92px);
    overflow:auto;
    padding:48px 14px 14px;
    box-sizing:border-box;
  }

  .ssjV3SidebarHandle{
    display:none;
  }

  .ssjV3MobileClose{
    position:absolute;
    z-index:4;
    top:10px;
    right:10px;
    width:34px;
    height:34px;
    display:grid;
    place-items:center;
    border:1px solid #dfe5e7;
    border-radius:50%;
    background:#fff;
    color:#455158;
    font:400 22px/1 Arial,sans-serif;
    box-shadow:0 3px 10px rgba(28,35,39,.12);
  }

  .ssjV3MobileBackdrop{
    position:absolute;
    z-index:78;
    inset:0;
    display:none;
    background:rgba(24,35,40,.14);
  }

  .ssjV3MobileBackdrop.is-open{
    display:block;
  }

  .ssjV3MobileTools{
    position:absolute;
    z-index:70;
    top:12px;
    left:12px;
    display:flex;
    gap:8px;
  }

  .ssjV3MobileTools button{
    min-width:72px;
    height:40px;
    padding:0 14px;
    border:1px solid rgba(0,0,0,.10);
    border-radius:999px;
    background:#fff;
    color:#344147;
    box-shadow:0 4px 14px rgba(35,56,63,.18);
    font:800 12px/1 Arial,sans-serif;
  }

  .ssjV3Sidebar.mode-stay #ssjV3LayersMode{
    display:none;
  }

  .ssjV3Sidebar.mode-layers #ssjV3StayMode{
    display:none;
  }

  .ssjV3Sidebar.mode-layers .ssjV3SidebarScroll{
    padding-top:48px;
  }

  .ssjV3Sidebar.mode-layers .ssjV3LayersCard{
    margin:0;
    padding:0;
    border:0;
    background:transparent;
  }

  .ssjV3Sidebar.mode-layers .ssjV3CardTitle{
    margin-bottom:10px;
    text-transform:none;
    letter-spacing:0;
    font-size:13px;
  }

  .ssjV3HotelPanel{
    position:absolute;
    z-index:90;
    left:8px;
    right:8px;
    bottom:8px;
    display:none;
    max-height:78dvh;
    overflow:hidden;
    border:1px solid #dfe5e7;
    border-radius:20px;
    background:#fff;
    box-shadow:0 16px 40px rgba(28,35,39,.24);
  }

  .ssjV3HotelPanel.is-open{
    display:block;
  }

  .ssjV3HotelHero{
    height:110px;
  }

  .ssjV3HotelBody{
    max-height:calc(78dvh - 110px);
    overflow:auto;
    padding:16px 16px 14px;
  }

  .ssjV3ViewHotel{
    position:sticky;
    bottom:0;
    z-index:3;
    box-shadow:0 -10px 18px rgba(255,255,255,.96),0 4px 12px rgba(75,111,121,.16);
  }

  .ssjV3Calendar{
    position:absolute;
    left:12px !important;
    right:12px !important;
    width:auto;
    max-width:none;
  }

  #mapFullscreenButton{
    right:14px !important;
    bottom:14px !important;
  }

  #mapShell.is-fullscreen-map .ssjV3MobileTools{
    top:max(12px, env(safe-area-inset-top, 0px));
  }
}

/* =====================================================
   SAFESTAYJAPAN V3.1 — STABILITY OVERRIDES
===================================================== */

/* The original stylesheet has fullscreen rules for hazardMapControls.
   These selectors are intentionally stronger so the controls ALWAYS
   stay inside the left V3 panel instead of jumping to the top-right. */
#mapShell #ssjV3LayerMount #hazardMapControls,
#mapShell.is-fullscreen-map #ssjV3LayerMount #hazardMapControls{
  position:static !important;
  inset:auto !important;
  top:auto !important;
  right:auto !important;
  bottom:auto !important;
  left:auto !important;
  transform:none !important;
  z-index:auto !important;
  display:flex !important;
  flex-direction:column !important;
  width:100% !important;
  max-width:none !important;
  margin:0 !important;
  padding:0 !important;
  gap:8px !important;
  border:0 !important;
  border-radius:0 !important;
  background:transparent !important;
  box-shadow:none !important;
  backdrop-filter:none !important;
}

/* ---------- DESKTOP ---------- */
@media (min-width:701px){

  #mapShell.is-fullscreen-map .ssjV3Sidebar{
    position:absolute !important;
    top:0 !important;
    left:0 !important;
    bottom:0 !important;
    width:320px !important;
    height:100% !important;
    z-index:2147483350 !important;
  }

  #mapShell.is-fullscreen-map .ssjV3HotelPanel{
    position:absolute !important;
    top:0 !important;
    right:0 !important;
    bottom:0 !important;
    width:390px !important;
    height:100% !important;
    max-height:none !important;
    z-index:2147483360 !important;
  }

  #mapShell.is-fullscreen-map .ssjV3HotelPanel.is-open{
    display:block !important;
  }

  #mapShell.is-fullscreen-map .ssjV3HotelBody{
    height:calc(100% - 150px) !important;
    max-height:none !important;
    overflow:auto !important;
  }

  #mapShell.is-fullscreen-map.ssj-v3-hotel-open #mapFullscreenButton{
    right:408px !important;
  }
}

/* ---------- MOBILE ---------- */
@media (max-width:700px){

  /* Keep sheet compact and fully interactive. */
  #mapShell .ssjV3Sidebar{
    height:auto !important;
    max-height:calc(100dvh - 92px) !important;
  }

  #mapShell .ssjV3Sidebar.is-mobile-open{
    pointer-events:auto !important;
  }

  #mapShell .ssjV3Sidebar .ssjV3SidebarScroll{
    height:auto !important;
    max-height:calc(100dvh - 92px) !important;
    overflow:auto !important;
  }

  /* Stay controls: deliberate compact cards. */
  #mapShell .ssjV3Sidebar.mode-stay .ssjV3Guests{
    display:grid !important;
    grid-template-columns:1fr 1fr !important;
    gap:10px !important;
  }

  #mapShell .ssjV3Sidebar.mode-stay .ssjV3GuestCard{
    min-width:0 !important;
    padding:9px 10px 10px !important;
  }

  #mapShell .ssjV3Sidebar.mode-stay .ssjV3GuestCard select{
    width:100% !important;
    min-width:0 !important;
    height:40px !important;
    font:700 13px/1 Arial,sans-serif !important;
  }

  /* Layers: force all three toggles into clean full-width rows. */
  #mapShell .ssjV3Sidebar.mode-layers{
    left:10px !important;
    right:10px !important;
    bottom:10px !important;
    height:auto !important;
    max-height:none !important;
  }

  #mapShell .ssjV3Sidebar.mode-layers .ssjV3SidebarScroll{
    height:auto !important;
    max-height:none !important;
    padding:48px 14px 14px !important;
    overflow:visible !important;
  }

  #mapShell .ssjV3Sidebar.mode-layers .ssjV3LayersCard{
    width:100% !important;
    box-sizing:border-box !important;
  }

  #mapShell .ssjV3Sidebar.mode-layers #ssjV3LayerMount{
    width:100% !important;
  }

  #mapShell .ssjV3Sidebar.mode-layers #hazardMapControls{
    width:100% !important;
    max-width:none !important;
    gap:8px !important;
  }

  #mapShell .ssjV3Sidebar.mode-layers #hazardMapControls .hazardToggle{
    display:flex !important;
    align-items:center !important;
    justify-content:space-between !important;
    width:100% !important;
    min-width:0 !important;
    max-width:none !important;
    min-height:52px !important;
    padding:8px 10px !important;
    margin:0 !important;
    box-sizing:border-box !important;
  }

  #mapShell .ssjV3Sidebar.mode-layers #hazardMapControls .hazardToggleLabel{
    display:flex !important;
    align-items:center !important;
    min-width:0 !important;
    gap:9px !important;
  }

  #mapShell .ssjV3Sidebar.mode-layers #hazardMapControls .toggleTrack{
    flex:0 0 48px !important;
    width:48px !important;
    height:28px !important;
    margin-left:10px !important;
  }

  #mapShell .ssjV3Sidebar.mode-layers #hazardMapControls .hazardLoadNote{
    width:100% !important;
    margin:2px 0 0 !important;
    padding:0 !important;
    text-align:center !important;
  }
}

/* =====================================================
   SAFESTAYJAPAN V3.2 — TOGGLE GEOMETRY FIX
===================================================== */

/* One geometry for PC and mobile. */
#mapShell #ssjV3LayerMount #hazardMapControls .hazardToggle{
  overflow:hidden !important;
}

#mapShell #ssjV3LayerMount #hazardMapControls .hazardToggleLabel{
  flex:1 1 auto !important;
  min-width:0 !important;
  overflow:hidden !important;
}

#mapShell #ssjV3LayerMount #hazardMapControls .hazardToggleLabel span{
  min-width:0 !important;
  overflow:hidden !important;
  text-overflow:ellipsis !important;
  white-space:nowrap !important;
}

#mapShell #ssjV3LayerMount #hazardMapControls .toggleTrack{
  position:relative !important;
  flex:0 0 46px !important;
  width:46px !important;
  min-width:46px !important;
  max-width:46px !important;
  height:26px !important;
  min-height:26px !important;
  max-height:26px !important;
  margin-left:10px !important;
  border-radius:999px !important;
  box-sizing:border-box !important;
  overflow:hidden !important;
}

#mapShell #ssjV3LayerMount #hazardMapControls .toggleKnob{
  position:absolute !important;
  top:2px !important;
  left:2px !important;
  width:22px !important;
  height:22px !important;
  min-width:22px !important;
  min-height:22px !important;
  border-radius:50% !important;
  transform:translateX(0) !important;
  transition:transform .18s ease !important;
  box-sizing:border-box !important;
}

#mapShell #ssjV3LayerMount #hazardMapControls .hazardToggle.is-on .toggleKnob{
  transform:translateX(20px) !important;
}

@media (max-width:700px){
  #mapShell .ssjV3Sidebar.mode-layers #hazardMapControls .hazardToggle{
    min-height:50px !important;
    padding:7px 9px !important;
  }

  #mapShell .ssjV3Sidebar.mode-layers #hazardMapControls .hazardToggleLabel{
    font:800 13px/1.2 Arial,sans-serif !important;
  }

  #mapShell .ssjV3Sidebar.mode-layers #hazardMapControls .toggleTrack{
    flex-basis:46px !important;
    width:46px !important;
    height:26px !important;
    margin-left:8px !important;
  }

  #mapShell .ssjV3Sidebar.mode-layers #hazardMapControls .toggleKnob{
    width:22px !important;
    height:22px !important;
  }

  #mapShell .ssjV3Sidebar.mode-layers #hazardMapControls .hazardToggle.is-on .toggleKnob{
    transform:translateX(20px) !important;
  }
}

/* =====================================================
   V3.3 — CLUSTER / MARKER MOTION
   No visual layout changes in this version.
===================================================== */

/* =====================================================
   V3.4 — CLUSTER DEFAULT / NO BOUNCE
   No layout changes in this version.
===================================================== */

/* =====================================================
   SafeStayJapan Map 0.6.2 — centered app width
   Do not expand to the whole viewport.
===================================================== */
.ssjPluginRoot{
  --ssj-app-max-width:1180px;

  position:relative;
  width:calc(100% - 32px);
  max-width:var(--ssj-app-max-width);
  margin-left:auto;
  margin-right:auto;
  box-sizing:border-box;
  overflow:visible;
}

.ssjPluginRoot #safeStayControls,
.ssjPluginRoot #mapShell{
  width:100%;
  max-width:100%;
  margin-left:0;
  margin-right:0;
  box-sizing:border-box;
}

@media (max-width:700px){
  .ssjPluginRoot{
    width:100%;
    max-width:100%;
    margin-left:0;
    margin-right:0;
  }
}



@media (max-width:700px){
  .ssjV3Calendar{
    transform:translateY(12px);
    transition:
      opacity .18s ease,
      transform .22s cubic-bezier(.22,.8,.32,1),
      visibility 0s linear .22s;
  }

  .ssjV3Calendar.is-open{
    transform:translateY(0);
    transition:
      opacity .18s ease,
      transform .22s cubic-bezier(.22,.8,.32,1),
      visibility 0s;
  }
}


/* =====================================================
   SafeStayJapan Map 0.7.3 — mobile calendar focus zoom fix
   iOS Safari auto-zooms focused form controls below 16px.
===================================================== */
@media (max-width:700px){
  .ssjV3DateField input{
    font-size:16px !important;
  }
}

/* =====================================================
   SafeStayJapan Map 0.7.4 — mobile sheet escape fix
   Non-fullscreen mobile sheets must always leave tappable map space.
===================================================== */
@media (max-width:700px){

  /* Normal mobile map:
     keep a visible strip of map above the sheet so outside-tap can close it. */
  #mapShell:not(.is-fullscreen-map) .ssjV3Sidebar{
    left:8px !important;
    right:8px !important;
    bottom:8px !important;
    max-height:min(66dvh, 520px) !important;
    border-radius:18px !important;
  }

  #mapShell:not(.is-fullscreen-map) .ssjV3Sidebar .ssjV3SidebarScroll{
    max-height:min(66dvh, 520px) !important;
    overflow:auto !important;
    -webkit-overflow-scrolling:touch !important;
  }

  /* Fullscreen can use more height because outside map space is plentiful. */
  #mapShell.is-fullscreen-map .ssjV3Sidebar{
    max-height:min(80dvh, 660px) !important;
  }

  #mapShell.is-fullscreen-map .ssjV3Sidebar .ssjV3SidebarScroll{
    max-height:min(80dvh, 660px) !important;
  }

  /* Close button must remain reachable even when the sheet content scrolls. */
  .ssjV3MobileClose{
    display:grid !important;
    position:absolute !important;
    z-index:20 !important;
    top:10px !important;
    right:10px !important;
    width:36px !important;
    height:36px !important;
    place-items:center !important;
    border-radius:50% !important;
    background:#fff !important;
    box-shadow:0 3px 12px rgba(28,35,39,.16) !important;
  }

  /* Give the top of the sheet enough room for the close control. */
  .ssjV3Sidebar .ssjV3SidebarScroll{
    padding-top:54px !important;
  }
}