/* ============ TRIVIO RIVER OVERLAY — Public CSS ============ */
.trv-ro-wrap {
    background: #16253d;
    border: 1px solid rgba(255,255,255,.08);
    border-radius: 14px;
    overflow: hidden;
    box-shadow: 0 8px 32px rgba(0,0,0,.3);
    margin: 24px 0;
}
.trv-ro-toolbar {
    display: flex;
    flex-wrap: wrap;
    gap: 16px;
    align-items: center;
    justify-content: space-between;
    padding: 16px 20px;
    background: #1c2e4a;
    border-bottom: 1px solid rgba(255,255,255,.08);
}
.trv-ro-styles {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
}
.trv-ro-style-btn {
    padding: 8px 14px;
    background: rgba(255,255,255,.04);
    color: #e8e4dc;
    border: 1px solid rgba(255,255,255,.08);
    border-radius: 8px;
    font-size: 13px;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.15s;
    font-family: inherit;
}
.trv-ro-style-btn:hover {
    background: rgba(255,255,255,.08);
}
.trv-ro-style-btn.is-active {
    background: #1d7a6e;
    color: #fff;
    border-color: #1d7a6e;
}
.trv-ro-overlay-controls {
    display: flex;
    align-items: center;
    gap: 18px;
    flex-wrap: wrap;
}
.trv-ro-toggle {
    display: flex;
    align-items: center;
    gap: 8px;
    color: #e8e4dc;
    font-size: 14px;
    cursor: pointer;
    font-weight: 600;
}
.trv-ro-toggle input { accent-color: #2aaa99; width: 18px; height: 18px; }
.trv-ro-opacity {
    display: flex;
    align-items: center;
    gap: 10px;
    color: #e8e4dc;
    font-size: 14px;
}
.trv-ro-opacity input[type="range"] {
    accent-color: #2aaa99;
    width: 140px;
}
.trv-ro-opacity span {
    min-width: 40px;
    color: #2aaa99;
    font-weight: 700;
    font-size: 13px;
}

.trv-ro-map {
    width: 100%;
    background: #0a1422;
    z-index: 1;
}

.trv-ro-info {
    padding: 12px 20px;
    background: #1c2e4a;
    border-top: 1px solid rgba(255,255,255,.08);
    color: #e8e4dc;
    font-size: 14px;
}
.trv-ro-info strong { color: #2aaa99; }
.trv-ro-info-warning { color: #fbbf24; }
.trv-ro-info-warning a { color: #2aaa99; margin-left: 8px; }

.trv-ro-error {
    padding: 24px;
    background: #fef3c7;
    color: #92400e;
    border-radius: 8px;
    margin: 16px 0;
}

/* Pool markers */
.trv-ro-pool-marker {
    background: transparent !important;
    border: none !important;
}
.trv-ro-pool-pin {
    width: 28px;
    height: 28px;
    background: #1d7a6e;
    color: #fff;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 800;
    font-size: 12px;
    border: 3px solid #fff;
    box-shadow: 0 4px 8px rgba(0,0,0,.4);
}

.trv-ro-pool-popup {
    font-family: -apple-system, system-ui, sans-serif;
    text-align: center;
    color: #16253d;
}
.trv-ro-pool-popup strong {
    display: block;
    color: #2c7a3d;
    font-size: 14px;
    margin-bottom: 4px;
}

/* Mobile */
@media (max-width: 768px) {
    .trv-ro-toolbar { flex-direction: column; align-items: flex-start; }
    .trv-ro-overlay-controls { width: 100%; }
    .trv-ro-opacity input[type="range"] { width: 100%; flex: 1; }
}