.max-map { position: relative; margin: 20px 0; }
.max-map-wrapper { position: relative; display: inline-block; width: 100%; }
.max-map-wrapper img { width: 100%; height: auto; display: block; }
.max-zone { position: absolute; cursor: pointer; }
.max-indicator { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); width: 40px; height: 40px; background: #2271b1; color: #fff; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 24px; font-weight: bold; animation: pulse 1.5s infinite; box-shadow: 0 2px 10px rgba(0,0,0,0.3); cursor: pointer; transition: transform 0.2s; z-index: 100; }
.max-indicator:hover { transform: translate(-50%, -50%) scale(1.1); background: #00a32a; }
@keyframes pulse { 0% { transform: translate(-50%, -50%) scale(1); } 50% { transform: translate(-50%, -50%) scale(1.1); } 100% { transform: translate(-50%, -50%) scale(1); } }
.max-tooltip { position: absolute; bottom: 100%; left: 50%; transform: translateX(-50%); background: #000; color: #fff; padding: 5px 10px; border-radius: 5px; font-size: 12px; white-space: nowrap; margin-bottom: 8px; opacity: 0; transition: opacity 0.2s; pointer-events: none; z-index: 101; }
.max-indicator:hover + .max-tooltip { opacity: 1; }
.max-overlay { position: fixed; top: 0; left: 0; width: 100%; height: 100%; background: rgba(0,0,0,0.85); display: flex; justify-content: center; align-items: center; z-index: 99999; }
.max-overlay-content { background: #fff; max-width: 500px; width: 90%; border-radius: 12px; overflow: hidden; animation: slideIn 0.3s ease; position: relative; }
@keyframes slideIn { from { transform: scale(0.8); opacity: 0; } to { transform: scale(1); opacity: 1; } }
.max-overlay-close { position: absolute; top: 10px; right: 15px; font-size: 28px; cursor: pointer; color: #fff; background: rgba(0,0,0,0.5); width: 32px; height: 32px; border-radius: 50%; display: flex; align-items: center; justify-content: center; z-index: 100; }
.max-overlay-close:hover { background: rgba(0,0,0,0.8); transform: rotate(90deg); transition: all 0.3s; }
.max-overlay-media { text-align: center; padding: 20px; background: #f5f5f5; }
.max-overlay-media img { max-width: 100%; max-height: 250px; }
.max-overlay-text { padding: 20px; }
.max-overlay-text h3 { margin: 0 0 10px; color: #2271b1; }
.max-overlay-text p { margin: 0; line-height: 1.6; }
@media (max-width: 768px) { .max-indicator { width: 30px; height: 30px; font-size: 18px; } }