@charset "UTF-8";
/******************************************************
/// Autocamp - Legend map
******************************************************/
#autocamp #pageWrapper { padding: 0; margin: 0; }
#autocamp .sectionStatic { width: 100%; padding-top: 50px; }
#autocamp .staticContent h3 { margin: 0 0 20px !important; }

#autocamp #svgPlanMap svg { width: 100%; height: auto; fill: currentColor; }

#svgPlanMap { text-align: center; background: #fff; }
#map-wrapper { position: relative; max-width: 1500px; margin: 0 auto; padding: 20px; }


.legend-map .content.hidden { display:none; }
.legend-map .content.visible { display:block; }
.legend-map .hotspot.dimmed { opacity:.35; filter:grayscale(.4) contrast(.92); transition:opacity .2s ease; }

.legend-map .map-ui { position:absolute; top:12px; right:12px; z-index:10; }
.legend-map .zoom-box { display:flex; gap:.4rem; align-items:center; }
.legend-map .ui-btn { cursor:pointer; }

.deck-switcher .ui-chip { padding: .35rem .6rem; border-radius: 999px; font: inherit; cursor: pointer; border: 1px solid var(--chip-border, #9bb); background: var(--chip-bg, rgba(255,255,255,.85)); }
.deck-switcher .ui-chip.active { background: var(--chip-bg-active, #fff); box-shadow: 0 0 0 2px rgba(0,0,0,.06) inset; }


/*


.svgPlanMap { content-visibility: auto; contain-intrinsic-size: 516px 842px; }
.svgPlanMap svg { width: 100%; height: auto; display: block; }
#svgContainer[data-layer="classic"] canvas { filter: none; }
#svgContainer[data-layer="sea"]     canvas { filter: hue-rotate(170deg) saturate(1.2); }
#svgContainer[data-layer="night"]   canvas { filter: brightness(.8) contrast(1.1) grayscale(.1) hue-rotate(200deg); }
#svgContainer[data-layer="mono"]    canvas { filter: grayscale(1) contrast(1.05); }
#svgContainer[data-layer="green"]   canvas { filter: hue-rotate(80deg) saturate(1.2); }
#svgContainer[data-layer="orange"]  canvas { filter: hue-rotate(-30deg) saturate(1.3); }
#svgContainer[data-layer="relief"]  canvas { filter: contrast(1.2) saturate(1.15); }
#svgContainer[data-layer="nautical"] canvas { filter: brightness(1.05) hue-rotate(190deg) saturate(1.15); }


.svgPlanMap { width: 100%; max-width: 842px; margin: 0 auto; }
#legendCanvas { display:block; width:100%; height:auto; }


#svgPlanMap.legend-hide-icons-group .CampMapIkonaWrapp { opacity: 0; pointer-events: none; }
#svgPlanMap.legend-hide-icons      .CampMapIkona       { opacity: 0; pointer-events: none; }
#svgPlanMap.legend-hide-labels     text, 
#svgPlanMap.legend-hide-labels     .map-label, 
#svgPlanMap.legend-hide-labels     .label              { opacity: 0; pointer-events: none; }


#svgPlanMap svg * { transition: opacity .2s ease; }

*/















.tooltip {
  position: absolute; text-align: left; pointer-events: auto; display: none; 
  
  z-index: 100; width: 220px;
  border: 0 solid #444; border-radius: 8px; padding: .8rem; color: #0592c2; font-size: 14px; font-weight: 600;
  background: rgba(155, 208, 223, .8); box-shadow: 0 -25px 85px rgba(0,114,186,.4);
  transition: color .2s, transform .2s;
}
.tooltip-icons-wrap { display: flex; gap: 8px; }
.tooltip-icon { display: inline-flex; align-items: center; gap: 4px; 
text-align: center; padding: 0.2rem; border-radius: 6px; font-size: 12px; 
font-weight: 600; cursor: pointer; background: rgba(155, 208, 223, 0.8); 
color: #0592c2; border: none; box-shadow: 0 -25px 85px rgba(0, 114, 186, .4); 
transition: transform .15s ease, background .15s ease;  }


.tooltip-icon:hover, .tooltip-icon:focus { transform: scale(1.05); outline: 2px solid #fff; outline-offset: 2px; }
.tooltip-icon i { margin: 4px 2px; font-size: 16px; }
.tooltip-icon i span { display: block; margin-top: .2rem; font-size: .5rem; }
.tooltip a {
  display: block; margin: 10px auto 0; text-align: center; border-radius: 8px; padding: .3rem .15rem;
  color: #0592c2; font-size: 14px; font-weight: 600; text-decoration: none;
  background: rgba(155, 208, 223, .8); box-shadow: 0 -25px 85px rgba(0,114,186,.4); transition: color .2s, transform .2s;
}

.highlight { stroke: #ff9800 !important; stroke-width: 3 !important; filter: drop-shadow(0 0 4px rgba(255,152,0,.7)); }

.map-hotspot {
  cursor: pointer; pointer-events: all; display: flex; justify-content: center; align-items: center;
  border-radius: 50%; background: #3e5b9f; filter: drop-shadow(1px 1px 1px rgba(0,0,0,.3));
  transition: box-shadow .4s, opacity .4s; animation: pulse 2.5s infinite;
}
.map-hotspot:hover { cursor: pointer; }

@keyframes pulse { 0% { box-shadow: 0 0 0 0 rgba(5,146,194,.7) } 70% { box-shadow: 0 0 0 10px rgba(5,146,194,0) } 100% { box-shadow: 0 0 0 0 rgba(5,146,194,0) } }
@keyframes pulse-blue    { 0% { box-shadow: 0 0 0 0 rgba(160,199,221,.7) } 70% { box-shadow: 0 0 0 10px rgba(160,199,221,0) } 100% { box-shadow: 0 0 0 0 rgba(160,199,221,0) } }
@keyframes pulse-red     { 0% { box-shadow: 0 0 0 0 rgba(255,0,0,.7) } 70% { box-shadow: 0 0 0 10px rgba(255,0,0,0) } 100% { box-shadow: 0 0 0 0 rgba(255,0,0,0) } }
@keyframes pulse-green   { 0% { box-shadow: 0 0 0 0 rgba(59,169,52,.7) } 70% { box-shadow: 0 0 0 10px rgba(59,169,52,0) } 100% { box-shadow: 0 0 0 0 rgba(59,169,52,0) } }
@keyframes pulse-disabled{ 0% { box-shadow: 0 0 0 0 rgba(255,255,255,.7) } 70% { box-shadow: 0 0 0 10px rgba(255,255,255,0) } 100% { box-shadow: 0 0 0 0 rgba(255,255,255,0) } }

circle.active { stroke: #f59e0b !important; filter: drop-shadow(0 0 8px rgba(245,158,11,.8)); }
.semi-transparent-blue { opacity: .4; fill: #4fa0ca; }
.outline { stroke: #4fa0ca; stroke-miterlimit: 10; fill: none; }

#mapNav {
  position: absolute; top: 50px; left: 180px; z-index: 300;
  display: flex; gap: 6px; align-items: center; justify-content: flex-end; margin-bottom: 1rem; font-size: 13px;
  padding: 8px; background: rgba(255,255,255,.95); border: 1px solid rgba(155,208,223,.8); border-radius: 8px;
}
#mapNav button {
  text-align: center; padding: .5rem; border: none; border-radius: 8px; cursor: pointer; font-weight: 600;
  width: auto; height: auto; color: #0592c2; background: rgba(155,208,223,.8);
  box-shadow: 0 -25px 85px rgba(0,114,186,.4); transition: transform .15s ease, color .15s ease;
}
#mapNav button:hover { color: #037b98; transform: scale(1.1); }
#mapNav button i span { display: block; margin-top: 1rem; font-size: 10px; }
#mapNav-toggler { background: transparent; color: #2563eb; border: 1px solid #2563eb; }

.mapNav-sep { display: inline-block; width: 1px; height: 24px; margin: 0 8px; vertical-align: middle; background: rgba(37,99,235,.3); }

.poi-icon {
  position: absolute !important; pointer-events: none !important; user-select: none;
  transform: translate(-50%, -50%) scale(1); display: flex; align-items: center; justify-content: center;
  background: none; padding: 0; border-radius: 0; box-shadow: none; transition: transform .2s ease, box-shadow .2s ease;
}
.poi-icon .medium { font-size: 16px; }
.poi-icon .small  { font-size: 14px; }
.poi-icon .tiny   { font-size: 13px; }
.poi-icon.hidden  { display: none !important; }
.poi-icon:hover   { transform: translate(-50%, -50%) !important; }

.legend {
  position: relative; top: 5px; z-index: 10;
  display: flex; flex-wrap: wrap; align-items: center; gap: 1rem;
  padding: .75rem 1rem; border-radius: 8px; background: rgba(155,208,223,.8);
  font-size: .9rem; font-family: system-ui,-apple-system,BlinkMacSystemFont,sans-serif;
}
.legend-item {
  position: relative; display: flex; align-items: center; gap: 8px;
  font-size: 12px; font-weight: 600; text-transform: uppercase;
}
.legend-item input{
  appearance: none; width: 18px; height: 18px; border-radius: 4px; border: 2px solid #a0aec0; outline: none; cursor: pointer;
  display: inline-flex; align-items: center; justify-content: center; background: #fff; transition: all .25s cubic-bezier(.4,.2,.2,1);
}
.legend-item input:checked{ background: #2563eb; border-color: #2563eb; box-shadow: 0 0 8px rgba(37,99,235,.6); }
.legend-item input::after{
  content: ''; position: absolute; top: 2px; left: 5px; width: 6px; height: 10px;
  border-right: 2px solid #fff; border-bottom: 2px solid #fff; transform: rotate(45deg) scale(0); transition: transform .2s ease;
}
.legend-item input:checked::after{ transform: rotate(45deg) scale(1); }
.legend-item i { min-width: 16px; margin: 0 5px; text-align: center; }

.nav-btn { display: inline-flex; align-items: center; gap: 4px; margin-right: 4px; padding: 6px 10px; border: 1px solid #cbd5e1; border-radius: 6px; background: #f1f5f9; cursor: pointer; font-size: 14px; }
.nav-btn i { pointer-events: none; }
.nav-btn.active { background: #2563eb; color: #fff; border-color: #1e4db7; }

/******************************************************
/// Camp Map Icon
******************************************************/
@keyframes spin { 100% { transform: rotate(360deg); } }

.CampMapIkona { animation: spin 25s cubic-bezier(0.455, 0.03, 0.515, 0.955) infinite; transform-box: fill-box; transform-origin: center; cursor: pointer; }
.CampMapIkonaWrapp:hover .CampMapIkona { }

#autocamp #svgPlanMap:fullscreen, #autocamp #svgPlanMap:-webkit-full-screen { position: relative; margin-top:4rem; background-color: white; background-image: radial-gradient(circle at top left, rgba(255,255,255,0.7) 0%, rgba(255,255,255,0) 60%), url(../images/bg/bg_colorful.jpg); background-position: top left, center; background-size: 100% 100%, cover; background-repeat: no-repeat, no-repeat; background-blend-mode: normal;  }
#autocamp #svgPlanMap:fullscreen svg, #autocamp #svgPlanMap:-webkit-full-screen svg { width:85%;margin-top:4rem; height: auto; /* keep aspect ratio */ }
#autamp #svgPlanMap svg:fullscreen,#autocamp #svgPlanMap svg:-webkit-full-screen { width: 85%; margin-top: 4rem; height: auto; }

/* base for all targeted group children: smoother, quicker but subtle */
:is( #camp_area-numbered > *, 
#camp_area-a > *, 
#camp_area-b > *, 
#camp_area-c > *, #camp_area-d > *, 
#camp_main-buildings > *) { transition: transform 100ms cubic-bezier(.3,.2,.4,1), filter 100ms ease; transform-origin: center center; }

/* individual child hover / focus for camp_area-* groups: mild pop + faint orange glow */
:is( #camp_area-numbered > *, 
#camp_area-a > *, 
#camp_area-b > *, #camp_area-c > *, 
#camp_area-d > *):hover,
:is( #camp_area-numbered > *, 
#camp_area-a > *, 
#camp_area-b > *, #camp_area-c > *, #camp_area-d > *):focus-visible { transform: scale(1.04); filter: drop-shadow(0 0 6px rgba(255, 152, 0, 0.5)); }

/* individual child hover / focus - main buildings*/
#camp_main-buildings > *:hover,
#camp_main-buildings > *:focus-visible { transform: scale(1.06); filter: drop-shadow(0 0 8px rgba(37, 99, 235, 0.6)); }

/* keyboard users accessibility: visible focus outline */
:is( 
#camp_area-numbered [tabindex]:focus-visible, 
#camp_area-a [tabindex]:focus-visible, 
#camp_area-b [tabindex]:focus-visible, 
#camp_area-c [tabindex]:focus-visible, 
#camp_area-d [tabindex]:focus-visible, 
#camp_main-buildings [tabindex]:focus-visible) { outline: 2px solid rgba(255, 238, 0, 0.8); outline-offset: 2px; }

#autocamp #svgPlanMap:fullscreen #mapNav button,
#autocamp #svgPlanMap:-webkit-full-screen #mapNav button { font-size: 30px; padding: 0.5rem 0.8rem; background: rgba(255, 255, 255, 0.15); color: #0592c2; font-weight: 600; box-shadow: 0 -25px 85px rgba(0, 114, 186, 0.8); border: none; border-radius: 8px; cursor: pointer; }

#autocamp #svgPlanMap:fullscreen .mapNav-sep,
#autocamp #svgPlanMap:-webkit-full-screen .mapNav-sep { width: 3px; background: rgba(37, 99, 235, 0.45); margin: 0 15px; height: 30px; vertical-align: middle; }
#autocamp #svgPlanMap:fullscreen #mapNav,
#autocamp #svgPlanMap:-webkit-full-screen #mapNav {position: absolute; top: 0; right: 0; left: unset; width: 100%; background: linear-gradient(to right, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 0.15) 30%, rgba(255, 255, 255, 0.95) 50%); border: 1px solid rgba(255, 255, 255, 0); box-shadow: 0 12px 40px rgba(0, 0, 0, 0); border-radius: 0px; padding: 15px 16px; font-size: 14px; border-radius: 0; padding: 8px 20px; display: flex; gap: 8px; align-items: center; justify-content: flex-end; z-index: 300; }
#autocamp #svgPlanMap:fullscreen #mapNav button, #autocamp #svgPlanMap:-webkit-full-screen #mapNav button { font-size: 26px; padding: 0.8rem 0.65rem; }

#location .svgMapcontainer.stage > canvas,
#location .svgMapcontainer.stage > svg.overlay { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }

#location .svgMapcontainer.stage { position: relative; width: 100%; }
#location .svgMapcontainer.stage::before { content: ""; display: block; padding-top: calc(100% * 1034 / 1920); /* 53.85% for 1920x1034 */ }

@supports (aspect-ratio: 1) {
  #location .svgMapcontainer.stage { aspect-ratio: 1920 / 1034; }
  #location .svgMapcontainer.stage::before { content: none; display: none; }
}

#location .svgMapcontainer.stage > canvas, 
#location .svgMapcontainer.stage > svg.overlay, 
.legend-canvas { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }

.legend-map { position: relative; }
.legend-dimmer { z-index: 4; }
.legend-overlay { position: absolute; inset: 0; z-index: 5; width: 100%; height: 100%; overflow: visible; }
.deck-card { position: relative; }
.deck-card[hidden] { display: none !important; }