/* Visual refresh: loaded after ourTravel.css, only overrides looks (no layout changes). */
:root {
    --syt-blue: #4a90e2;
    --syt-blue-dark: #3a78c2;
    --syt-radius: 14px;
    --syt-shadow: 0 6px 20px rgba(20, 40, 80, 0.22);
    --syt-ease: cubic-bezier(.2, .7, .2, 1);
}

html, body, form, input, select, button, .headerButton {
    font-family: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
}

/* Buttons */
.headerButton, .sideButton {
    background-color: var(--syt-blue);
    box-shadow: 0 3px 10px rgba(20, 40, 80, 0.28);
    transition: transform .18s var(--syt-ease), box-shadow .18s var(--syt-ease), background-color .18s;
    cursor: pointer;
    font-size: 14px;
    letter-spacing: .2px;
}
.headerButton:hover, .sideButton:hover {
    background-color: var(--syt-blue-dark);
    transform: translateX(3px);
    box-shadow: 0 5px 14px rgba(20, 40, 80, 0.35);
}
.sideButton:hover { transform: translateX(-3px); }
.headerButton:active, .sideButton:active { transform: scale(.97); }
.headerButton:focus-visible, .sideButton:focus-visible, .graySelect:focus-visible {
    outline: 2px solid #fff;
    outline-offset: 2px;
}

/* Selects */
.graySelect {
    background: var(--syt-blue);
    border: 0;
    border-radius: 0 0 var(--syt-radius) var(--syt-radius);
    box-shadow: 0 3px 10px rgba(20, 40, 80, 0.28);
    transition: background-color .18s;
    cursor: pointer;
    padding: 0 6px;
}
.graySelect:hover { background: var(--syt-blue-dark); }

/* Floating panels */
#helpPanel, #settingsPanel, #textToReadArea0 {
    border-radius: var(--syt-radius) !important;
    box-shadow: var(--syt-shadow);
    -webkit-backdrop-filter: blur(8px);
    backdrop-filter: blur(8px);
}
#helpPanel, #settingsPanel { background: rgba(255, 255, 255, 0.9) !important; }
#textToReadArea { border-radius: calc(var(--syt-radius) - 2px); }

/* jQuery UI tabs */
.ui-tabs { border: 0; background: transparent; padding: 0; }
.ui-tabs .ui-tabs-nav { background: transparent; border: 0; padding: 0 0 4px; }
.ui-tabs .ui-tabs-nav li { border-radius: 10px 10px 0 0; border: 0; margin-right: 4px; background: #e8eef7; transition: background-color .15s; }
.ui-tabs .ui-tabs-nav li a { outline: 0; }
.ui-tabs .ui-tabs-nav li:hover { background: #d6e3f5; }
.ui-tabs .ui-tabs-nav li.ui-tabs-active { background: #fff; }
.ui-tabs .ui-tabs-panel { background: transparent; }

/* Buttons inside panels (e.g. "Take a tour!") */
#helpPanel button {
    border: 0; border-radius: 10px; background: var(--syt-blue); color: #fff;
    box-shadow: 0 3px 8px rgba(20, 40, 80, 0.25); transition: background-color .18s, transform .18s var(--syt-ease);
    cursor: pointer;
}
#helpPanel button:hover { background: var(--syt-blue-dark); transform: translateY(-1px); }

/* Photo strip */
#imageDiv0 {
    border-radius: var(--syt-radius);
    box-shadow: var(--syt-shadow);
    background: rgba(255, 255, 255, 0.5) !important;   /* no backdrop blur here: the strip scrolls every frame */
    border: 0 !important;
}
#imageDiv0 .innerScrollArea { border-radius: var(--syt-radius); }
img.photo {
    transition: filter .2s, transform .25s var(--syt-ease);
    cursor: zoom-in;
}
#imageDiv0 li:hover { z-index: 2; }
img.photo:hover { filter: brightness(1.08) saturate(1.08); transform: scale(1.03); }

/* Enlarged preview on hover */
#photoPreview {
    border-radius: 10px !important;
    animation: syt-pop .16s var(--syt-ease);
}
@keyframes syt-pop { from { opacity: 0; transform: translateY(6px) scale(.97); } to { opacity: 1; transform: none; } }

