body{
  min-height:100vh;
  display:grid;
  justify-items:center;
  align-items:start;
  padding:24px;
  text-align:center;
}
.page-shell{
      width:min(680px, 100%);
      display:flex;
      flex-direction:column;
      gap:10px;
    }.card{
      width:100%;
      padding:24px;
      background:var(--card);
      border:1px solid var(--border);
      box-shadow:0 10px 30px rgba(0,0,0,.05);
    }

    .banner{ display:block; width:min(34rem, 100%); margin:0 auto; }

    h1{
      margin:24px 0 8px;
      color:var(--accent);
      font-variant-caps:small-caps;
      font-size:2.2rem;
      font-weight:500;
      line-height:1.1;
    }

    .map-instruction{
      max-width:31rem;
      margin:0 auto 14px;
      color:var(--muted);
      font-size:1rem;
      line-height:1.35;
    }

    .map-wrap{
      position:relative;
      overflow:hidden;
      border:1px solid var(--border);
      border-radius:2px;
    }

    .map-wrap::after{
      content:"";
      position:absolute;
      inset:0;
      z-index:1;
      pointer-events:none;
      background:rgba(247,242,234,.16);
      mix-blend-mode:color;
    }

    #map{
      position:relative;
      height:clamp(320px, calc(100dvh - 285px), 500px);
      background-color:#e8e1d8;
    }

    .map-fallback-message{
      position:absolute;
      left:50%;
      bottom:16px;
      z-index:4;
      width:max-content;
      max-width:calc(100% - 32px);
      margin:0;
      padding:7px 11px;
      border:1px solid rgba(138,107,79,.25);
      background:rgba(255,255,255,.92);
      color:var(--muted);
      font-size:.9rem;
      line-height:1.25;
      transform:translateX(-50%);
      box-shadow:0 2px 8px rgba(0,0,0,.10);
    }

    #map .maplibregl-canvas,
    #map .maptiler-canvas{ filter:saturate(.52) sepia(.14) brightness(1.06); }

    .maplibregl-ctrl-group,
    .maptiler-ctrl-group{
      overflow:hidden;
      border:1px solid var(--border) !important;
      border-radius:0 !important;
      box-shadow:0 2px 8px rgba(0,0,0,.08) !important;
    }

    .maplibregl-ctrl-group button,
    .maptiler-ctrl-group button{
      width:27px !important;
      height:27px !important;
    }

    .maplibregl-ctrl-icon,
    .maptiler-ctrl-icon{ background-size:17px 17px !important; }

    /* Keep only the expandable attribution control. */
    #map .maplibregl-ctrl-attrib:not(.maplibregl-compact),
    #map .maptiler-ctrl-attrib:not(.maplibregl-compact){ display:none !important; }

    #map .maplibregl-ctrl-attrib,
    #map .maptiler-ctrl-attrib{ font-size:9px !important; }

    #map .maplibregl-ctrl-logo,
    #map .maptiler-ctrl-logo,
    #map .maptiler-logo{
      width:54px !important;
      height:18px !important;
      margin:0 0 5px 5px !important;
      background-size:contain !important;
      opacity:.78;
      transform-origin:left bottom;
      transform:scale(.78);
    }

    .map-marker{
      display:grid;
      width:25px;
      height:31px;
      padding:0;
      place-items:center;
      border:0;
      background:transparent;
      color:#fff;
      cursor:pointer;
    }

    .map-pin{
      position:relative;
      display:grid;
      width:23px;
      height:23px;
      place-items:center;
      border:2px solid var(--card);
      border-radius:50% 50% 50% 0;
      background:var(--crest-red);
      box-shadow:0 2px 6px rgba(0,0,0,.22);
      transform:rotate(-45deg);
      transition:transform .18s ease, background .2s ease, opacity .2s ease;
    }

    .map-marker.section-collapsed:not(.marker-accommodation) .map-pin{ background:var(--crest-red-dim); }

    .map-marker.marker-accommodation{ color:var(--crest-red); }
    .map-marker.marker-accommodation .map-pin{
      border-color:var(--crest-red);
      background:var(--bg);
    }
    .map-marker.marker-accommodation.section-collapsed{ color:var(--crest-red-dim); }
    .map-marker.marker-accommodation.section-collapsed .map-pin{
      border-color:var(--crest-red-dim);
      background:rgba(247,242,234,.94);
    }
    .map-marker.marker-accommodation.active{ color:var(--crest-red); }
    .map-marker.marker-accommodation.active .map-pin{
      border-color:var(--crest-red);
      background:var(--card);
      box-shadow:0 3px 9px rgba(143,38,56,.28);
    }

    .map-marker.marker-celebration{
      color:var(--crest-red);
    }
    .map-marker.marker-celebration .map-pin{
      border-color:var(--crest-red);
      background:var(--card);
    }
    .map-marker.marker-celebration.section-collapsed .map-pin{
      border-color:var(--crest-red-dim);
      background:rgba(255,255,255,.96);
    }
    .map-marker.marker-celebration.section-collapsed .marker-icon-tiz-crest{
      opacity:.58;
    }
    .map-marker.marker-celebration.active .map-pin{
      border-color:var(--crest-red);
      background:var(--card);
      box-shadow:0 3px 9px rgba(143,38,56,.28);
    }
    .map-marker.marker-celebration.active .marker-icon-tiz-crest{
      opacity:1;
    }

    .map-marker.marker-airport{ color:var(--crest-red); }
    .map-marker.marker-airport .map-pin{
      border-color:var(--crest-red);
      background:var(--card);
    }
    .map-marker.marker-airport.section-collapsed{ color:var(--crest-red-dim); }
    .map-marker.marker-airport.section-collapsed .map-pin{
      border-color:var(--crest-red-dim);
      background:rgba(255,255,255,.96);
    }
    .map-marker.marker-airport.active{ color:var(--crest-red); }
    .map-marker.marker-airport.active .map-pin{
      border-color:var(--crest-red);
      background:var(--card);
      box-shadow:0 3px 9px rgba(143,38,56,.28);
    }

    .map-marker.active .map-pin{ transform:rotate(-45deg) scale(1.25); }

    .marker-icon{
      display:block;
      width:14px;
      height:14px;
      background:currentColor;
      -webkit-mask-position:center;
      mask-position:center;
      -webkit-mask-repeat:no-repeat;
      mask-repeat:no-repeat;
      -webkit-mask-size:contain;
      mask-size:contain;
      transform:rotate(45deg);
    }

    .marker-icon-image{
      display:block;
      width:17px;
      height:17px;
      object-fit:contain;
      pointer-events:none;
      transform:rotate(45deg);
    }

    .marker-icon-serbian-cross{
      width:18px;
      height:18px;
      filter:brightness(0) invert(1);
    }

    .marker-icon-tiz-crest{
      width:18px;
      height:18px;
      filter:none;
    }

    .marker-icon-bed{
      -webkit-mask-image:url("/assets/icons/bed.svg");
      mask-image:url("/assets/icons/bed.svg");
    }

    .marker-icon-plane{
      width:15px;
      height:15px;
      -webkit-mask-image:url("/assets/icons/plane-departure.svg");
      mask-image:url("/assets/icons/plane-departure.svg");
    }

    .map-marker:not(.marker-accommodation):not(.marker-airport):not(.marker-celebration){ color:#fff; }

    .marker-dot{
      width:5px;
      height:5px;
      border-radius:50%;
      background:currentColor;
      transform:rotate(45deg);
    }

    .mobile-location-sheet{
      position:absolute;
      left:8px;
      right:8px;
      bottom:8px;
      z-index:4;
      display:block;
      max-height:min(48%, 310px);
      overflow:auto;
      border:1px solid var(--border);
      border-radius:13px 13px 4px 4px;
      background:rgba(255,255,255,.98);
      box-shadow:0 -6px 24px rgba(0,0,0,.16);
      opacity:0;
      pointer-events:none;
      transform:translateY(calc(100% + 16px));
      transition:transform .3s ease, opacity .2s ease;
    }

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

    .mobile-sheet-handle{
      width:42px;
      height:4px;
      margin:9px auto 7px;
      border-radius:999px;
      background:#d5c8ba;
    }

    .mobile-sheet-close{
      position:absolute;
      top:9px;
      right:10px;
      width:28px;
      height:28px;
      padding:0;
      border:0;
      border-radius:50%;
      background:rgba(247,242,234,.94);
      color:var(--muted);
      cursor:pointer;
      font:inherit;
      font-size:1.2rem;
      line-height:1;
    }

    .mobile-sheet-content{
      padding:0 16px 16px;
      text-align:left;
    }

    .mobile-sheet-type{
      color:var(--accent);
      font-size:.84rem;
      font-variant-caps:small-caps;
      letter-spacing:.04em;
    }

    .mobile-sheet-name{
      display:block;
      margin-top:2px;
      padding-right:30px;
      font-size:1.18rem;
      font-weight:600;
      line-height:1.2;
    }

    .mobile-sheet-address{
      display:block;
      margin-top:4px;
      color:var(--muted);
      font-size:.96rem;
      line-height:1.25;
    }

    .mobile-sheet-actions{
      display:flex;
      flex-wrap:wrap;
      gap:8px 16px;
      margin-top:9px;
    }

    .mobile-sheet-directions{
      display:inline-block;
      color:var(--crest-red);
      text-decoration:none;
      border-bottom:1px solid color-mix(in srgb, var(--crest-red) 45%, transparent);
    }

    .mobile-sheet-booking{
      display:inline-block;
      padding:4px 9px;
      border-radius:999px;
      background:var(--crest-red);
      color:#fff;
      font-size:.92rem;
      line-height:1.2;
      text-decoration:none;
      box-shadow:0 2px 6px rgba(143,38,56,.18);
    }

    .locations-list{
      display:grid;
      gap:9px;
      margin-top:16px;
      text-align:left;
    }

    .location-section{
      border:1px solid var(--border);
      background:#fff;
    }

    .location-section summary{
      position:relative;
      display:flex;
      align-items:center;
      justify-content:space-between;
      min-height:48px;
      padding:11px 42px 11px 14px;
      color:var(--accent);
      font-variant-caps:small-caps;
      cursor:pointer;
      list-style:none;
      font-size:1.12rem;
      font-weight:600;
    }

    .location-section summary::-webkit-details-marker{ display:none; }
    .location-section summary::after{
      content:"+";
      position:absolute;
      right:15px;
      top:50%;
      font-size:1.35rem;
      font-weight:400;
      transform:translateY(-53%);
    }
    .location-section[open] summary::after{ content:"−"; }
    .section-count{ color:var(--muted); font-size:.92rem; font-weight:400; }
    .section-content{ display:grid; gap:8px; padding:0 8px 8px; }

    .location-card{
      width:100%;
      border:1px solid var(--border);
      background:transparent;
      color:var(--text);
      text-align:left;
      transition:border-color .2s ease, background .2s ease;
    }

    .location-select{
      display:block;
      width:100%;
      padding:12px 14px 0;
      border:0;
      background:transparent;
      color:inherit;
      cursor:pointer;
      font:inherit;
      text-align:left;
    }

    .location-card:hover,
    .location-card.active{ border-color:var(--crest-red); background:#fcfaf7; }

    .location-type{
      color:var(--accent);
      font-size:.88rem;
      font-variant-caps:small-caps;
      letter-spacing:.04em;
    }

    .location-name{ display:block; margin-top:2px; font-size:1.2rem; font-weight:600; line-height:1.2; }
    .location-address{ display:block; margin-top:3px; color:var(--muted); font-size:1rem; line-height:1.25; }

    .location-card-actions{
      display:flex;
      flex-wrap:wrap;
      gap:6px 16px;
      padding:5px 14px 12px;
    }

    .directions-link{
      display:inline-block;
      align-self:center;
      color:var(--crest-red);
      font-size:.98rem;
      text-decoration:none;
      border-bottom:1px solid color-mix(in srgb, var(--crest-red) 45%, transparent);
    }

    .booking-link{
      display:inline-block;
      padding:4px 10px;
      border-radius:999px;
      background:var(--crest-red);
      color:#fff;
      font-size:.92rem;
      line-height:1.2;
      text-decoration:none;
      box-shadow:0 2px 6px rgba(143,38,56,.18);
    }

    .booking-link:hover,
    .mobile-sheet-booking:hover{ background:#7e2030; }

    @media (max-width:700px){
      body{ padding:10px; }
      .card{ padding:14px; }
      .banner{ max-height:82px; }
      h1{ margin:12px 0 10px; font-size:1.85rem; }
      #map{ height:clamp(300px, calc(100dvh - 245px), 460px); }
      .locations-list{ margin-top:12px; }
      .mobile-location-sheet{ max-height:min(52%, 300px); }
    }

    @media (max-height:700px){
      body{ padding:8px; }
      .card{ padding:12px; }
      .banner{ max-height:68px; }
      h1{ margin:8px 0; font-size:1.7rem; }
      #map{ height:calc(100dvh - 245px); min-height:300px; max-height:420px; }
      .mobile-location-sheet{ max-height:46%; }
    }

    @media (max-width:700px) and (max-height:600px){
      .banner{ max-height:52px; }
      h1{ margin:5px 0 4px; font-size:1.55rem; }
      .map-instruction{ margin-bottom:7px; font-size:.92rem; line-height:1.2; }
      #map{ height:calc(100dvh - 220px); min-height:280px; max-height:360px; }
    }

/* Parking marker and richer location cards */
.marker-icon-parking{
  width:14px;
  height:14px;
  -webkit-mask-image:url("/assets/icons/parking.svg");
  mask-image:url("/assets/icons/parking.svg");
}

.location-card.has-image{
  display:grid;
  grid-template-columns:minmax(0,1fr) 96px;
  grid-template-rows:auto auto;
}

.location-select{
  display:block;
  min-width:0;
  padding:0;
}

.location-card.has-image .location-select{
  grid-column:1;
  grid-row:1;
}

.location-card-copy{
  display:block;
  min-width:0;
  padding:12px 14px 4px;
}

.location-card.has-image .location-card-copy{
  padding-right:4px;
}

.location-card.has-image .location-card-actions{
  grid-column:1;
  grid-row:2;
}

.location-card-media{
  grid-column:2;
  grid-row:1 / -1;
  align-self:stretch;
  width:96px;
  min-height:100%;
}

.location-card-image{
  display:block;
  width:100%;
  height:100%;
  min-height:100%;
  object-fit:cover;
  filter:saturate(.72) sepia(.07) brightness(1.03);
}

@media (max-width:420px){
  .location-card.has-image{ grid-template-columns:minmax(0,1fr) 80px; }
  .location-card-media{ width:80px; }
  .location-card-copy{ padding-left:12px; }
}
.location-parking{
  display:block;
  margin-top:6px;
  color:var(--muted);
  font-size:.9rem;
  line-height:1.25;
}