.sr24-ship-icon { background: transparent !important;
border: none !important;
}
.sr24-ship-rotator {
display: block;
transform-origin: center center;
transition: transform 0.4s ease-out; will-change: transform;
}
.sr24-ship-dot svg circle {
transition: r 0.2s ease-out;
} .sr24-ship-estimate svg path,
.sr24-ship-estimate svg circle {
stroke-dasharray: 2 1.5;
} .sr24-ship-icon:hover .sr24-ship-rotator {
filter: drop-shadow(0 0 3px rgba(49, 174, 134, 0.8));
} .sr24-ship-highlighted .sr24-ship-rotator {
filter: drop-shadow(0 0 4px rgba(255, 255, 255, 0.9)) drop-shadow(0 0 2px rgba(49, 174, 134, 1));
}.wvm-container {
position: relative;
font-family: inherit; isolation: isolate;
} .wvm-dashboard {
background: #0B2942; color: #fff;
padding: 16px 20px;
border-radius: 8px 8px 0 0;
}
.wvm-dashboard-tiles {
display: flex;
gap: 12px;
flex-wrap: wrap;
margin-bottom: 14px;
}
.wvm-tile {
background: rgba(255, 255, 255, 0.08);
border: 1px solid rgba(49, 174, 134, 0.4);
border-radius: 5px 0 20px 0;
padding: 10px 18px;
min-width: 110px;
text-align: center;
flex: 1 1 110px;
}
.wvm-tile-count {
display: block;
font-size: 1.6em;
font-weight: 700;
color: #31AE86;
line-height: 1.2;
}
.wvm-tile-label {
display: block;
font-size: 0.8em;
opacity: 0.85;
margin-top: 2px;
}
.wvm-controls {
display: flex;
gap: 12px;
flex-wrap: wrap;
align-items: center;
}
.wvm-search {
flex: 1 1 220px;
padding: 8px 12px;
border-radius: 5px 0 20px 0;
border: 1px solid rgba(255, 255, 255, 0.25);
background: rgba(255, 255, 255, 0.08);
color: #fff;
font-size: 0.95em;
}
.wvm-search::placeholder { color: rgba(255, 255, 255, 0.55); }
.wvm-search-wrap {
position: relative;
flex: 1 1 260px;
}
.wvm-search-wrap .wvm-search {
width: 100%;
}
.wvm-search-suggestions {
position: absolute;
top: calc(100% + 4px);
left: 0;
right: 0;
z-index: 1100;
background: #fff;
border-radius: 5px 0 20px 0;
box-shadow: 0 4px 18px rgba(0, 0, 0, 0.3);
overflow: hidden;
max-height: 320px;
overflow-y: auto;
}
.wvm-suggestion {
display: flex;
justify-content: space-between;
align-items: center;
gap: 10px;
padding: 9px 14px;
cursor: pointer;
color: #0B2942;
font-size: 0.92em;
border-bottom: 1px solid #eee;
}
.wvm-suggestion:last-child { border-bottom: none; }
.wvm-suggestion:hover { background: rgba(49, 174, 134, 0.12); }
.wvm-suggestion-name { font-weight: 600; }
.wvm-suggestion-meta { font-size: 0.82em; color: #7B8A99; white-space: nowrap; }
.wvm-suggestion-empty {
color: #7B8A99;
cursor: default;
font-style: italic;
}
.wvm-suggestion-empty:hover { background: none; }
.wvm-filter-buttons {
display: flex;
gap: 6px;
flex-wrap: wrap;
}
.wvm-filter-btn {
padding: 7px 14px;
border-radius: 5px 0 20px 0;
border: 1px solid rgba(49, 174, 134, 0.5);
background: transparent;
color: #fff;
cursor: pointer;
font-size: 0.85em;
transition: background 0.2s ease, color 0.2s ease;
}
.wvm-filter-btn:hover {
background: rgba(49, 174, 134, 0.2);
}
.wvm-filter-btn.active {
background: #31AE86;
border-color: #31AE86;
color: #0B2942;
font-weight: 600;
}
.wvm-filter-btn--other {
border-style: dashed;
opacity: 0.85;
}
.wvm-filter-btn--other.active {
border-style: solid;
opacity: 1;
} .wvm-vessel-info {
position: absolute;
top: 16px;
right: 16px;
z-index: 1000;
background: #fff;
color: #0B2942;
border-radius: 5px 0 20px 0;
box-shadow: 0 4px 18px rgba(0, 0, 0, 0.25);
padding: 16px 18px;
width: 280px;
max-width: calc(100% - 32px);
}
.wvm-vessel-info-close {
position: absolute;
top: 8px;
right: 10px;
background: none;
border: none;
font-size: 1.3em;
line-height: 1;
cursor: pointer;
color: #7B8A99;
}
.wvm-vessel-info-close:hover { color: #0B2942; }
.wvm-vessel-info h3 {
margin: 0 0 2px 0;
font-size: 1.1em;
color: #0B2942;
}
.wvm-photo {
margin: -16px -18px 12px -18px;
border-radius: 5px 0 0 0;
overflow: hidden;
background: #eef1f3;
}
.wvm-photo img {
display: block;
width: 100%;
height: 150px;
object-fit: cover;
}
.wvm-photo-loading,
.wvm-photo-empty {
height: 60px;
display: flex;
align-items: center;
justify-content: center;
color: #7B8A99;
font-size: 0.85em;
font-style: italic;
}
.wvm-photo-credit {
padding: 4px 10px;
font-size: 0.72em;
color: #7B8A99;
background: #f5f6f7;
}
.wvm-info-type {
margin: 0 0 10px 0;
font-size: 0.85em;
color: #31AE86;
font-weight: 600;
text-transform: uppercase;
letter-spacing: 0.03em;
}
.wvm-info-table {
width: 100%;
border-collapse: collapse;
font-size: 0.88em;
}
.wvm-info-table td {
padding: 4px 0;
border-bottom: 1px solid #eee;
}
.wvm-info-table td:first-child {
color: #7B8A99;
width: 45%;
}
.wvm-info-hint {
margin-top: 10px;
font-size: 0.82em;
color: #7B8A99;
font-style: italic;
}
.wvm-ship-page-link {
margin-top: 12px;
}
.wvm-ship-page-link a {
display: inline-block;
padding: 8px 16px;
border-radius: 5px 0 20px 0;
background: #31AE86;
color: #fff;
font-weight: 600;
font-size: 0.88em;
text-decoration: none;
transition: background 0.2s ease;
}
.wvm-ship-page-link a:hover {
background: #279470;
} .wvm-map {
width: 100%;
border-radius: 0 0 8px 8px;
} @media (max-width: 640px) {
.wvm-dashboard-tiles { gap: 8px; }
.wvm-tile { min-width: 90px; padding: 8px 10px; }
.wvm-vessel-info { left: 16px; right: 16px; width: auto; top: auto; bottom: 16px; }
}