/* ============================================================
   Billboards page (interactive map + photo modal)
   Front: Areas/Front/Views/Billboard/Index.cshtml
   ============================================================ */

.bb-page { padding-top: 15px; padding-bottom: 40px; }
.bb-intro { background: #fff7f7; border-right: 4px solid #d60000; padding: 10px 14px; border-radius: 3px; color: #555; }
.bb-intro .fa { color: #d60000; margin-left: 6px; }
[dir="ltr"] .bb-intro, .ltr .bb-intro { border-right: 0; border-left: 4px solid #d60000; }
.bb-map-title { font-size: 18px; margin: 10px 0 15px; color: #333; }

/* ---- tabs ---- */
.bb-tabs { flex-wrap: nowrap; overflow-x: auto; overflow-y: hidden; -webkit-overflow-scrolling: touch; border-bottom: 2px solid #d60000; margin-bottom: 15px; }
.bb-tabs .nav-link { white-space: nowrap; color: #555; border: 0; border-radius: 0; padding: 10px 16px; font-size: 13.5px; }
.bb-tabs .nav-link .fa { margin-left: 4px; }
.bb-tabs .nav-link.active { color: #fff; background: #d60000; }
.bb-tabs .nav-link:hover:not(.active) { background: #f3f3f3; }

/* ---- wrapper / toolbar ---- */
.bb-wrapper { background: #fff; border: 1px solid #e3e3e3; border-radius: 4px; box-shadow: 0 1px 4px rgba(0,0,0,.06); overflow: hidden; }
.bb-toolbar { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 8px; padding: 8px 10px; background: #fafafa; border-bottom: 1px solid #eee; }
.bb-tools .btn { margin-left: 4px; border: 1px solid #ddd; }
.bb-tools .btn:last-child { margin-left: 0; }
.bb-search { display: flex; align-items: center; gap: 6px; }
.bb-search input { width: 150px; text-transform: uppercase; }
.bb-search .btn-danger { background: #d60000; border-color: #d60000; }

/* ---- viewport / stage ---- */
.bb-viewport { position: relative; height: 72vh; min-height: 380px; background: #ececec url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='20' height='20'><rect width='20' height='20' fill='%23ececec'/><rect width='10' height='10' fill='%23e4e4e4'/><rect x='10' y='10' width='10' height='10' fill='%23e4e4e4'/></svg>"); overflow: hidden; direction: ltr; touch-action: none; cursor: grab; user-select: none; -webkit-user-select: none; }
.bb-viewport.dragging { cursor: grabbing; }
.bb-stage { position: absolute; left: 0; top: 0; transform-origin: 0 0; will-change: transform; }
.bb-stage .bb-img { display: block; width: 100%; height: 100%; pointer-events: none; -webkit-user-drag: none; }
.bb-loading { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; font-size: 28px; color: #999; background: rgba(255,255,255,.6); }
.bb-wrapper.ready .bb-loading { display: none; }

/* ---- pins ---- */
.bb-pin { position: absolute; transform: translate(-50%, -50%) scale(var(--bb-inv, 1)); transform-origin: center; background: #d0021b; color: #fff; border: 2px solid #fff; border-radius: 14px; min-width: 28px; height: 22px; padding: 0 7px; font: bold 11px/18px Tahoma, Arial, sans-serif; box-shadow: 0 1px 4px rgba(0,0,0,.45); cursor: pointer; white-space: nowrap; direction: ltr; z-index: 5; transition: background .15s; touch-action: none; }
.bb-pin:hover, .bb-pin:focus { background: #f39c12; outline: none; z-index: 7; }
.bb-pin.no-photo { background: #8a8a8a; }
.bb-pin.no-photo:hover, .bb-pin.no-photo:focus { background: #f39c12; }
.bb-pin.pulse { animation: bbPulse 1s ease-in-out 3; z-index: 8; }
@keyframes bbPulse { 0%, 100% { box-shadow: 0 0 0 0 rgba(243,156,18,.9); } 50% { box-shadow: 0 0 0 12px rgba(243,156,18,0); } }

.bb-legend { display: flex; gap: 16px; padding: 6px 10px; font-size: 12px; color: #777; border-top: 1px solid #eee; background: #fafafa; }
.bb-dot { display: inline-block; width: 12px; height: 12px; border-radius: 50%; background: #d0021b; vertical-align: middle; margin-left: 4px; }
.bb-dot.no-photo { background: #8a8a8a; }

/* ---- description / codes ---- */
.bb-desc { margin: 15px 0 0; padding: 12px 15px; background: #f9f9f9; border: 1px solid #eee; border-radius: 4px; line-height: 2; white-space: pre-line; }
.bb-codes-title { font-size: 15px; margin: 20px 0 10px; color: #333; }
.bb-codes { display: flex; flex-wrap: wrap; gap: 6px; direction: ltr; }
.bb-chip { border: 1px solid #d0021b; background: #fff; color: #d0021b; border-radius: 16px; padding: 3px 12px; font: bold 12px Tahoma, Arial, sans-serif; cursor: pointer; transition: all .15s; }
.bb-chip:hover, .bb-chip:focus { background: #d0021b; color: #fff; outline: none; }
.bb-chip.no-photo { border-color: #999; color: #777; }
.bb-chip.no-photo:hover { background: #777; color: #fff; }
.bb-chip.unplaced { border-style: dashed; opacity: .75; }

/* ---- fullscreen ---- */
.bb-wrapper:fullscreen, .bb-wrapper:-webkit-full-screen { width: 100%; height: 100%; border: 0; border-radius: 0; display: flex; flex-direction: column; background: #fff; }
.bb-wrapper:fullscreen .bb-viewport, .bb-wrapper:-webkit-full-screen .bb-viewport { flex: 1; height: auto; }
.bb-wrapper.bb-fixed { position: fixed; inset: 0; z-index: 2000; border: 0; border-radius: 0; display: flex; flex-direction: column; background: #fff; }
.bb-wrapper.bb-fixed .bb-viewport { flex: 1; height: auto; min-height: 0; }
body.bb-noscroll { overflow: hidden; }

/* ---- modal ---- */
.bb-modal .modal-header { align-items: center; background: #d60000; color: #fff; padding: 10px 16px; }
.bb-modal .modal-title { font-size: 16px; }
.bb-modal .modal-title .bb-modal-code { font-size: 20px; margin-right: 4px; }
.bb-modal .modal-header .close { color: #fff; opacity: .9; text-shadow: none; margin: 0; padding: 4px 8px; }
.bb-modal-nav { display: flex; align-items: center; gap: 4px; margin-right: auto; }
[dir="ltr"] .bb-modal-nav, .ltr .bb-modal-nav { margin-right: 0; margin-left: auto; }
.bb-modal-nav .btn { border: 1px solid rgba(255,255,255,.4); background: rgba(255,255,255,.15); color: #fff; }
.bb-modal-nav .btn:hover { background: rgba(255,255,255,.3); color: #fff; }
.bb-modal .modal-body { padding: 0; min-height: 200px; background: #111; }
.bb-modal-loading, .bb-modal-empty { padding: 60px 20px; text-align: center; color: #bbb; }
.bb-modal-empty .fa { color: #666; margin-bottom: 10px; }
.bb-modal-empty p { color: #ddd; font-size: 15px; margin: 0; }
.bb-modal-error { margin: 15px; }
.bb-swiper { width: 100%; height: 70vh; max-height: 640px; }
.bb-swiper .swiper-slide { display: flex; align-items: center; justify-content: center; background: #111; }
.bb-swiper .swiper-slide img { max-width: 100%; max-height: 100%; width: auto; height: auto; object-fit: contain; cursor: zoom-in; }
.bb-swiper .swiper-button-prev, .bb-swiper .swiper-button-next { color: #fff; background: rgba(0,0,0,.4); width: 40px; height: 60px; border-radius: 4px; background-size: 18px; }
.bb-swiper .swiper-pagination-bullet { background: #fff; opacity: .5; }
.bb-swiper .swiper-pagination-bullet-active { opacity: 1; background: #d60000; }
.bb-swiper.single .swiper-button-prev, .bb-swiper.single .swiper-button-next, .bb-swiper.single .swiper-pagination { display: none; }
.bb-modal-caption { color: #ddd; text-align: center; padding: 8px 12px; font-size: 13px; min-height: 20px; background: #000; }
.bb-modal-caption:empty { display: none; }
.bb-modal-desc { background: #fff; color: #444; padding: 12px 16px; line-height: 1.9; white-space: pre-line; border-top: 3px solid #d60000; }
.bb-modal.bb-full .modal-dialog { max-width: 100%; width: 100%; margin: 0; height: 100%; }
.bb-modal.bb-full .modal-content { height: 100%; border: 0; border-radius: 0; }
.bb-modal.bb-full .modal-body { display: flex; flex-direction: column; }
.bb-modal.bb-full .bb-modal-gallery { flex: 1; display: flex; flex-direction: column; }
.bb-modal.bb-full .bb-swiper { flex: 1; height: auto; max-height: none; }
.bb-modal.bb-full .bb-swiper .swiper-slide img { cursor: zoom-out; }

/* ---- responsive ---- */
@media (max-width: 767px) {
    .bb-viewport { height: 60vh; min-height: 300px; }
    .bb-toolbar { padding: 6px; }
    .bb-tools .btn { padding: .25rem .45rem; }
    .bb-search input { width: 120px; }
    .bb-pin { min-width: 30px; height: 24px; line-height: 20px; }
    .bb-swiper { height: 55vh; }
    .bb-modal .modal-dialog { margin: 8px; }
    .bb-modal .modal-dialog-centered { min-height: calc(100% - 16px); }
}