/* Map controls and markers */
.leaflet-bar { border: 0 !important; border-radius: 12px !important; box-shadow: var(--syt-shadow) !important; overflow: hidden; }
.leaflet-bar a { transition: background-color .15s; }
.leaflet-control-scale-line { border-radius: 0 6px 6px 0; background: rgba(255, 255, 255, 0.85); }
.leaflet-control-attribution { border-radius: 8px 0 0 0; }
.leaflet-popup-content-wrapper { border-radius: 12px; box-shadow: var(--syt-shadow); }
.leaflet-marker-icon { transition: opacity .25s; }
.leaflet-container { background: #dfe6ee; }

/* Notifications */
#toast-container > div {
    border-radius: 12px; box-shadow: var(--syt-shadow); opacity: .96;
}

/* Smooth page scrolling inside panels */
#textToReadArea, #helpPanel { scroll-behavior: smooth; }

@media (prefers-reduced-motion: reduce) {
    * { transition: none !important; animation: none !important; }
}

/* Zoom +/- buttons: bigger, bottom-right, clear of the language selector and panels */
.leaflet-control-zoom a { width: 40px !important; height: 40px !important; line-height: 40px !important; font-size: 24px !important; }
.leaflet-bottom.leaflet-right .leaflet-control-zoom { margin-bottom: 10px; margin-right: 14px; }

/* Leaflet 1.x panes use z-index 400+; keep them inside the map's own stacking context so UI panels (photo strip etc.) stay on top */
.leaflet-container { isolation: isolate; z-index: 0; }

/* Keep bottom map controls (attribution, scale, zoom) above the photo strip; --syt-strip-h is set from JS */
.leaflet-bottom { bottom: var(--syt-strip-h, 0px); transition: bottom .2s; }

