/* E-REAL návrhy – spoločné časti (lišta medzi návrhmi, galéria, mapa). Vzhľad návrhu je v jeho style.css. */
.er-dn { display: flex; justify-content: space-between; gap: 12px; padding: 7px 16px; background: #111; color: #ddd; font: 500 13px/1.3 system-ui, -apple-system, sans-serif; position: relative; z-index: 60; }
.er-dn a { color: inherit; text-decoration: none; white-space: nowrap; }
.er-dn a:hover { color: #fff; }
.er-dn a:nth-child(2) { color: #cfb279; }
@media (max-width: 640px) { .er-dn { font-size: 12px; padding: 7px 12px; } .er-dn a:first-child, .er-dn a:last-child { overflow: hidden; text-overflow: ellipsis; max-width: 30%; } }

.er-logo { display: block; height: 34px; width: auto; }
.er-mark { display: block; width: 40px; height: auto; }

.er-pin { width: 28px; height: 36px; background: no-repeat center/contain url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 26 34'%3E%3Cpath d='M13 33C13 33 1 20 1 12.5a12 12 0 0 1 24 0C25 20 13 33 13 33z' fill='%2315355a' stroke='%23fff' stroke-width='2'/%3E%3Ccircle cx='13' cy='12.5' r='4.5' fill='%23cfb279'/%3E%3C/svg%3E"); }
.er-pop { display: grid; gap: 3px; color: #15355a; text-decoration: none; font-family: inherit; }
.er-pop img { width: 100%; aspect-ratio: 16 / 10; object-fit: cover; border-radius: 4px; margin-bottom: 4px; }
.er-pop b { font-size: 16px; }
.er-pop span { font-size: 13px; line-height: 1.35; font-weight: 500; }
.er-pop small { font-size: 12px; color: #6b7686; }
.maplibregl-popup-content { padding: 8px; border-radius: 6px; width: 240px; }
.maplibregl-popup-close-button { font-size: 18px; width: 26px; height: 26px; background: #fff; border-radius: 0 6px 0 6px; }

.er-lb { position: fixed; inset: 0; z-index: 100; background: rgba(8, 14, 24, .96); display: grid; place-items: center; }
.er-lb img { max-width: calc(100vw - 32px); max-height: calc(100vh - 110px); object-fit: contain; }
.er-lb button { position: absolute; border: 0; background: rgba(255, 255, 255, .1); color: #fff; width: 48px; height: 48px; border-radius: 50%; font-size: 28px; line-height: 1; cursor: pointer; }
.er-lb button:hover { background: rgba(255, 255, 255, .22); }
.er-lb-x { top: 16px; right: 16px; }
.er-lb-p { left: 16px; top: 50%; transform: translateY(-50%); }
.er-lb-n { right: 16px; top: 50%; transform: translateY(-50%); }
.er-lb-c { position: absolute; bottom: 20px; color: #ccc; font: 14px system-ui, sans-serif; }
@media (max-width: 640px) { .er-lb-p, .er-lb-n { top: auto; bottom: 8px; transform: none; } }

.er-note { margin: 12px 0 0; padding: 12px 14px; border: 1px solid currentColor; border-radius: 4px; font-size: 14px; }