* {
 box-sizing: border-box;
 margin: 0;
 padding: 0;
 font-family: Arial, Helvetica, sans-serif;
}

.catalogue-title {
 margin-top: 70px;
}

main {
 max-width: 1300px;
 margin: 100px auto;
 display: grid;
 grid-template-columns: 1fr 320px;
 gap: 20px;
}

.diagram {
 background: #fff;
 border-radius: 12px;
 box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
 position: relative;
 overflow: hidden;
 padding: 20px;
}

.boat {
 width: 100%;
 max-width: 700px;
 margin: auto;
 position: relative;
}

.boat img {
 width: 100%;
 display: block;
}

/* ====== HOTSPOTS ====== */
.hotspot {
 position: absolute;
 width: 14px;
 height: 14px;
 background: #0077ff;
 border-radius: 50%;
 border: 2px solid #fff;
 cursor: pointer;
 box-shadow: 0 0 0 0 rgba(0, 119, 255, 0.7);
 animation: pulse 2s infinite;
}

@keyframes pulse {
 0% {
  box-shadow: 0 0 0 0 rgba(0, 119, 255, 0.7);
 }
 70% {
  box-shadow: 0 0 0 12px rgba(0, 119, 255, 0);
 }
 100% {
  box-shadow: 0 0 0 0 rgba(0, 119, 255, 0);
 }
}

.tooltip {
 position: absolute;
 background: #0077ff;
 color: #fff;
 padding: 8px 14px;
 border-radius: 6px;
 font-size: 14px;
 white-space: nowrap;
 pointer-events: none;
 opacity: 0;
 transform: translateY(5px);
 transition: all 0.2s ease;
 z-index: 10;
}

.tooltip:after {
 content: "";
 position: absolute;
 left: 15px;
 bottom: -6px;
 border-width: 6px 6px 0 6px;
 border-style: solid;
 border-color: #0077ff transparent transparent transparent;
}

.tooltip.show {
 opacity: 1;
 transform: translateY(0);
}

.sidebar {
 background: #fff;
 border-radius: 12px;
 box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
 padding: 20px;
}

.sidebar h3 {
 font-size: 20px;
 margin-bottom: 15px;
}

.menu {
 list-style: none;
 padding: 0;
}

.menu > li {
 background: #f2f5f9;
 margin-bottom: 8px;
 border-radius: 6px;
 overflow: hidden;
}

.menu button {
 width: 100%;
 padding: 12px 15px;
 background: none;
 border: none;
 text-align: left;
 font-size: 15px;
 cursor: pointer;
 display: flex;
 justify-content: space-between;
 align-items: center;
 transition: background-color 0.3s ease, color 0.3s ease;
}

.menu button:hover {
 background: #e4ecf7;
}

.menu button.active {
 background: #0077ff;
 color: #fff;
}
.menu-btn {
 display: flex;
 justify-content: space-between;
 align-items: center;
 width: 100%;
 cursor: pointer;
}

/* Иконка + по умолчанию */
.menu-btn span {
 display: inline-block;
 font-size: 18px;
 font-weight: bold;
 transition: all 0.3s ease;
}

/* Когда меню открыто - меняем + на - */
.menu-btn.active span {
 content: "-";
 color: inherit;
}

/* Альтернативный вариант через псевдоэлементы */
.menu-btn::after {
 content: "+";
 font-weight: bold;
 width: 30px;
 height: 30px;
 border-radius: 50%;
 background: #0077ff;
 color: #fff;
 display: flex;
 align-items: center;
 justify-content: center;
 font-size: 22px;
}

.menu-btn.active::after {
 content: "−";
 background: #fff;
 color: #0077ff;
}
.submenu {
 list-style: none;
 max-height: 0;
 overflow: hidden;
 transition: 0.3s;
 padding: 0;
 transition: max-height 0.4s ease-in-out, opacity 0.3s ease-in-out;
}

.submenu li {
 transform: translateY(-10px);
 opacity: 0;
 transition: transform 0.3s ease, opacity 0.3s ease;
}

.submenu.open li {
 transform: translateY(0);
 opacity: 1;
}

.submenu.open li:nth-child(1) {
 transition-delay: 0.05s;
}
.submenu.open li:nth-child(2) {
 transition-delay: 0.1s;
}
.submenu.open li:nth-child(3) {
 transition-delay: 0.15s;
}
.submenu.open li:nth-child(4) {
 transition-delay: 0.2s;
}
.submenu.open li:nth-child(5) {
 transition-delay: 0.25s;
}
.submenu.open li:nth-child(6) {
 transition-delay: 0.3s;
}
.submenu.open li:nth-child(7) {
 transition-delay: 0.35s;
}
.submenu.open li:nth-child(8) {
 transition-delay: 0.4s;
}

.submenu.open {
 max-height: 300px;
}

.submenu a li {
 padding: 10px 20px;
 background: #fafcff;
 font-size: 14px;
 border-top: 1px solid #e6edf6;
 color: #212529;
}
.submenu a {
 text-decoration: none;
}

.submenu li:hover {
 background: #eef4ff;
 cursor: pointer;
}

.tooltip {
 position: fixed;
 left: var(--x, 0);
 top: var(--y, 0);
 transform: translate(-50%, -100%);
 color: white;
 padding: 5px 12px;
 border-radius: 4px;
 font-size: 14px;
 white-space: nowrap;
 pointer-events: none;
 opacity: 0;
 transition: opacity 0.15s ease;
 z-index: 9999;
 margin-top: -5px;
 will-change: left, top, opacity;
}

.tooltip::after {
 content: "";
 position: absolute;
 left: 10%;
 top: 97%;
 transform: translateX(-50%);
 border-width: 5px;
 border-style: solid;
}

.tooltip.show {
 opacity: 1;
}

.hotspot.active-hotspot {
 transform: scale(1.3);
 box-shadow: 0 0 15px rgba(255, 68, 68, 0.5);
 animation: pulse 1.5s infinite;
 z-index: 100;
}

@keyframes pulse {
 0% {
  transform: scale(1.3);
  opacity: 1;
 }
 50% {
  transform: scale(1.5);
  opacity: 0.7;
 }
 100% {
  transform: scale(1.3);
  opacity: 1;
 }
}

@media (max-width: 900px) {
 main {
  grid-template-columns: 1fr;
  margin: 50px auto;
 }

 .sidebar {
  order: 0;
 }
}

@media (max-width: 768px) {
 .tooltip {
  font-size: 12px;
  padding: 4px 10px;
  white-space: normal;
  max-width: 150px;
  text-align: center;
 }
}