/* Shared behaviour styles for both demo versions: overlays, motion, toast, map labels. */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body { margin: 0; }
img { max-width: 100%; }
button { font: inherit; cursor: pointer; }
[hidden] { display: none !important; }
:focus-visible { outline: 3px solid #C9A227; outline-offset: 2px; }

html.tr-lock, html.tr-lock body { overflow: hidden; }

.tr-overlay { position: fixed; inset: 0; z-index: 1000; }
.tr-backdrop { position: absolute; inset: 0; background: rgba(17, 28, 22, .45); opacity: 0; transition: opacity .22s ease; border: 0; padding: 0; width: 100%; cursor: default; }
.tr-overlay.is-open .tr-backdrop { opacity: 1; }

.tr-sheet { position: absolute; left: 0; right: 0; bottom: 0; transform: translateY(100%); transition: transform .3s cubic-bezier(.2, .8, .2, 1); }
.tr-drawer { position: absolute; top: 0; right: 0; bottom: 0; transform: translateX(100%); transition: transform .3s cubic-bezier(.2, .8, .2, 1); }
.tr-full { position: absolute; inset: 0; transform: translateY(100%); transition: transform .3s cubic-bezier(.2, .8, .2, 1); }
.tr-modal { opacity: 0; transform: translateY(14px) scale(.985); transition: opacity .22s ease, transform .3s cubic-bezier(.2, .8, .2, 1); }
.tr-overlay.is-open .tr-sheet, .tr-overlay.is-open .tr-drawer, .tr-overlay.is-open .tr-full { transform: none; }
.tr-overlay.is-open .tr-modal { opacity: 1; transform: none; }

.tr-toast { position: fixed; left: 50%; bottom: 24px; z-index: 1100; transform: translate(-50%, 16px); opacity: 0; pointer-events: none;
  background: #0E5730; color: #fff; border-radius: 999px; padding: 10px 18px; font: 600 14px/1.3 'Be Vietnam Pro', system-ui, sans-serif;
  box-shadow: 0 12px 30px -10px rgba(11, 32, 20, .5); transition: opacity .2s ease, transform .25s ease; white-space: nowrap; max-width: calc(100vw - 32px); overflow: hidden; text-overflow: ellipsis; }
.tr-toast.show { opacity: 1; transform: translate(-50%, 0); }

/* Demo bar above each version: back to the start page, switch versions. */
.tr-demobar { display: flex; align-items: center; gap: 10px; padding: 5px 12px; background: #0B2A1A; color: #DDEBE1; font: 500 13px/1.3 'Be Vietnam Pro', system-ui, sans-serif; }
.tr-demobar a { color: inherit; text-decoration: none; }
.tr-demo-home { display: inline-flex; align-items: center; gap: 6px; min-height: 36px; padding: 0 10px; border-radius: 8px; font-weight: 600; white-space: nowrap; }
.tr-demo-home:hover { background: rgba(255, 255, 255, .1); color: #fff; }
.tr-demo-home .sm { display: none; }
.tr-demo-tag { font-size: 10.5px; font-weight: 800; letter-spacing: .14em; color: #0B2A1A; background: #C9A227; border-radius: 4px; padding: 2px 6px; }
.tr-demo-note { color: #9FB8A7; font-size: 12px; white-space: nowrap; }
.tr-demo-right { margin-left: auto; display: flex; align-items: center; gap: 10px; }
.tr-demo-layout { display: flex; align-items: center; gap: 2px; background: rgba(255, 255, 255, .1); border-radius: 999px; padding: 3px 3px 3px 12px; }
.tr-demo-layout .lbl { font-size: 12px; color: #9FB8A7; margin-right: 6px; white-space: nowrap; }
.tr-demo-layout button { min-height: 34px; padding: 0 12px; border-radius: 999px; border: 0; background: transparent; color: #CFE0D4; font: 600 13px/1 'Be Vietnam Pro', system-ui, sans-serif; white-space: nowrap; }
.tr-demo-layout button:hover:not(:disabled) { color: #fff; }
.tr-demo-layout button[aria-pressed="true"] { background: #C9A227; color: #0B2A1A; }
.tr-demo-layout button:disabled { opacity: .45; cursor: not-allowed; }
.tr-demobar.is-mobile .tr-demo-layout { display: none; }
@media (max-width: 1200px) { .tr-demo-note { display: none; } }
.tr-demo-switch { display: flex; background: rgba(255, 255, 255, .1); border-radius: 999px; padding: 3px; flex-shrink: 0; }
.tr-demo-switch a { min-height: 34px; display: inline-flex; align-items: center; padding: 0 14px; border-radius: 999px; font-weight: 600; color: #CFE0D4; white-space: nowrap; }
.tr-demo-switch a:hover { color: #fff; }
.tr-demo-switch a[aria-current="page"] { background: #fff; color: #0E5730; }
@media (max-width: 640px) {
  .tr-demobar { gap: 6px; padding: 5px 8px; }
  .tr-demo-home { padding: 0 8px; }
  .tr-demo-home .lg, .tr-demo-note { display: none; }
  .tr-demo-home .sm { display: inline; }
  .tr-demo-switch a { padding: 0 11px; font-size: 12.5px; }
}

.tr-map { position: relative; width: 100%; height: 100%; background: #1E2A22; }
.tr-map .leaflet-container, .leaflet-container { font-family: 'Be Vietnam Pro', system-ui, sans-serif; }
.leaflet-tooltip.tr-lot-label { background: transparent; border: 0; box-shadow: none; padding: 0; color: #fff; font: 600 11px/1 'Be Vietnam Pro', system-ui, sans-serif;
  text-shadow: 0 1px 2px rgba(0, 0, 0, .9), 0 0 6px rgba(0, 0, 0, .6); white-space: nowrap; opacity: 0 !important; transition: opacity .15s; }
.leaflet-tooltip.tr-lot-label::before { display: none; }
.tr-show-labels .leaflet-tooltip.tr-lot-label { opacity: 1 !important; }
.leaflet-control-zoom a, .leaflet-control-layers-toggle { width: 44px !important; height: 44px !important; line-height: 44px !important; }
.leaflet-touch .leaflet-control-layers-toggle { background-size: 22px; }
.leaflet-control-layers { font: 500 13px/1.4 'Be Vietnam Pro', system-ui, sans-serif; border-radius: 10px !important; }
.leaflet-popup-content-wrapper { border-radius: 12px; }
.tr-lot-popup .leaflet-popup-content { margin: 12px 14px; font: 13px/1.4 'Be Vietnam Pro', system-ui, sans-serif; }

@media (prefers-reduced-motion: reduce) {
  .tr-backdrop, .tr-sheet, .tr-drawer, .tr-full, .tr-modal, .tr-toast { transition: none !important; }
}