/* Search box in the menu */
.searchBox {
    display: flex; align-items: center; gap: 4px; box-sizing: border-box;
    width: 250px; height: 42px; margin: 2px 2px 8px 0; padding: 4px 4px 4px 12px;
    background: #fff url(../img/search.png) no-repeat 10px center / 20px 20px;
    border-radius: 0 21px 21px 0; box-shadow: var(--syt-shadow);
    transition: box-shadow .2s, transform .2s;
}
.searchBox:focus-within { box-shadow: 0 0 0 3px rgba(85, 150, 230, .55), var(--syt-shadow); transform: translateX(2px); }
.searchBox input { flex: 1; min-width: 0; height: 100%; margin: 0; padding: 0 6px 0 30px; border: 0; outline: 0; background: transparent; font-size: 15px; color: #1d2733; }
.searchBox input::placeholder { color: #8a95a3; }
.searchBox button { height: 100%; padding: 0 16px; border: 0; border-radius: 17px; background: rgba(85, 150, 230, 1); color: #fff; font-weight: 600; cursor: pointer; transition: background-color .15s, transform .1s; }
.searchBox button:hover { background: #3f82d6; }
.searchBox button:active { transform: scale(.95); }

/* Disabled menu items (e.g. New/Edit/Profile for guests): clearly muted, but solid rather than see-through */
button.headerButton:disabled { background-color: #b9c3d0 !important; color: #fff !important; opacity: 1 !important; cursor: not-allowed; box-shadow: 2px 2px 1px rgba(0,0,0,.25); }

/* ---- Photo strip: badges, empty state, handle, preview caption, viewer ---- */
#imageDiv0 li { overflow: visible; }
#imageDiv0 li > a { display: block; }
#imageDiv0 img.photo { cursor: zoom-in; user-select: none; -webkit-user-drag: none; }
#imageDiv0 .innerScrollArea { cursor: grab; }
.photoBadge { position: absolute; left: 6px; bottom: 6px; z-index: 3; font-size: 13px; line-height: 1; padding: 3px 5px; border-radius: 10px; background: rgba(255,255,255,.88); box-shadow: 0 1px 4px rgba(0,0,0,.35); pointer-events: auto; }
#photoEmpty { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; color: #1d2733; font-size: 16px; background: rgba(255,255,255,.55); pointer-events: none; }
#photoPreview .pp-cap { max-width: 70vw; padding: 5px 4px 1px; font-size: 12px; color: #44505e; text-align: center; }
#photoPreview .pp-cap:empty { display: none; }

#photoToggle { position: fixed; left: 50%; bottom: var(--syt-strip-h, 0px); transform: translateX(-50%); z-index: 1002; padding: 3px 14px 2px; border: 0; border-radius: 12px 12px 0 0; background: rgba(34,94,172,.92); color: #fff; font-size: 12px; cursor: pointer; transition: bottom .2s, background-color .15s; box-shadow: 0 -2px 8px rgba(0,0,0,.25); }
#photoToggle:hover { background: #1b4d8e; }
#photoToggle .chev { display: inline-block; transition: transform .2s; }
#photoToggle.collapsed .chev { transform: rotate(180deg); }

#photoViewer { display: none; position: fixed; inset: 0; z-index: 9000; background: rgba(8, 18, 34, .92); opacity: 0; transition: opacity .18s; }
#photoViewer.open { opacity: 1; }
#photoViewer figure { position: absolute; inset: 56px 70px 0; margin: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; }
#photoViewer img { max-width: 100%; max-height: calc(100vh - 56px - 96px); border-radius: 6px; box-shadow: 0 10px 40px rgba(0,0,0,.6); background: #0b1626; }
#photoViewer figcaption { margin-top: 12px; max-width: 900px; color: #e8eef7; font-size: 14px; text-align: center; line-height: 1.5; }
#photoViewer figcaption a { color: #ffd84a; }
#photoViewer .pv-count { display: block; margin-top: 4px; color: #9fb2cc; font-size: 12px; }
#photoViewer .pv-btn { position: absolute; border: 0; background: rgba(255,255,255,.12); color: #fff; width: 48px; height: 48px; border-radius: 50%; font-size: 30px; line-height: 44px; cursor: pointer; transition: background-color .15s; }
#photoViewer .pv-btn:hover { background: rgba(255,255,255,.26); }
#photoViewer .pv-close { top: 10px; right: 14px; }
#photoViewer .pv-prev { left: 12px; top: 50%; margin-top: -24px; }
#photoViewer .pv-next { right: 12px; top: 50%; margin-top: -24px; }
@media (max-width: 600px) { #photoViewer figure { inset: 56px 8px 0; } #photoViewer .pv-prev, #photoViewer .pv-next { top: auto; bottom: 14px; margin: 0; } }

/* Photo strip resize handle (top edge) */
#photoResize { position: absolute; left: 0; right: 0; top: -2px; height: 14px; z-index: 5; cursor: ns-resize; touch-action: none; display: flex; align-items: flex-start; justify-content: center; }
#photoResize span { width: 54px; height: 5px; margin-top: 3px; border-radius: 3px; background: rgba(255,255,255,.9); box-shadow: 0 1px 4px rgba(0,0,0,.45); transition: background-color .15s, width .15s; }
#photoResize:hover span, .resizingStrip #photoResize span { background: #ffd84a; width: 72px; }
body.resizingStrip { cursor: ns-resize; user-select: none; }
#imageDiv0 { overflow: hidden; max-height: 60vh; }

/* Wikipedia markers with a preview picture */
.wikiThumbIcon { background: none; border: 0; }   /* position stays absolute (Leaflet places icons with transforms) */
.wikiThumbIcon img { box-sizing: border-box; width: 46px !important; height: 46px !important; min-width: 46px; max-width: none !important; max-height: none !important; aspect-ratio: 1 / 1; object-fit: cover; border-radius: 50%; border: 3px solid #fff; box-shadow: 0 2px 8px rgba(0,0,0,.45); background: #dfe6ee; display: block; transition: transform .15s; }
.wikiThumbIcon:hover { z-index: 10000 !important; }
.wikiThumbIcon:hover img { transform: scale(1.35); }
.wikiThumbIcon span { position: absolute; right: -2px; bottom: -2px; width: 17px; height: 17px; border-radius: 50%; background: #222; color: #fff; font: 700 11px/17px Georgia, serif; text-align: center; border: 1.5px solid #fff; pointer-events: none; }
.wikiThumbIcon.noimg img { display: none; }
.wikiThumbIcon.noimg { width: 26px !important; height: 26px !important; border-radius: 50%; background: #333; }
.placePopup p { margin: 0 0 6px; } .placePopup .pp-title { font-weight: 700; } .placePopup .pp-desc { color: #5a6675; font-size: 13px; }

/* Marker clusters (gentle): round badge with the first picture and the count */
.leaflet-cluster-anim .leaflet-marker-icon, .leaflet-cluster-anim .leaflet-marker-shadow { transition: transform .3s ease-out, opacity .3s ease-in !important; }
.sytCluster { background: none; border: 0; }
.sytCluster b { position: absolute; inset: 0; margin: auto; width: 34px; height: 34px; line-height: 34px; border-radius: 50%; text-align: center; font-size: 14px; color: #fff; background: rgba(34, 94, 172, .92); border: 3px solid #fff; box-shadow: 0 2px 8px rgba(0,0,0,.45); box-sizing: content-box; }
.sytCluster.withThumb img { position: absolute; inset: 0; width: 50px; height: 50px; border-radius: 50%; object-fit: cover; border: 3px solid #fff; box-sizing: border-box; box-shadow: 0 2px 8px rgba(0,0,0,.45); }
.sytCluster.withThumb b { inset: auto -4px -4px auto; width: 20px; height: 20px; line-height: 20px; font-size: 11px; border-width: 2px; margin: 0; box-sizing: border-box; }

/* Temperature labels: no box, just text with a soft light halo and a shadow */
.wxIcon { background: none; border: 0; }
.wxLabel { display: flex; align-items: center; justify-content: center; gap: 3px; height: 28px; white-space: nowrap; background: none; border: 0; box-shadow: none;
  color: #12213a; font-size: 13px; font-weight: 700; letter-spacing: .1px;
  text-shadow: 0 0 2px #fff, 0 0 3px #fff, 0 0 5px rgba(255,255,255,.95), 0 1px 3px rgba(0,0,0,.35); }
.wxLabel img { width: 22px; height: 22px; filter: drop-shadow(0 0 2px #fff) drop-shadow(0 1px 2px rgba(0,0,0,.45)) brightness(.6) contrast(1.3); }

/* Welcome panel: compact, closable */
#helpPanel { font-size: 14px; line-height: 1.45; padding: 12px 14px !important; max-width: calc(100vw - 20px); }
#helpPanel h2 { font-size: 18px; margin: 8px 0 4px; }
#helpPanel p { margin: 4px 0 8px; }
#helpPanel .hpClose { position: absolute; top: 6px; right: 8px; width: 28px; height: 28px; padding: 0; border: 0; border-radius: 50%; background: rgba(0,0,0,.08) !important; color: #333 !important; font-size: 20px; line-height: 26px; cursor: pointer; z-index: 2; }
#helpPanel .hpClose:hover { background: rgba(0,0,0,.18) !important; transform: none; }

/* Photos flying in on the map */
.flyLayer { position: absolute; inset: 0; z-index: 650; pointer-events: none; overflow: hidden; }
.flyCard { position: absolute; width: 150px; padding: 4px 4px 0; border-radius: 12px; background: #fff; box-shadow: 0 6px 22px rgba(0,0,0,.45); cursor: zoom-in; pointer-events: auto;
  transform-origin: 50% 50%; will-change: transform, opacity; }
.flyCard.flying { transition: transform .75s cubic-bezier(.2, .9, .25, 1.1), opacity .45s ease-out; }
.flyCard.leaving { transition: transform .65s cubic-bezier(.5, 0, .75, .4), opacity .5s ease-in .1s; }
.flyCard img { display: block; width: 142px; height: 98px; object-fit: cover; border-radius: 9px; background: #dfe6ee; }
.flyCard span { display: block; padding: 3px 3px 4px; font-size: 10.5px; line-height: 1.25; color: #44505e; max-height: 2.5em; overflow: hidden; }
.flyCard:hover { box-shadow: 0 8px 28px rgba(0,0,0,.55); }
.photoPin { background: none; border: 0; }
.photoPin img { width: 38px; height: 38px; border-radius: 50%; object-fit: cover; border: 3px solid #ffd84a; box-shadow: 0 2px 8px rgba(0,0,0,.5); background: #dfe6ee; display: block; transition: transform .15s; }
.photoPin:hover img { transform: scale(1.3); }
@media (prefers-reduced-motion: reduce) { .flyCard.flying, .flyCard.leaving { transition: opacity .3s; } }